Browse Source

HUE-8437 [assist] Use vertical tabs for the right assist

Johan Ahlen 7 years ago
parent
commit
35fcd831b2

File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff suppressed because it is too large
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


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

@@ -2757,7 +2757,7 @@
 
 
       var positionPanels = function () {
       var positionPanels = function () {
         if (options.sidePanelVisible()) {
         if (options.sidePanelVisible()) {
-          $sidePanel.css('width',  Math.max(sidePanelWidth, 200) + 'px');
+          $sidePanel.css('flex-basis',  Math.max(sidePanelWidth, 200) + 'px');
           onPosition();
           onPosition();
         }
         }
       };
       };

+ 4 - 39
desktop/core/src/desktop/static/desktop/less/hue-assist.less

@@ -41,45 +41,6 @@
   padding-top: 10px;
   padding-top: 10px;
 }
 }
 
 
-.right-panel-tabs {
-  margin-top: 5px;
-  border-bottom: 1px solid @cui-default-border-color;
-  padding-left: 20px;
-  white-space: nowrap;
-  & > li {
-    padding-bottom: 8px;
-    display: inline-block;
-    float: none;
-    & > a {
-      font-size: 14px;
-      padding: 10px;
-      margin-bottom: 0;
-      color: @cui-gray-600;
-      background-color: @cui-white;
-    }
-  }
-  & > li.active > a, & > li.active > a:hover, & > li.active > a:focus {
-    padding: 10px;
-    font-weight: bold;
-    color: @hue-primary-color-dark;
-    background-color: @cui-white;
-  }
-}
-
-.right-panel-tab-content {
-  position: absolute;
-  top: 40px;
-  bottom: 0;
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  border: none !important;
-  padding-top: 20px;
-  .assist-inner-panel {
-    top: 20px;
-  }
-}
-
 .assist-function-categories,
 .assist-function-categories,
 .assist-functions {
 .assist-functions {
   list-style: none;
   list-style: none;
@@ -584,6 +545,10 @@
 
 
 .assist-docs-topics {
 .assist-docs-topics {
   position: relative;
   position: relative;
+
+  > .assist-docs-topic-tree {
+    margin-left: 0;
+  }
 }
 }
 
 
 .assist-flex-fill {
 .assist-flex-fill {

+ 46 - 0
desktop/core/src/desktop/static/desktop/less/hue4.less

@@ -336,7 +336,53 @@
 }
 }
 
 
 .right-panel {
 .right-panel {
+  .display-flex();
   min-width: 250px;
   min-width: 250px;
+
+  &.right-assist-minimized {
+    min-width: 38px;
+    max-width: 38px;
+    flex-basis: 38px;
+    .right-assist-tabs {
+      cursor: default;
+    }
+
+  }
+
+  .right-assist-tabs {
+    .flex(0 0 35px);
+    padding-top: 5px;
+    border-left: 1px solid @cui-gray-300;
+    border-right: 1px solid @cui-gray-300;
+    cursor: ew-resize;
+
+    .right-assist-tab {
+      cursor: pointer;
+      height: 35px;
+      font-size: 20px;
+
+      a {
+        display: block;
+        height: 31px;
+        width: 31px;
+        margin: 2px;
+        padding: 1px 0 0 1px;
+
+        i {
+          margin-top: 6px;
+          margin-left: 3px;
+        }
+      }
+    }
+  }
+
+  .right-assist-contents {
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    position: relative;
+    .flex(1 1 100%);
+  }
 }
 }
 
 
 .side-panel-closed {
 .side-panel-closed {

+ 77 - 38
desktop/core/src/desktop/templates/assist.mako

@@ -3547,36 +3547,42 @@ from desktop.views import _ko
   </script>
   </script>
 
 
   <script type="text/html" id="right-assist-panel-template">
   <script type="text/html" id="right-assist-panel-template">
-    <div style="height: 100%; width: 100%; position: relative;">
-      <ul class="right-panel-tabs nav nav-pills">
-        <li data-bind="css: { 'active' : activeTab() === 'editorAssistant' }, visible: editorAssistantTabAvailable" style="display:none;"><a href="javascript: void(0);" data-bind="click: function() { lastActiveTabEditor('editorAssistant'); activeTab('editorAssistant'); }">${ _('Assistant') }</a></li>
-        <li data-bind="css: { 'active' : activeTab() === 'functions' }, visible: functionsTabAvailable" style="display:none;"><a href="javascript: void(0);" data-bind="click: function() { lastActiveTabEditor('functions'); activeTab('functions'); }">${ _('Functions') }</a></li>
-        <li data-bind="css: { 'active' : activeTab() === 'langRef' }, visible: langRefTabAvailable" style="display:none;"><a href="javascript: void(0);" data-bind="click: function() { lastActiveTabEditor('langRef'); activeTab('langRef'); }">${ _('Reference') }</a></li>
-        <li data-bind="css: { 'active' : activeTab() === 'schedules' }, visible: schedulesTabAvailable" style="display:none;"><a href="javascript: void(0);" data-bind="click: function() { lastActiveTabEditor('schedules'); activeTab('schedules'); }">${ _('Schedule') }</a></li>
-        <li data-bind="css: { 'active' : activeTab() === 'dashboardAssistant' }, visible: dashboardAssistantTabAvailable" style="display:none;"><a href="javascript: void(0);" data-bind="click: function() { lastActiveTabDashboard('dashboardAssistant'); activeTab('dashboardAssistant'); }">${ _('Assistant') }</a></li>
-      </ul>
+    <div class="right-assist-tabs" data-bind="splitFlexDraggable : {
+        containerSelector: '.content-wrapper',
+        sidePanelSelector: '.right-panel',
+        sidePanelVisible: visible,
+        orientation: 'right',
+        onPosition: function() { huePubSub.publish('split.draggable.position') }
+      }">
+      <div class="right-assist-tab" data-bind="visible: editorAssistantTabAvailable" style="display:none;"><a class="inactive-action" href="javascript: void(0);" title="${ _('Assistant') }" data-bind="css: { 'blue' : activeTab() === 'editorAssistant' }, tooltip: { placement: 'left' }, click: editorAssistantTabClick"><i class="fa fa-fw fa-compass"></i></a></div>
+      <div class="right-assist-tab" data-bind="visible: dashboardAssistantTabAvailable" style="display:none;"><a class="inactive-action" href="javascript: void(0);" title="${ _('Assistant') }" data-bind="css: { 'blue' : activeTab() === 'dashboardAssistant' }, tooltip: { placement: 'left' }, click: dashboardAssistantTabClick"><i class="fa fa-fw fa-compass"></i></a></div>
+      <div class="right-assist-tab" data-bind="visible: functionsTabAvailable" style="display:none;"><a class="inactive-action" href="javascript: void(0);" title="${ _('Functions') }" data-bind="css: { 'blue' : activeTab() === 'functions' }, tooltip: { placement: 'left' }, click: functionsTabClick"><i class="fa fa-fw fa-superscript"></i></a></div>
+      <div class="right-assist-tab" data-bind="visible: langRefTabAvailable" style="display:none;"><a class="inactive-action" href="javascript: void(0);" title="${ _('Language Reference') }" data-bind="css: { 'blue' : activeTab() === 'langRef' }, tooltip: { placement: 'left' }, click: langRefTabClick"><i class="fa fa-fw fa-book"></i></a></div>
+      <div class="right-assist-tab" data-bind="visible: schedulesTabAvailable" style="display:none;"><a class="inactive-action" href="javascript: void(0);" title="${ _('Schedule') }" data-bind="css: { 'blue' : activeTab() === 'schedules' }, tooltip: { placement: 'left' }, click: schedulesTabClick"><i class="fa fa-fw fa-calendar"></i></a></div>
+    </div>
 
 
-      <div class="right-panel-tab-content tab-content">
-        <!-- ko if: editorAssistantTabAvailable-->
-        <div data-bind="component: { name: 'editor-assistant-panel', params: { activeTab: activeTab } }, visible: activeTab() === 'editorAssistant'"></div>
-        <!-- /ko -->
+    <!-- ko if: visible -->
+    <div class="right-assist-contents">
+      <!-- ko if: editorAssistantTabAvailable-->
+      <div data-bind="component: { name: 'editor-assistant-panel', params: { activeTab: activeTab } }, visible: activeTab() === 'editorAssistant'"></div>
+      <!-- /ko -->
 
 
-        <!-- ko if: functionsTabAvailable -->
-        <div data-bind="component: { name: 'functions-panel' }, visible: activeTab() === 'functions'"></div>
-        <!-- /ko -->
+      <!-- ko if: functionsTabAvailable -->
+      <div data-bind="component: { name: 'functions-panel' }, visible: activeTab() === 'functions'"></div>
+      <!-- /ko -->
 
 
-        <!-- ko if: langRefTabAvailable -->
-        <div data-bind="component: { name: 'language-reference-panel' }, visible: activeTab() === 'langRef'"></div>
-        <!-- /ko -->
+      <!-- ko if: langRefTabAvailable -->
+      <div data-bind="component: { name: 'language-reference-panel' }, visible: activeTab() === 'langRef'"></div>
+      <!-- /ko -->
 
 
-        <!-- ko if: dashboardAssistantTabAvailable -->
-        <div data-bind="component: { name: 'dashboard-assistant-panel' }, visible: activeTab() === 'dashboardAssistant'"></div>
-        <!-- /ko -->
+      <!-- ko if: dashboardAssistantTabAvailable -->
+      <div data-bind="component: { name: 'dashboard-assistant-panel' }, visible: activeTab() === 'dashboardAssistant'"></div>
+      <!-- /ko -->
 
 
-        ## TODO: Switch to if: when loadSchedules from notebook.ko.js has been moved to the schedule-panel component
-        <div data-bind="component: { name: 'schedule-panel' }, visible: activeTab() === 'schedules'" style="display:none;"></div>
-      </div>
+      ## TODO: Switch to if: when loadSchedules from notebook.ko.js has been moved to the schedule-panel component
+      <div data-bind="component: { name: 'schedule-panel' }, visible: activeTab() === 'schedules'" style="display:none;"></div>
     </div>
     </div>
+    <!-- /ko -->
   </script>
   </script>
 
 
 
 
@@ -3594,6 +3600,7 @@ from desktop.views import _ko
         self.disposals = [];
         self.disposals = [];
 
 
         self.activeTab = ko.observable();
         self.activeTab = ko.observable();
+        self.visible = params.visible;
 
 
         self.editorAssistantTabAvailable = ko.observable(false);
         self.editorAssistantTabAvailable = ko.observable(false);
         self.dashboardAssistantTabAvailable = ko.observable(false);
         self.dashboardAssistantTabAvailable = ko.observable(false);
@@ -3605,8 +3612,6 @@ from desktop.views import _ko
         self.lastActiveTabEditor = apiHelper.withTotalStorage('assist', 'last.open.right.panel', ko.observable(), EDITOR_ASSISTANT_TAB);
         self.lastActiveTabEditor = apiHelper.withTotalStorage('assist', 'last.open.right.panel', ko.observable(), EDITOR_ASSISTANT_TAB);
         self.lastActiveTabDashboard = apiHelper.withTotalStorage('assist', 'last.open.right.panel.dashboard', ko.observable(), DASHBOARD_ASSISTANT_TAB);
         self.lastActiveTabDashboard = apiHelper.withTotalStorage('assist', 'last.open.right.panel.dashboard', ko.observable(), DASHBOARD_ASSISTANT_TAB);
 
 
-        var assistEnabledApp = false;
-
         huePubSub.subscribe('assist.highlight.risk.suggestions', function () {
         huePubSub.subscribe('assist.highlight.risk.suggestions', function () {
           if (self.editorAssistantTabAvailable() && self.activeTab() !== EDITOR_ASSISTANT_TAB) {
           if (self.editorAssistantTabAvailable() && self.activeTab() !== EDITOR_ASSISTANT_TAB) {
             self.activeTab(EDITOR_ASSISTANT_TAB);
             self.activeTab(EDITOR_ASSISTANT_TAB);
@@ -3622,11 +3627,10 @@ from desktop.views import _ko
         });
         });
 
 
         var updateTabs = function () {
         var updateTabs = function () {
-          if (!assistEnabledApp) {
-            params.rightAssistAvailable(false);
+          if (!self.visible()) {
+            self.activeTab(undefined);
             return;
             return;
           }
           }
-          var rightAssistAvailable = true;
           if (self.lastActiveTabEditor() === FUNCTIONS_TAB && self.functionsTabAvailable()) {
           if (self.lastActiveTabEditor() === FUNCTIONS_TAB && self.functionsTabAvailable()) {
             self.activeTab(FUNCTIONS_TAB);
             self.activeTab(FUNCTIONS_TAB);
           } else if (self.lastActiveTabEditor() === SCHEDULES_TAB && self.schedulesTabAvailable()) {
           } else if (self.lastActiveTabEditor() === SCHEDULES_TAB && self.schedulesTabAvailable()) {
@@ -3642,10 +3646,8 @@ from desktop.views import _ko
           } else if (self.dashboardAssistantTabAvailable()) {
           } else if (self.dashboardAssistantTabAvailable()) {
             self.activeTab(DASHBOARD_ASSISTANT_TAB);
             self.activeTab(DASHBOARD_ASSISTANT_TAB);
           } else {
           } else {
-            self.activeTab(null);
-            rightAssistAvailable = false;
+            self.activeTab(undefined);
           }
           }
-          params.rightAssistAvailable(rightAssistAvailable);
         };
         };
 
 
         var updateContentsForType = function (type) {
         var updateContentsForType = function (type) {
@@ -3675,21 +3677,58 @@ from desktop.views import _ko
 
 
         if (IS_HUE_4) {
         if (IS_HUE_4) {
           huePubSub.subscribe('set.current.app.name', function (appName) {
           huePubSub.subscribe('set.current.app.name', function (appName) {
-            assistEnabledApp = appName === 'editor' || appName === 'notebook' || appName === 'dashboard';
-            if (!assistEnabledApp) {
-              params.rightAssistAvailable(false);
-            }
             if (appName === 'dashboard') {
             if (appName === 'dashboard') {
               updateContentsForType(appName);
               updateContentsForType(appName);
             }
             }
           });
           });
           huePubSub.publish('get.current.app.name');
           huePubSub.publish('get.current.app.name');
-        } else {
-          assistEnabledApp = true;
         }
         }
         updateTabs();
         updateTabs();
       }
       }
 
 
+      RightAssistPanel.prototype.switchTab = function (tabName) {
+        var self = this;
+        if (self.activeTab() === tabName) {
+          self.visible(false);
+          self.activeTab(undefined);
+        } else {
+          self.activeTab(tabName);
+          if (!self.visible()) {
+            self.visible(true);
+          }
+        }
+      };
+
+      RightAssistPanel.prototype.editorAssistantTabClick = function () {
+        var self = this;
+        self.lastActiveTabEditor(EDITOR_ASSISTANT_TAB);
+        self.switchTab(EDITOR_ASSISTANT_TAB);
+      };
+
+      RightAssistPanel.prototype.dashboardAssistantTabClick = function () {
+        var self = this;
+        self.lastActiveTabDashboard(DASHBOARD_ASSISTANT_TAB);
+        self.switchTab(DASHBOARD_ASSISTANT_TAB);
+      };
+
+      RightAssistPanel.prototype.functionsTabClick = function () {
+        var self = this;
+        self.lastActiveTabEditor(FUNCTIONS_TAB);
+        self.switchTab(FUNCTIONS_TAB);
+      };
+
+      RightAssistPanel.prototype.langRefTabClick = function () {
+        var self = this;
+        self.lastActiveTabEditor(LANG_REF_TAB);
+        self.switchTab(LANG_REF_TAB);
+      };
+
+      RightAssistPanel.prototype.schedulesTabClick = function () {
+        var self = this;
+        self.lastActiveTabEditor(SCHEDULES_TAB);
+        self.switchTab(SCHEDULES_TAB);
+      };
+
       RightAssistPanel.prototype.dispose = function () {
       RightAssistPanel.prototype.dispose = function () {
         var self = this;
         var self = this;
         self.disposals.forEach(function (dispose) {
         self.disposals.forEach(function (dispose) {

+ 21 - 21
desktop/core/src/desktop/templates/hue.mako

@@ -411,26 +411,12 @@ ${ hueIcons.symbols() }
       % endif
       % endif
     </div>
     </div>
 
 
-    <div id="rightResizer" class="resizer" data-bind="visible: rightAssistVisible() && rightAssistAvailable(), splitFlexDraggable : {
-      containerSelector: '.content-wrapper',
-      sidePanelSelector: '.right-panel',
-      sidePanelVisible: rightAssistVisible,
-      orientation: 'right',
-      onPosition: function() { huePubSub.publish('split.draggable.position') }
-    }"><div class="resize-bar" style="right: 0">&nbsp;</div></div>
-
-    <div class="right-panel side-panel-closed" data-bind="visible: rightAssistAvailable, css: { 'side-panel-closed': !rightAssistVisible() || !rightAssistAvailable() }, visibleOnHover: { selector: '.hide-right-side-panel' }" style="display:none;">
-      <a href="javascript:void(0);" style="z-index: 1002; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-right-side-panel" data-bind="visible: rightAssistAvailable() && !rightAssistVisible(), toggle: rightAssistVisible"><i class="fa fa-chevron-left"></i></a>
-      <a href="javascript:void(0);" style="display: none; opacity: 0;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-right-side-panel" data-bind="visible: rightAssistAvailable() && rightAssistVisible(), toggle: rightAssistVisible"><i class="fa fa-chevron-right"></i></a>
-
-      <div class="assist" data-bind="component: {
-          name: 'right-assist-panel',
-          params: {
-            rightAssistAvailable: rightAssistAvailable
-          }
-        }, visible: rightAssistAvailable() && rightAssistVisible()" style="display: none;">
-      </div>
-    </div>
+    <div class="right-panel" data-bind="css: { 'right-assist-minimized': !rightAssistVisible() }, visible: rightAssistAvailable, component: {
+        name: 'right-assist-panel',
+        params: {
+          visible: rightAssistVisible
+        }
+      }" style="display: none;"></div>
 
 
     <div class="context-panel" data-bind="slideVisible: contextPanelVisible">
     <div class="context-panel" data-bind="slideVisible: contextPanelVisible">
       <div class="margin-top-10 padding-left-10 padding-right-10">
       <div class="margin-top-10 padding-left-10 padding-right-10">
@@ -1361,6 +1347,20 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
           }
           }
         });
         });
 
 
+        huePubSub.subscribe('set.current.app.name', function (appName) {
+          if (appName === 'dashboard') {
+            self.rightAssistAvailable(true);
+          } else if (appName !== 'editor' && appName !== 'notebook') {
+            self.rightAssistAvailable(false);
+          }
+        });
+
+        huePubSub.subscribe('active.snippet.type.changed', function (snippetType) {
+          self.rightAssistAvailable(snippetType === 'impala' || snippetType === 'hive' || snippetType ==='pig');
+        });
+
+        huePubSub.publish('get.current.app.name');
+
         self.activeAppViewModel = ko.observable();
         self.activeAppViewModel = ko.observable();
         self.currentApp = ko.observable('');
         self.currentApp = ko.observable('');
         self.templateApp = ko.pureComputed(function(){
         self.templateApp = ko.pureComputed(function(){
@@ -1448,7 +1448,7 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
       var sidePanelViewModel = new SidePanelViewModel();
       var sidePanelViewModel = new SidePanelViewModel();
       ko.applyBindings(sidePanelViewModel, $('.left-panel')[0]);
       ko.applyBindings(sidePanelViewModel, $('.left-panel')[0]);
       ko.applyBindings(sidePanelViewModel, $('#leftResizer')[0]);
       ko.applyBindings(sidePanelViewModel, $('#leftResizer')[0]);
-      ko.applyBindings(sidePanelViewModel, $('#rightResizer')[0]);
+      ##  ko.applyBindings(sidePanelViewModel, $('#rightResizer')[0]);
       ko.applyBindings(sidePanelViewModel, $('.right-panel')[0]);
       ko.applyBindings(sidePanelViewModel, $('.right-panel')[0]);
       ko.applyBindings(sidePanelViewModel, $('.context-panel')[0]);
       ko.applyBindings(sidePanelViewModel, $('.context-panel')[0]);
 
 

+ 1 - 0
desktop/libs/notebook/src/notebook/static/notebook/js/notebook.ko.js

@@ -3563,6 +3563,7 @@ var EditorViewModel = (function() {
     };
     };
 
 
     self.newNotebook = function (editorType, callback, queryTab) {
     self.newNotebook = function (editorType, callback, queryTab) {
+      huePubSub.publish('active.snippet.type.changed', editorType);
       $.post("/notebook/api/create_notebook", {
       $.post("/notebook/api/create_notebook", {
         type: editorType || options.editor_type,
         type: editorType || options.editor_type,
         directory_uuid: window.location.getParameter('directory_uuid')
         directory_uuid: window.location.getParameter('directory_uuid')

Some files were not shown because too many files changed in this diff