Pārlūkot izejas kodu

HUE-3281 [core] Add the assist panel

Johan Ahlen 9 gadi atpakaļ
vecāks
revīzija
009c61d

+ 72 - 0
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -67,6 +67,77 @@ body {
   transition: 0.4s flex;
 }
 
+.assist-panel {
+  position: relative;
+  flex: 0 0 200px;
+  overflow-x: hidden;
+  white-space: nowrap;
+  -webkit-transition: 0.4s flex;
+  -moz-transition: 0.4s flex;
+  -ms-transition: 0.4s flex;
+  transition: 0.4s flex;
+}
+
+.assist-hidden {
+  flex: 0;
+}
+
+.assist-panel .assist {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.resizer {
+  height: 100%;
+  position: absolute;
+  width: 4px;
+  cursor: col-resize;
+}
+
+.resize-bar {
+  position: absolute;
+  height: 100%;
+  width: 2px;
+  background-color: #F1F1F1;
+}
+
+.hide-assist {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  z-index: 1000;
+  color: #D1D1D1;
+  font-size: 12px;
+  -webkit-transition: margin-right 0.2s linear, color 0.5s ease;
+  -moz-transition: margin-right 0.2s linear, color 0.5s ease;
+  -ms-transition: margin-right 0.2s linear, color 0.5s ease;
+  transition: margin-right 0.2s linear, color 0.5s ease;
+}
+
+.show-assist {
+  position: absolute;
+  top: 2px;
+  left: 8px;
+  font-size: 12px;
+  margin-left: 0;
+  -webkit-transition: margin-left 0.2s linear;
+  -moz-transition: margin-left 0.2s linear;
+  -ms-transition: margin-left 0.2s linear;
+  transition: margin-left 0.2s linear;
+}
+
+.show-assist:hover {
+  margin-left: 2px;
+}
+
+.hide-assist:hover {
+  margin-right: 2px;
+  color: #338bb8;
+}
+
 .left-nav-visible {
   flex: 0 0 15em;
   background-color: lightgrey;
@@ -76,6 +147,7 @@ body {
 .page-content {
   flex: 2;
   padding: 1em;
+  position: relative;
 }
 
 h1 {

+ 84 - 16
desktop/core/src/desktop/templates/responsive.mako

@@ -21,6 +21,11 @@
   from desktop.views import login_modal
 %>
 
+<%namespace name="tableStats" file="/table_stats.mako" />
+<%namespace name="assist" file="/assist.mako" />
+<%namespace name="require" file="/require.mako" />
+<%namespace name="hueIcons" file="/hue_icons.mako" />
+
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
 <head>
@@ -62,6 +67,8 @@
 
 <body>
 
+${ hueIcons.symbols() }
+
 <div class="main-page">
   <div class="top-nav">
     <a class="hamburger hamburger--squeeze pull-left" type="button">
@@ -69,31 +76,28 @@
         <span class="hamburger-inner"></span>
       </span>
     </a>
-    <a class="brand nav-tooltip pull-left" title="${_('Homepage')}" rel="navigator-tooltip" href="/home"><img
-        src="${ static('desktop/art/hue-logo-mini-white.png') }"
-        data-orig="${ static('desktop/art/hue-logo-mini-white.png') }"
-        data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
+    <a class="brand nav-tooltip pull-left" title="${_('Homepage')}" rel="navigator-tooltip" href="/home"><img src="${ static('desktop/art/hue-logo-mini-white.png') }" data-orig="${ static('desktop/art/hue-logo-mini-white.png') }" data-hover="${ static('desktop/art/hue-logo-mini-white-hover.png') }"/></a>
     <span style="color:white">
 
-    <span style="font-size: 130%" title="Query data">
-      <a href="${ url('notebook:new') }">+ Query</a>
-    </span>
+      <span style="font-size: 130%" title="Query data">
+        <a href="${ url('notebook:new') }">+ Query</a>
+      </span>
 
-    [Hive..]
-    [Search..]
+      [Hive..]
+      [Search..]
 
-    <input class="input-xxlarge"></input>
+      <input class="input-xxlarge"></input>
 
-    [clusters]
+      [clusters]
 
-    ${ user.username }
+      ${ user.username }
 
-    <span title="Running jobs"><i class="fa fa-circle-o"></i> (10)</span>
-    <span title="Notifications"><i class="fa fa-bell-o"></i> (15)</span>
+      <span title="Running jobs"><i class="fa fa-circle-o"></i> (10)</span>
+      <span title="Notifications"><i class="fa fa-bell-o"></i> (15)</span>
 
-    [? | About Hue]
+      [? | About Hue]
 
-    [Profile | Log out]
+      [Profile | Log out]
     </span>
   </div>
 
@@ -139,7 +143,33 @@
       <br/>&nbsp
       </span>
     </div>
+    <div class="assist-panel" data-bind="css: { 'assist-hidden' : ! isAssistVisible() }">
+      <a title="${_('Toggle Assist')}" class="pointer hide-assist" data-bind="click: function() { isAssistVisible(false) }">
+        <i class="fa fa-chevron-left"></i>
+      </a>
+
+      <div class="assist" data-bind="component: {
+        name: 'assist-panel',
+        params: {
+          user: user,
+          sql: {
+            sourceTypes: sqlSourceTypes,
+            activeSourceType: activeSqlSourceType,
+            navigationSettings: {
+              openDatabase: false,
+              openItem: false,
+              showStats: true
+            },
+          }
+        }
+      }"></div>
+    </div>
+    <div class="resizer" data-bind="splitDraggable : { appName: 'notebook', leftPanelVisible: isAssistVisible, onPosition: function(){ huePubSub.publish('split.draggable.position') } }"><div class="resize-bar">&nbsp;</div></div>
+
     <div class="page-content">
+      <a href="javascript: void(0);" title="${_('Toggle Assist')}" class="pointer show-assist" style="display:none;">
+        <i class="fa fa-chevron-right"></i>
+      </a>
       <h1>responsive</h1>
     </div>
   </div>
@@ -150,9 +180,47 @@
 <script src="${ static('desktop/ext/js/bootstrap.min.js') }"></script>
 <script src="${ static('desktop/ext/js/moment-with-locales.min.js') }"></script>
 <script src="${ static('desktop/ext/js/jquery/plugins/jquery.total-storage.min.js') }"></script>
+<script src="${ static('desktop/ext/js/jquery/plugins/jquery.nicescroll.min.js') }"></script>
+
+${ require.config() }
+${ tableStats.tableStats() }
+${ assist.assistPanel() }
 
 <script type="text/javascript" charset="utf-8">
 
+  require([
+    'knockout',
+    'assistPanel',
+    'ko.hue-bindings',
+    'knockout-sortable',
+    'ko.switch-case'
+  ], function (ko) {
+
+
+    var isAssistVisible = ko.observable(true);
+    isAssistVisible.subscribe(function (newValue) {
+      if (!newValue) {
+        $('.show-assist').show();
+      }
+    });
+
+    $('.show-assist').click(function () {
+      isAssistVisible(true);
+      $('.show-assist').hide();
+    })
+    ko.applyBindings({
+      isAssistVisible: isAssistVisible,
+      user: '${ user.username }',
+      sqlSourceTypes: [{
+        type: 'hive', name: 'Hive'
+      },{
+        type: 'impala', name: 'Impala'
+      }],
+      activeSqlSourceType: 'hive'
+    }, $('.assist-panel')[0]);
+
+  });
+
   $(".hamburger").click(function () {
     $(this).toggleClass("is-active");
     $(".left-nav").toggleClass("left-nav-visible");