Browse Source

HUE-8706 [frontend] Change the left nav design in DW mode

Johan Ahlen 6 years ago
parent
commit
ab56d8d

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


+ 37 - 19
desktop/core/src/desktop/static/desktop/less/components/hue-dw-sidebar.less

@@ -15,16 +15,16 @@
  See the License for the specific language governing permissions and
  See the License for the specific language governing permissions and
  limitations under the License.
  limitations under the License.
 */
 */
-@sidebar-width: 180px;
+@sidebar-width: 250px;
 @collapsed-sidebar-width: 48px;
 @collapsed-sidebar-width: 48px;
 @sidebar-animation-duration: 250ms;
 @sidebar-animation-duration: 250ms;
-@sidebar-category-font-size: 13px;
-@sidebar-left-spacing: 16px;
+@sidebar-category-font-size: 16px;
+@sidebar-left-spacing: 10px;
 
 
 .hue-dw-sidebar-container {
 .hue-dw-sidebar-container {
   position: relative;
   position: relative;
   .flex(0 0);
   .flex(0 0);
-  .flex-basis(@sidebar-width);
+  .flex-basis(250px);
   transition: flex-basis @sidebar-animation-duration;
   transition: flex-basis @sidebar-animation-duration;
 
 
   .sidebar {
   .sidebar {
@@ -34,12 +34,12 @@
     bottom: 0;
     bottom: 0;
     right: 3px;
     right: 3px;
     overflow: hidden;
     overflow: hidden;
-    background-color: @cui-white;
+    background-color: #323543;
     box-shadow: 0 0 3px 0 @cui-gray-600;
     box-shadow: 0 0 3px 0 @cui-gray-600;
 
 
     .fa:before {
     .fa:before {
       font-size: 16px;
       font-size: 16px;
-      color: @text-color;
+      color: #B8BEC4;
     }
     }
 
 
     .sidebar-content {
     .sidebar-content {
@@ -54,12 +54,18 @@
     .sidebar-item {
     .sidebar-item {
       display: block;
       display: block;
       line-height: 36px;
       line-height: 36px;
-      color: @text-color;
+      color: #B8BEC4;
       white-space: nowrap;
       white-space: nowrap;
+      font-size: 16px;
+
+      .sidebar-caret {
+        opacity: 0;
+        float:left;
+      }
 
 
       .sidebar-icon {
       .sidebar-icon {
         float: left;
         float: left;
-        padding: 0 14px 0 @sidebar-left-spacing;
+        padding: 0 16px 0 14px;
         &.with-tooltip {
         &.with-tooltip {
           display: none;
           display: none;
         }
         }
@@ -75,28 +81,35 @@
     }
     }
 
 
     .sidebar-item.active {
     .sidebar-item.active {
-      background: @cui-blue-050;
-      color: @cui-blue-500;
+      background: #2d2f3b;
+      color: #5eab41;
+
+      .sidebar-caret {
+        opacity: 1;
+      }
 
 
       .fa:before {
       .fa:before {
-        color: @cui-blue-500;
+        color: #5eab41;
       }
       }
     }
     }
 
 
-    .sidebar-item:hover {
-      color: @cui-blue-500;
+    .sidebar-item:not(.active):hover {
+      background-color: #404350;
+      color: @cui-white;
       .fa:before {
       .fa:before {
-        color: @cui-blue-500;
+        background-color: #404350;
+        color: @cui-white;
       }
       }
     }
     }
 
 
     .sidebar-item:active {
     .sidebar-item:active {
-      background: @cui-blue-050;
+      background: #2d2f3b;
+      color: #5eab41;
     }
     }
 
 
     .sidebar-category-item {
     .sidebar-category-item {
       margin: 20px 0 4px @sidebar-left-spacing;
       margin: 20px 0 4px @sidebar-left-spacing;
-      font-size: @sidebar-category-font-size;
+      font-size: 16px;
       font-weight: bold;
       font-weight: bold;
       color: @cui-gray-600;
       color: @cui-gray-600;
       transition: opacity @sidebar-animation-duration;
       transition: opacity @sidebar-animation-duration;
@@ -114,7 +127,7 @@
       line-height: 36px;
       line-height: 36px;
       width: 100%;
       width: 100%;
       text-align: right;
       text-align: right;
-      color: @text-color;
+      color: #B8BEC4;
       box-shadow: 0 0 3px 0 @cui-gray-600;
       box-shadow: 0 0 3px 0 @cui-gray-600;
 
 
       span {
       span {
@@ -122,7 +135,12 @@
       }
       }
 
 
       &:hover {
       &:hover {
-        background: @cui-gray-100;
+        background-color: #404350;
+        color: @cui-white;
+        .fa:before {
+          background-color: #404350;
+          color: @cui-white;
+        }
       }
       }
     }
     }
 
 
@@ -135,7 +153,7 @@
 
 
 
 
   &.collapsed {
   &.collapsed {
-    .flex-basis(@collapsed-sidebar-width);
+    .flex-basis(50px);
 
 
     .sidebar {
     .sidebar {
       .sidebar-category-item,
       .sidebar-category-item,

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

@@ -32,12 +32,18 @@
         <!-- ko foreach: children -->
         <!-- ko foreach: children -->
         <!-- ko if: $component.collapsed -->
         <!-- 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' }, click: function() { if (url.startsWith('/jobbrowser')) { huePubSub.publish('context.selector.set.cluster', 'AltusV2'); } }">
         <a role="button" class="sidebar-item" data-bind="hueLink: url, attr: { title: displayName }, css: { 'active': url === $component.activeUrl() }, tooltip: { placement: 'right' }, click: function() { if (url.startsWith('/jobbrowser')) { huePubSub.publish('context.selector.set.cluster', 'AltusV2'); } }">
+          <!-- ko ifnot: $component.collapsed -->
+          <span class="sidebar-caret"><i class="fa fa-caret-right"></i></span>
+          <!-- /ko -->
           <span class="sidebar-icon with-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span>
           <span class="sidebar-icon with-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span>
           <span class="sidebar-item-name" data-bind="text: displayName"></span>
           <span class="sidebar-item-name" data-bind="text: displayName"></span>
         </a>
         </a>
         <!-- /ko -->
         <!-- /ko -->
         <!-- ko ifnot: $component.collapsed -->
         <!-- ko ifnot: $component.collapsed -->
         <a role="button" class="sidebar-item" data-bind="hueLink: url, attr: { title: displayName }, css: { 'active': url === $component.activeUrl() }, click: function() { if (url.startsWith('/jobbrowser')) { huePubSub.publish('context.selector.set.cluster', 'AltusV2'); } }">
         <a role="button" class="sidebar-item" data-bind="hueLink: url, attr: { title: displayName }, css: { 'active': url === $component.activeUrl() }, click: function() { if (url.startsWith('/jobbrowser')) { huePubSub.publish('context.selector.set.cluster', 'AltusV2'); } }">
+          <!-- ko ifnot: $component.collapsed -->
+          <span class="sidebar-caret"><i class="fa fa-caret-right"></i></span>
+          <!-- /ko -->
           <span class="sidebar-icon without-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span>
           <span class="sidebar-icon without-tooltip"><!-- ko template: { name: 'app-icon-template' } --><!--/ko--></span>
           <span class="sidebar-item-name" data-bind="text: displayName"></span>
           <span class="sidebar-item-name" data-bind="text: displayName"></span>
         </a>
         </a>

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