浏览代码

HUE-6077 [frontend] Improve the styling of the sidebar

Johan Ahlen 8 年之前
父节点
当前提交
bfb92fe

文件差异内容过多而无法显示
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 25 - 14
desktop/core/src/desktop/static/desktop/less/cui/sidebar.less

@@ -1,29 +1,30 @@
 
 
 @import (reference) "extra-variables.less";
+@import (reference) "../hue-mixins.less";
 
-@sidebar-width: 180px;
+@sidebar-width: 200px;
 @collapsed-sidebar-width: 48px;
 @sidebar-animation-duration: 250ms;
 @sidebar-category-font-size: 13px;
 @sidebar-left-spacing: 16px;
+@sidebar-background-color: @cui-gray-050;
 
 .sidebar {
   position: fixed;
   top: @navbar-height;
   left: 0;
   bottom: 0;
-  background-color: @cui-gray-050;
+  background-color: @sidebar-background-color;
   width: @sidebar-width;
   transition: width @sidebar-animation-duration;
   z-index: 1000;
   overflow: hidden;
   box-shadow: 0 1px 2px 0;
 
-
-  .fa:before {
-    font-size: 16px;
-    color: @cui-gray-600;
+  &.sidebar-below-top-bar {
+    top: 0;
+    padding-top: 10px;
   }
 
   .sidebar-content {
@@ -37,19 +38,26 @@
   .sidebar-item {
     display: block;
     padding-left: @sidebar-left-spacing;
-    line-height: 36px;
+    line-height: 38px;
     color: @text-color;
+    background-color: @sidebar-background-color;
 
-    .fa {
+    .hue-ease-transition(~"background-color, color");
+
+    .sidebar-icon {
+      color: @cui-gray-600;
+      display: inline-block;
       margin-right: 14px;
       width: 18px;
       text-align: center;
+      .hue-ease-transition(color);
     }
   }
 
   .sidebar-item.active {
     font-weight: bold;
-    background: @cui-gray-100;
+    color: @cui-blue-500;
+    background-color: @cui-gray-100;
 
     .fa:before {
       color: @cui-blue-500;
@@ -57,14 +65,17 @@
   }
 
   .sidebar-item:hover {
-    background: @cui-gray-100;
+    color: @cui-blue-500;
+    background-color: @cui-gray-100;
+    .sidebar-icon {
+      color: @cui-blue-500;
+    }
   }
 
   .sidebar-category-item {
     margin: 20px 0 4px @sidebar-left-spacing;
-    font-size: @sidebar-category-font-size;
-    font-weight: bold;
-    color: @cui-gray-600;
+    font-size: @sidebar-category-font-size * 1.2;
+    color: @cui-blue-700;
     transition: opacity @sidebar-animation-duration;
   }
 
@@ -80,7 +91,7 @@
     text-align: right;
     padding-right: 16px;
     color: @text-color;
-    box-shadow: 0 0px 2px 0;
+    box-shadow: 0 0 2px 0;
 
     &:hover {
       background: @cui-gray-100;

+ 14 - 11
desktop/core/src/desktop/templates/hue.mako

@@ -201,12 +201,12 @@ ${ hueIcons.symbols() }
 
     <script type="text/html" id="tmpl-sidebar-link">
       <a role="button" class="sidebar-item" data-bind="hueLink: item.url, attr: { title: item.displayName }">
-        <!-- ko if: item.icon --><i class="fa" data-bind="css: item.icon"></i><!-- /ko -->
+        <!-- ko if: item.icon --><div class="sidebar-icon"><!-- ko template: { name: 'app-icon-template' } --><!-- /ko --></div><!-- /ko -->
         <span class="sidebar-item-name" data-bind="text: item.displayName"></span>
       </a>
     </script>
 
-    <div class="sidebar" data-bind="visible: leftNavVisible" style="display:none;">
+    <div class="sidebar sidebar-below-top-bar" data-bind="visible: leftNavVisible" style="display:none;">
       <div class="sidebar-content">
         <!-- ko foreach: {data: items, as: 'item'} -->
           <!-- ko if: item.isCategory -->
@@ -1112,11 +1112,6 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
         huePubSub.subscribe('cluster.config.set.config', function (clusterConfig) {
           var items = [];
 
-          items.push({
-            displayName: '${ _('Documents') }',
-            url: '/home'
-          });
-
           if (clusterConfig && clusterConfig['app_config']) {
             var appsItems = [];
             var appConfig = clusterConfig['app_config'];
@@ -1124,7 +1119,8 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
               if (appConfig[appName]) {
                 appsItems.push({
                   displayName: appConfig[appName]['displayName'],
-                  url: appConfig[appName]['page']
+                  url: appConfig[appName]['page'],
+                  icon: appName
                 });
               }
             });
@@ -1137,18 +1133,25 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
             }
 
             var browserItems = [];
+            browserItems.push({
+              displayName: '${ _('Documents') }',
+              url: '/home',
+              icon: 'documents'
+            });
             if (appConfig['browser'] && appConfig['browser']['interpreters']) {
               appConfig['browser']['interpreters'].forEach(function(browser) {
+                console.log(browser.type);
                 browserItems.push({
-                  displayName: browser['displayName'],
-                  url: browser['page']
+                  displayName: browser.displayName,
+                  url: browser.page,
+                  icon: browser.type
                 });
               });
             }
             if (browserItems.length > 0) {
               items.push({
                 isCategory: true,
-                displayName: '${ _('Browsers') }',
+                displayName: '${ _('Browse') }',
                 children: browserItems
               })
             }

文件差异内容过多而无法显示
+ 1 - 0
desktop/core/src/desktop/templates/hue_icons.mako


部分文件因为文件数量过多而无法显示