Răsfoiți Sursa

HUE-7743 [frontend] Isolate the Hue sidebar styles

Johan Ahlen 8 ani în urmă
părinte
comite
094640a

Fișier diff suprimat deoarece este prea mare
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue-embedded.css


Fișier diff suprimat deoarece este prea mare
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


+ 36 - 16
desktop/core/src/desktop/static/desktop/less/cui/sidebar.less → desktop/core/src/desktop/static/desktop/less/components/hue-sidebar.less

@@ -16,7 +16,7 @@
  limitations under the License.
 */
 
-@import (reference) "extra-variables.less";
+@import (reference) "../cui/extra-variables.less";
 @import (reference) "../hue-mixins.less";
 
 @sidebar-width: 200px;
@@ -27,7 +27,7 @@
 @sidebar-left-spacing-item: 30px;
 @sidebar-background-color: @cui-gray-050;
 
-.sidebar {
+.hue-sidebar {
   position: fixed;
   top: @navbar-height;
   left: 0;
@@ -39,13 +39,13 @@
   overflow: hidden;
   box-shadow: 0 1px 2px 0;
 
-  &.sidebar-below-top-bar {
+  &.hue-sidebar-below-top-bar {
     position: absolute;
     top: 0;
     padding-top: 10px;
   }
 
-  .sidebar-content {
+  .hue-sidebar-content {
     top: 24px;
     bottom: 50px;
     position: absolute;
@@ -53,7 +53,7 @@
     min-width: @sidebar-width;
   }
 
-  .sidebar-item {
+  .hue-sidebar-item {
     display: block;
     padding-left: @sidebar-left-spacing-item;
     line-height: 38px;
@@ -62,7 +62,7 @@
 
     .hue-ease-transition(~"background-color, color");
 
-    .sidebar-icon {
+    .hue-sidebar-icon {
       color: @cui-gray-600;
       display: inline-block;
       margin-right: 14px;
@@ -72,7 +72,7 @@
     }
   }
 
-  .sidebar-item.active {
+  .hue-sidebar-item.active {
     font-weight: bold;
     color: @cui-blue-500;
     background-color: @cui-gray-100;
@@ -82,7 +82,7 @@
     }
   }
 
-  .sidebar-item:hover {
+  .hue-sidebar-item:hover {
     color: @cui-blue-500;
     background-color: @cui-gray-100;
     .sidebar-icon {
@@ -90,14 +90,14 @@
     }
   }
 
-  .sidebar-category-item {
+  .hue-sidebar-category-item {
     margin: 20px 0 4px @sidebar-left-spacing;
     font-size: @sidebar-category-font-size * 1.2;
     color: @cui-blue-700;
     transition: opacity @sidebar-animation-duration;
   }
 
-  .sidebar-action-button {
+  .hue-sidebar-action-button {
     background-color: inherit;
     display: block;
     position: absolute;
@@ -116,12 +116,12 @@
     }
   }
 
-  .sidebar-item-name {
+  .hue-sidebar-item-name {
     transition: opacity @sidebar-animation-duration;
     opacity: 1;
   }
 
-  .sidebar-footer-panel {
+  .hue-sidebar-footer-panel {
     background-color: inherit;
     position: absolute;
     bottom: 0;
@@ -130,23 +130,43 @@
     width: 100%;
     color: @text-color;
     box-shadow: 0 0 2px 0;
+
+    .dropzone {
+      padding-top: 15px;
+      padding-bottom: 15px;
+      text-align: center;
+      i {
+        .hue-ease-transition(color);
+      }
+    }
+
+    .dz-drag-hover, .dropzone:hover {
+      background-color: @cui-gray-200!important;
+      i {
+        color: @cui-blue-500;
+      }
+    }
+
+    a {
+      .pointer
+    }
   }
 }
 
-.sidebar.collapsed {
+.hue-sidebar.collapsed {
   width: @collapsed-sidebar-width;
 
-  .sidebar-category-item, .sidebar-item-name {
+  .hue-sidebar-category-item, .sidebar-item-name {
     opacity: 0;
   }
 
-  .sidebar-action-button {
+  .hue-sidebar-action-button {
     text-align: center;
     padding: 0;
   }
 }
 
-.sidebar-placeholder {
+.hue-sidebar-placeholder {
   transition: width @sidebar-animation-duration;
   width: @sidebar-width;
   height: 100%;

+ 1 - 1
desktop/core/src/desktop/static/desktop/less/hue.less

@@ -18,12 +18,12 @@
 @import (reference) "cui/colors.less";
 @import (reference) "hue-mixins.less";
 
-@import "cui/sidebar";
 @import "hue-assist";
 @import "hue-autocomplete";
 @import "hue-cui-overrides.less";
 @import "hue-cross-version.less";
 
+@import "components/hue-sidebar.less";
 @import "components/hue-hamburger.less";
 @import "hue4.less";
 

+ 0 - 22
desktop/core/src/desktop/static/desktop/less/hue4.less

@@ -382,28 +382,6 @@
   }
 }
 
-.sidebar {
-  .sidebar-footer-panel {
-    .dropzone {
-      padding-top: 15px;
-      padding-bottom: 15px;
-      text-align: center;
-      i {
-        .hue-ease-transition(color);
-      }
-    }
-    .dz-drag-hover, .dropzone:hover {
-      background-color: @cui-gray-200!important;
-      i {
-        color: @cui-blue-500;
-      }
-    }
-  }
-  a {
-    .pointer
-  }
-}
-
 .inactive-action,
 .inactive-action a {
   color: @cui-gray-600;

+ 7 - 7
desktop/core/src/desktop/templates/hue.mako

@@ -303,16 +303,16 @@ ${ hueIcons.symbols() }
   <div class="content-wrapper">
 
     <script type="text/html" id="tmpl-sidebar-link">
-      <a role="button" class="sidebar-item" data-bind="hueLink: item.url, attr: { title: item.displayName }">
-        <span class="sidebar-item-name" data-bind="text: item.displayName"></span>
+      <a role="button" class="hue-sidebar-item" data-bind="hueLink: item.url, attr: { title: item.displayName }">
+        <span class="hue-sidebar-item-name" data-bind="text: item.displayName"></span>
       </a>
     </script>
 
-    <div class="sidebar sidebar-below-top-bar" data-bind="visible: leftNavVisible" style="display:none;">
-      <div class="sidebar-content">
+    <div class="hue-sidebar hue-sidebar-below-top-bar" data-bind="visible: leftNavVisible" style="display:none;">
+      <div class="hue-sidebar-content">
         <!-- ko foreach: {data: items, as: 'item'} -->
           <!-- ko if: item.isCategory -->
-             <h4 class="sidebar-category-item" data-bind="text: item.displayName"></h4>
+             <h4 class="hue-sidebar-category-item" data-bind="text: item.displayName"></h4>
              <!-- ko template: {name: 'tmpl-sidebar-link', foreach: item.children, as: 'item'} --><!-- /ko -->
           <!-- /ko -->
           <!-- ko ifnot: item.isCategory -->
@@ -320,7 +320,7 @@ ${ hueIcons.symbols() }
           <!-- /ko -->
         <!-- /ko -->
       </div>
-      <div class="sidebar-footer-panel">
+      <div class="hue-sidebar-footer-panel">
         <div data-bind="dropzone: {
             clickable: false,
             url: '/filebrowser/upload/file?dest=' + DROPZONE_HOME_DIR,
@@ -1580,7 +1580,7 @@ ${ smart_unicode(login_modal(request).content) | n,unicode }
       }
 
       var sidebarViewModel = new SideBarViewModel(onePageViewModel, topNavViewModel);
-      ko.applyBindings(sidebarViewModel, $('.sidebar')[0]);
+      ko.applyBindings(sidebarViewModel, $('.hue-sidebar')[0]);
     })(onePageViewModel, topNavViewModel);
 
     huePubSub.publish('cluster.config.get.config');

Unele fișiere nu au fost afișate deoarece prea multe fișiere au fost modificate în acest diff