Browse Source

HUE-3294 [assist] Add tabs to the right assist

Johan Ahlen 9 years ago
parent
commit
418b69127d

+ 26 - 2
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -444,6 +444,31 @@ body {
   bottom: 0;
 }
 
+.right-panel-tabs {
+  margin-top: 8px;
+  border-bottom: 1px solid #F1F1F1;
+  padding-left: 14px;
+}
+
+.right-panel-tabs > li > a {
+  font-size: 13px;
+  padding: 6px 5px 8px 5px;
+  margin-bottom: 0;
+}
+
+.right-panel-tabs > li.active > a {
+  padding: 6px 5px 8px 5px;
+}
+.right-panel-tab-content {
+  position: absolute;
+  top: 40px;
+  bottom: 0;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border: none;
+}
+
 .assist-function-categories,
 .assist-functions {
   list-style: none;
@@ -506,8 +531,7 @@ a:visited {
 }
 
 .assist-function-type-switch {
-  text-align: right;
-  padding: 5px 10px;
+  padding: 8px 10px;
   font-size: 15px;
 }
 

+ 26 - 4
desktop/core/src/desktop/templates/responsive.mako

@@ -266,12 +266,33 @@ ${ hueIcons.symbols() }
       sidePanelVisible: rightAssistVisible,
       orientation: 'right',
       onPosition: function() { huePubSub.publish('split.draggable.position') }
-    }"><div class="resize-bar">&nbsp;</div></div>
+    }"><div class="resize-bar" style="right: 0">&nbsp;</div></div>
 
-    <div class="right-panel" data-bind="css: { 'side-panel-closed': !rightAssistVisible() }">
-      <a href="javascript:void(0);" style="z-index: 1000; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-right-side-panel" data-bind="visible: ! rightAssistVisible(), toggle: rightAssistVisible"><i class="fa fa-chevron-left"></i></a>
+    <div class="right-panel" data-bind="visible: { 'side-panel-closed': !rightAssistVisible() }">
+      <a href="javascript:void(0);" style="display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-right-side-panel" data-bind="visible: ! rightAssistVisible(), toggle: rightAssistVisible"><i class="fa fa-chevron-left"></i></a>
       <a href="javascript:void(0);" style="display: none;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-right-side-panel" data-bind="visible: rightAssistVisible, toggle: rightAssistVisible"><i class="fa fa-chevron-right"></i></a>
-      <div style="position: absolute; top: 15px; bottom: 0; left: 0; right: 0;" data-bind="component: { name: 'functions-panel' }"></div>
+
+      <div data-bind="visible: rightAssistVisible" style="display: none; height: 100%; width: 100%; position: relative;">
+        <ul class="right-panel-tabs nav nav-pills">
+          <li data-bind="css: { 'active' : activeRightTab() === 'assistant' }"><a href="#functions" data-bind="click: function() { activeRightTab('assistant'); }">${ _('Assistant') }</a></li>
+          <li data-bind="css: { 'active' : activeRightTab() === 'functions' }"><a href="#functions" data-bind="click: function() { activeRightTab('functions'); }">${ _('Functions') }</a></li>
+          <li data-bind="css: { 'active' : activeRightTab() === 'schedules' }"><a href="#functions" data-bind="click: function() { activeRightTab('schedules'); }">${ _('Schedules') }</a></li>
+        </ul>
+
+        <div class="right-panel-tab-content tab-content">
+          <!-- ko if: activeRightTab() === 'assistant' -->
+          <div>Assistant</div>
+          <!-- /ko -->
+
+          <!-- ko if: activeRightTab() === 'functions' -->
+          <div style="" data-bind="component: { name: 'functions-panel' }"></div>
+          <!-- /ko -->
+
+          <!-- ko if: activeRightTab() === 'schedules' -->
+          <div>Schedules</div>
+          <!-- /ko -->
+        </div>
+      </div>
     </div>
   </div>
 </div>
@@ -416,6 +437,7 @@ ${ assist.assistPanel() }
         self.apiHelper = ApiHelper.getInstance();
         self.leftAssistVisible = ko.observable();
         self.rightAssistVisible = ko.observable();
+        self.activeRightTab = ko.observable('functions');
         self.apiHelper.withTotalStorage('assist', 'left_assist_panel_visible', self.leftAssistVisible, true);
         self.apiHelper.withTotalStorage('assist', 'right_assist_panel_visible', self.rightAssistVisible, true);
       }