Преглед на файлове

HUE-8330 [frontend] Add an inner left nav for multi cluster only mode

Johan Ahlen преди 7 години
родител
ревизия
19515d3

Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


Файловите разлики са ограничени, защото са твърде много
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 172 - 0
desktop/core/src/desktop/static/desktop/less/components/hue-dw-sidebar.less

@@ -0,0 +1,172 @@
+/*
+ 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.
+*/
+@sidebar-width: 180px;
+@collapsed-sidebar-width: 48px;
+@sidebar-animation-duration: 250ms;
+@sidebar-category-font-size: 13px;
+@sidebar-left-spacing: 16px;
+
+.hue-dw-sidebar-container {
+  position: relative;
+  .flex(0 0);
+  .flex-basis(@sidebar-width);
+  transition: flex-basis @sidebar-animation-duration;
+
+  .sidebar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 3px;
+    overflow: hidden;
+    background-color: @cui-white;
+    box-shadow: 0 0 3px 0 @cui-gray-600;
+
+    .fa:before {
+      font-size: 16px;
+      color: @text-color;
+    }
+
+    .sidebar-content {
+      top: 24px;
+      bottom: 36px;
+      position: absolute;
+      overflow-y: auto;
+      overflow-x: hidden;
+      width: 100%;
+    }
+
+    .sidebar-item {
+      display: block;
+      line-height: 36px;
+      color: @text-color;
+      white-space: nowrap;
+
+      .sidebar-icon {
+        float: left;
+        padding: 0 14px 0 @sidebar-left-spacing;
+        &.with-tooltip {
+          display: none;
+        }
+      }
+
+      .fa,
+      .altus-icon {
+        width: 18px;
+        font-size: 16px;
+        text-align: center;
+        vertical-align: middle;
+      }
+    }
+
+    .sidebar-item.active {
+      background: @cui-blue-050;
+      color: @cui-blue-500;
+
+      .fa:before {
+        color: @cui-blue-500;
+      }
+    }
+
+    .sidebar-item:hover {
+      color: @cui-blue-500;
+      .fa:before {
+        color: @cui-blue-500;
+      }
+    }
+
+    .sidebar-item:active {
+      background: @cui-blue-050;
+    }
+
+    .sidebar-category-item {
+      margin: 20px 0 4px @sidebar-left-spacing;
+      font-size: @sidebar-category-font-size;
+      font-weight: bold;
+      color: @cui-gray-600;
+      transition: opacity @sidebar-animation-duration;
+      white-space: nowrap;
+    }
+
+    .sidebar-action-button {
+      cursor: pointer;
+      background-color: inherit;
+      display: block;
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      left: 0;
+      line-height: 36px;
+      width: 100%;
+      text-align: right;
+      color: @text-color;
+      box-shadow: 0 0 3px 0 @cui-gray-600;
+
+      span {
+        padding-right: 16px;
+      }
+
+      &:hover {
+        background: @cui-gray-100;
+      }
+    }
+
+    .sidebar-item-name {
+      transition: opacity @sidebar-animation-duration;
+      opacity: 1;
+      vertical-align: middle;
+    }
+  }
+
+
+  &.collapsed {
+    .flex-basis(@collapsed-sidebar-width);
+
+    .sidebar {
+      .sidebar-category-item,
+      .sidebar-item-name {
+        opacity: 0;
+      }
+
+      .sidebar-icon.without-tooltip {
+        display: none;
+      }
+      .sidebar-icon.with-tooltip {
+        display: initial;
+      }
+
+      .sidebar-action-button {
+        text-align: center;
+        span {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+
+  .sidebar-placeholder {
+    transition: width @sidebar-animation-duration;
+    width: @sidebar-width;
+    height: 100%;
+    flex-shrink: 0;
+
+    &.collapsed {
+      width: @collapsed-sidebar-width;
+    }
+  }
+}

+ 1 - 0
desktop/core/src/desktop/static/desktop/less/hue-cross-version.less

@@ -21,6 +21,7 @@
 @import "components/hue-breadcrumbs.less";
 @import "components/hue-catalog-entries-table.less";
 @import "components/hue-demi-modal.less";
+@import "components/hue-dw-sidebar.less";
 @import "components/hue-filechooser.less";
 @import "components/hue-gridster.less";
 @import "components/hue-inputautocomplete.less";

+ 8 - 0
desktop/core/src/desktop/templates/hue.mako

@@ -337,6 +337,10 @@ ${ hueIcons.symbols() }
       % endif
     </div>
 
+    % if IS_MULTICLUSTER_ONLY.get():
+    <div class="hue-dw-sidebar-container collapsed" data-bind="component: { name: 'hue-dw-sidebar', params: { items: items } }"></div>
+    % endif
+
     <div class="left-panel" data-bind="css: { 'side-panel-closed': !leftAssistVisible() }, visibleOnHover: { selector: '.hide-left-side-panel' }">
       <a href="javascript:void(0);" style="z-index: 1002; display: none;" title="${_('Show Assist')}" class="pointer side-panel-toggle show-left-side-panel" data-bind="visible: !leftAssistVisible(), toggle: leftAssistVisible"><i class="fa fa-chevron-right"></i></a>
       <a href="javascript:void(0);" style="display: none; opacity: 0;" title="${_('Hide Assist')}" class="pointer side-panel-toggle hide-left-side-panel" data-bind="visible: leftAssistVisible, toggle: leftAssistVisible"><i class="fa fa-chevron-left"></i></a>
@@ -1682,6 +1686,10 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
 
       var sidebarViewModel = new SideBarViewModel(onePageViewModel, topNavViewModel);
       ko.applyBindings(sidebarViewModel, $('.hue-sidebar')[0]);
+    % if IS_MULTICLUSTER_ONLY.get():
+      ko.applyBindings(sidebarViewModel, $('.hue-dw-sidebar-container')[0]);
+    % endif
+
     })(onePageViewModel, topNavViewModel);
 
     huePubSub.publish('cluster.config.get.config');

+ 1 - 1
desktop/core/src/desktop/templates/hue_icons.mako

@@ -338,7 +338,7 @@
     <!-- ko case: 'documents' --><svg class="hi hi-fw"><use xlink:href="#hi-documents"></use></svg><!-- /ko -->
     <!-- ko case: 'report' --><i class="fa fa-fw fa-area-chart"></i><!-- /ko -->
     <!-- ko case: 'dist-cp' --><i class="fa fa-fw fa-files-o"></i><!-- /ko -->
-    <!-- ko case: 'editor' --><svg class="hi hi-fw"><use xlink:href="#hi-editor"></use></svg><!-- /ko -->
+    <!-- ko case: 'editor' --><i class="altus-icon altus-sql-editor"></i><!-- /ko -->
     <!-- ko case: 'hbase' --><svg class="hi hi-fw"><use xlink:href="#hi-hbase"></use></svg><!-- /ko -->
     <!-- ko case: 'hdfs' --><i class="fa fa-fw fa-folder-o"></i><!-- /ko -->
     <!-- ko case: 'hive' --><svg class="hi hi-fw"><use xlink:href="#hi-hive"></use></svg><!-- /ko -->

+ 2 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -20,6 +20,7 @@
 <%namespace name="koContextPopover" file="/ko_components/ko_context_popover.mako" />
 <%namespace name="koContextSelector" file="/ko_components/ko_context_selector.mako" />
 <%namespace name="koDropDown" file="/ko_components/ko_drop_down.mako" />
+<%namespace name="koDwSidebar" file="/ko_components/ko_dw_sidebar.mako" />
 <%namespace name="koFavoriteApp" file="/ko_components/ko_favorite_app.mako" />
 <%namespace name="koGlobalSearch" file="/ko_components/ko_global_search.mako" />
 <%namespace name="koHistoryPanel" file="/ko_components/ko_history_panel.mako" />
@@ -41,6 +42,7 @@
   ${ koContextPopover.contextPopover() }
   ${ koContextSelector.contextSelector() }
   ${ koDropDown.dropDown() }
+  ${ koDwSidebar.dwSidebar() }
   ${ koFavoriteApp.favoriteApp() }
   ${ koGlobalSearch.globalSearch() }
   ${ koHistoryPanel.historyPanel() }

+ 92 - 0
desktop/core/src/desktop/templates/ko_components/ko_dw_sidebar.mako

@@ -0,0 +1,92 @@
+## 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.lib.i18n import smart_unicode
+
+  from django.utils.translation import ugettext as _
+  from desktop.views import _ko
+%>
+
+<%def name="dwSidebar()">
+  <script type="text/html" id="hue-dw-sidebar-template">
+    <div class="sidebar">
+      <div class="sidebar-content" data-bind="foreach: items">
+        <!-- ko if: $index() !== 0 -->
+        <h4 class="sidebar-category-item" data-bind="text: displayName"></h4>
+        <!-- /ko -->
+        <!-- ko foreach: children -->
+        <!-- ko if: $component.collapsed -->
+        <a role="button" class="sidebar-item" data-bind="hueLink: url, attr: { title: displayName }, css: { 'active': url === $component.activeUrl() }, tooltip: { placement: 'right' }"><span class="sidebar-icon with-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span><span class="sidebar-item-name" data-bind="text: displayName"></span></a>
+        <!-- /ko -->
+        <!-- ko ifnot: $component.collapsed -->
+        <a role="button" class="sidebar-item" data-bind="hueLink: url, attr: { title: displayName }, css: { 'active': url === $component.activeUrl() }"><span class="sidebar-icon without-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span><span class="sidebar-item-name" data-bind="text: displayName"></span></a>
+        <!-- /ko -->
+        <!-- /ko -->
+      </div>
+      <a class="sidebar-action-button" role="button" data-bind="toggle: collapsed"><span aria-hidden="true" class="fa" data-bind="css: { 'fa-angle-double-right': collapsed, 'fa-angle-double-left': !collapsed() }"></span></a>
+    </div>
+  </script>
+
+  <script type="text/javascript">
+    (function () {
+
+      var DwSidebar = function DwSidebar(params, element) {
+        var self = this;
+        self.items = params.items;
+        self.collapsed = ko.observable(true);
+        self.collapsed.subscribe(function (newVal) {
+          if (newVal) {
+            $(element).addClass('collapsed')
+          } else {
+            $(element).removeClass('collapsed')
+          }
+        });
+
+        self.activeUrl = ko.observable();
+
+        // TODO: Figure out why it gets fired 30+ times on load
+        var throttle = -1;
+        huePubSub.subscribe('set.current.app.name', function (appName) {
+          window.clearTimeout(throttle);
+          throttle = window.setTimeout(function () {
+            self.items().some(function (item) {
+              return item.children.some(function (child) {
+                if (child.url.indexOf(appName.replace('_', '/')) !== -1) {
+                  if (self.activeUrl !== child.url) {
+                    self.activeUrl(child.url);
+                  }
+                  return true;
+                }
+              })
+            });
+          }, 20);
+        });
+        huePubSub.publish('get.current.app.name');
+      };
+
+      ko.components.register('hue-dw-sidebar', {
+        viewModel: {
+          createViewModel: function (params, componentInfo) {
+            return new DwSidebar(params, componentInfo.element);
+          }
+        },
+        template: { element: 'hue-dw-sidebar-template' }
+      });
+    })();
+  </script>
+</%def>

Някои файлове не бяха показани, защото твърде много файлове са промени