Browse Source

HUE-3281 [core] Assist for small screens

Enrico Berti 9 years ago
parent
commit
dcc226d

+ 40 - 0
desktop/core/src/desktop/static/desktop/css/hue-mobile.css

@@ -82,3 +82,43 @@ body.open {
   word-wrap: break-word!important;
   white-space: normal!important;
 }
+
+.blue {
+  color: #338BB8!important;
+}
+
+.inactive-action,
+.inactive-action a {
+  -webkit-transition: color 0.2s ease;
+  -moz-transition: color 0.2s ease;
+  -ms-transition: color 0.2s ease;
+  transition: color 0.2s ease;
+  color: #999;
+}
+
+.inactive-action:hover {
+  text-decoration: none;
+}
+
+.inactive-action.disabled {
+  color: #eee !important;
+  cursor: default !important;
+}
+
+.inactive-action:not(.disabled):hover,
+.inactive-action:not(.disabled):hover > a {
+  color: #338bb8 !important;
+}
+
+.inactive-action:focus {
+  color: #999;
+}
+
+.assist-panel-switches {
+  text-align: center;
+}
+
+.assist-type-switch {
+  margin-left: 10px;
+  margin-right: 10px;
+}

+ 25 - 15
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1567,7 +1567,9 @@
             }
           });
         }
-        $('.assist-flex-fill').getNiceScroll().resize();
+        if ($.fn.niceScroll) {
+          $('.assist-flex-fill').getNiceScroll().resize();
+        }
       };
 
       resizeByRatio();
@@ -1668,7 +1670,9 @@
               panelRatios[panelDefinitions()[idx].type] = $(panel).outerHeight(true) / totalHeightForPanels;
             });
             apiHelper.setInTotalStorage('assist', 'innerPanelRatios', panelRatios);
-            $('.assist-flex-fill').getNiceScroll().resize();
+            if ($.fn.niceScroll) {
+              $('.assist-flex-fill').getNiceScroll().resize();
+            }
           }
         });
       });
@@ -3879,19 +3883,23 @@
           'width': '100%'
         }).appendTo($wrapper);
 
-        $container.niceScroll({
-          cursorcolor: "#CCC",
-          cursorborder: "1px solid #CCC",
-          cursoropacitymin: 0,
-          cursoropacitymax: 0.75,
-          scrollspeed: 100,
-          mousescrollstep: 60,
-          cursorminheight: options.cursorminheight || 20,
-          horizrailenabled: options.horizrailenabled || false
-        });
+        if ($.fn.niceScroll) {
+          $container.niceScroll({
+            cursorcolor: "#CCC",
+            cursorborder: "1px solid #CCC",
+            cursoropacitymin: 0,
+            cursoropacitymax: 0.75,
+            scrollspeed: 100,
+            mousescrollstep: 60,
+            cursorminheight: options.cursorminheight || 20,
+            horizrailenabled: options.horizrailenabled || false
+          });
+        }
       } else {
         window.setTimeout(function(){
-          $container.getNiceScroll().resize();
+          if ($.fn.niceScroll) {
+            $container.getNiceScroll().resize();
+          }
         }, 200);
       }
 
@@ -3914,7 +3922,9 @@
           totalHeight += height;
         });
         $wrapper.height(totalHeight + 'px');
-        $container.getNiceScroll().resize();
+        if ($.fn.niceScroll) {
+          $container.getNiceScroll().resize();
+        }
       };
       resizeWrapper();
 
@@ -4262,7 +4272,7 @@
   ko.bindingHandlers.niceScroll = {
     init: function (element, valueAccessor, allBindings) {
       var options = valueAccessor() || {};
-      if (typeof options.enable === 'undefined' || options.enable) {
+      if ((typeof options.enable === 'undefined' || options.enable) && $.fn.niceScroll) {
         $(element).niceScroll({
           cursorcolor: "#CCC",
           cursorborder: "1px solid #CCC",

+ 147 - 0
desktop/core/src/desktop/templates/assist_m.mako

@@ -0,0 +1,147 @@
+## Licensed to Cloudera, Inc. under one
+## or more contributor license agreements.  See the NOTICE file
+## distributed with this work for additional information
+## regarding copyright ownership.  Cloudera, Inc. licenses this file
+## to you under the Apache License, Version 2.0 (the
+## "License"); you may not use this file except in compliance
+## with the License.  You may obtain a copy of the License at
+##
+##     http://www.apache.org/licenses/LICENSE-2.0
+##
+## Unless required by applicable law or agreed to in writing, software
+## distributed under the License is distributed on an "AS IS" BASIS,
+## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+## See the License for the specific language governing permissions and
+## limitations under the License.
+<%!
+from desktop import conf
+from desktop.views import commonheader_m, commonfooter_m
+from django.utils.translation import ugettext as _
+%>
+
+<%namespace name="assist" file="assist.mako" />
+
+${ commonheader_m(_('Assist'), 'assist', user, request) | n,unicode }
+
+<script src="${ static('desktop/ext/js/jquery/plugins/jquery-ui-1.10.4.custom.min.js') }"></script>
+<script src="${ static('desktop/js/jquery.huedatatable.js') }"></script>
+<script src="${ static('desktop/ext/js/d3.v3.js') }" type="text/javascript" charset="utf-8"></script>
+<script src="${ static('desktop/ext/js/knockout.min.js') }"></script>
+<script src="${ static('desktop/ext/js/selectize.min.js') }"></script>
+<script src="${ static('desktop/js/apiHelper.js') }"></script>
+<script src="${ static('metastore/js/metastore.ko.js') }"></script>
+<script src="${ static('desktop/js/ko.charts.js') }"></script>
+<script src="${ static('desktop/ext/js/knockout-mapping.min.js') }"></script>
+<script src="${ static('desktop/ext/js/knockout-sortable.min.js') }"></script>
+<script src="${ static('desktop/js/ko.editable.js') }"></script>
+<script src="${ static('desktop/js/ko.hue-bindings.js') }"></script>
+<script src="${ static('desktop/js/assist/assistDbEntry.js') }"></script>
+<script src="${ static('desktop/js/assist/assistDbSource.js') }"></script>
+<script src="${ static('desktop/js/assist/assistHdfsEntry.js') }"></script>
+<script src="${ static('desktop/js/assist/assistS3Entry.js') }"></script>
+<script src="${ static('desktop/js/document/hueDocument.js') }"></script>
+<script src="${ static('desktop/js/document/hueFileEntry.js') }"></script>
+
+
+${ assist.assistPanel() }
+
+<style type="text/css">
+  .assist {
+    margin-left: -10px;
+    margin-right: -10px;
+  }
+
+  .assist-tables > li {
+    line-height: 26px;
+  }
+
+</style>
+
+
+<div class="assist" data-bind="component: {
+    name: 'assist-panel',
+    params: {
+      user: '${user.username}',
+      sql: {
+        sourceTypes: [{
+          name: 'hive',
+          type: 'hive'
+        }],
+        navigationSettings: {
+          enableActiveFilter: true,
+          openDatabase: false,
+          openItem: false,
+          showStats: false,
+          pinEnabled: false
+        },
+      },
+      visibleAssistPanels: ['sql']
+    }
+  }"></div>
+
+
+<script type="text/javascript" charset="utf-8">
+  (function () {
+    ko.options.deferUpdates = true;
+
+    function AssistViewModel(options) {
+      var self = this;
+      self.apiHelper = ApiHelper.getInstance(options);
+      self.assistAvailable = ko.observable(true);
+      self.isLeftPanelVisible = ko.observable();
+      self.apiHelper.withTotalStorage('assist', 'assist_panel_visible', self.isLeftPanelVisible, true);
+
+      self.sqlSourceTypes = [];
+      self.availableLanguages = [];
+
+      if (options.languages && options.snippetViewSettings) {
+        $.each(options.languages, function (idx, language) {
+          self.availableLanguages.push({
+            type: language.type,
+            name: language.name,
+            interface: language.interface,
+          });
+          var viewSettings = options.snippetViewSettings[language.type];
+          if (viewSettings && viewSettings.sqlDialect) {
+            self.sqlSourceTypes.push({
+              type: language.type,
+              name: language.name
+            })
+          }
+        });
+      }
+
+      var sqlSourceTypes = $.grep(self.sqlSourceTypes, function(language) { return language.type == self.editorType(); });
+      if (sqlSourceTypes.length > 0) {
+        self.activeSqlSourceType = sqlSourceTypes[0].type;
+      } else {
+        self.activeSqlSourceType = null;
+      }
+    }
+
+    $(document).ready(function () {
+
+      var options = {
+        user: '${ user.username }',
+        i18n: {
+          errorLoadingDatabases: "${ _('There was a problem loading the databases') }",
+          errorLoadingTablePreview: "${ _('There was a problem loading the table preview.') }"
+        }
+      }
+
+      var viewModel = new AssistViewModel(options);
+      ko.applyBindings(viewModel);
+
+      function resizeViewport() {
+        $('.assist').height($(window).height() - 90);
+      }
+
+      resizeViewport();
+
+      $(window).on('resize', resizeViewport);
+    });
+  })();
+</script>
+
+
+${ commonfooter_m(request, messages) | n,unicode }

+ 2 - 2
desktop/core/src/desktop/templates/common_header_m.mako

@@ -276,13 +276,13 @@ if USE_NEW_EDITOR.get():
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
       </button>
-      <a class="brand" href="/about">
+      <a class="brand" href="#">
         <img src="${ static('desktop/art/hue-logo-mini-white.png') }" />
         ${get_title(title)}
       </a>
       <div class="nav-collapse collapse">
         <ul class="nav">
-          <li><a title="${_('My documents')}" rel="navigator-tooltip" href="${ home_url }">${_('My documents')}</a></li>
+          <li><a title="${_('Assist')}" rel="navigator-tooltip" href="${ url('desktop.views.assist_m') }">${_('Assist')}</a></li>
           % if 'beeswax' in apps:
              % if USE_NEW_EDITOR.get():
              <li><a href="${ url('notebook:editor_m') }?type=hive">${_('Hive')}</a></li>

+ 3 - 0
desktop/core/src/desktop/urls.py

@@ -90,6 +90,9 @@ dynamic_patterns += patterns('desktop.views',
   (r'^desktop/debug/check_config_ajax$', 'check_config_ajax'),
   (r'^desktop/log_frontend_event$', 'log_frontend_event'),
 
+  # Mobile
+  (r'^assist_m', 'assist_m'),
+
   # Jasmine
   (r'^jasmine', 'jasmine'),
 

+ 3 - 0
desktop/core/src/desktop/views.py

@@ -295,6 +295,9 @@ def memory(request):
 def jasmine(request):
   return render('jasmine.mako', request, None)
 
+def assist_m(request):
+  return render('assist_m.mako', request, None)
+
 @login_notrequired
 def unsupported(request):
   return render('unsupported.mako', request, None)