Jelajahi Sumber

HUE-9114 [frontend] Improve left sidebar hover logic

Johan Ahlen 5 tahun lalu
induk
melakukan
cee94d9c35

+ 24 - 20
desktop/core/src/desktop/js/ko/components/ko.sidebar.js

@@ -39,27 +39,29 @@ const TEMPLATE = `
   </script>
 
   <script type="text/html" id="sidebar-sub-menu">
-    <div class="sidebar-menu" data-bind="css: { 'open' : open() || hoverOpen() }, event: { mouseenter: mouseEnter, mouseleave: mouseLeave }">
-      <div class="menu">
-        <ul class="sidebar-nav-list" data-bind="foreach: children">
-          <li data-bind="css: { 'divider': isDivider }">
-            <!-- ko if: isDivider -->
-              &nbsp;
-            <!-- /ko -->
-            <!-- ko ifnot: isDivider -->
-              <!-- ko if: children && children.length -->
-                <a href="javascript:void(0);" data-bind="toggle: open, text: displayName"></a>
-                <!-- ko template: { name: 'sidebar-sub-menu' } --><!-- /ko -->
-              <!-- /ko -->
-              <!-- ko if: !children && url -->
-                <a href="javascript:void(0);" data-bind="hueLink: url, text: displayName"></a>
+    <div class="sidebar-menu" data-bind="css: { 'open' : open() || hoverOpen() }, event: { mouseenter: mouseEnter  }">
+      <div class="inner">
+        <div class="menu">
+          <ul class="sidebar-nav-list" data-bind="foreach: children">
+            <li data-bind="css: { 'divider': isDivider }">
+              <!-- ko if: isDivider -->
+                &nbsp;
               <!-- /ko -->
-              <!-- ko if: !children && href -->
-                <a href="javascript:void(0);" target="_blank" data-bind="attr: { 'href': href }, text: displayName"></a>
+              <!-- ko ifnot: isDivider -->
+                <!-- ko if: children && children.length -->
+                  <a href="javascript:void(0);" data-bind="toggle: open, text: displayName"></a>
+                  <!-- ko template: { name: 'sidebar-sub-menu' } --><!-- /ko -->
+                <!-- /ko -->
+                <!-- ko if: !children && url -->
+                  <a href="javascript:void(0);" data-bind="hueLink: url, text: displayName"></a>
+                <!-- /ko -->
+                <!-- ko if: !children && href -->
+                  <a href="javascript:void(0);" target="_blank" data-bind="attr: { 'href': href }, text: displayName"></a>
+                <!-- /ko -->
               <!-- /ko -->
-            <!-- /ko -->
-          </li>
-        </ul>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </script>
@@ -197,6 +199,7 @@ const trackCloseOnClick = (observable, id) => {
 
 class SidebarItem {
   constructor(options) {
+    this.id = Math.random();
     this.isCategory = !!options.isCategory;
     this.displayName = options.displayName;
     this.isDivider = !!options.isDivider;
@@ -233,15 +236,16 @@ class SidebarItem {
   }
 
   mouseEnter() {
-    window.clearTimeout(this.hoverdelay);
     if (this.open()) {
       return;
     }
     huePubSub.publish(CLOSE_ON_NEW_HOVER_EVENT, this);
+    window.clearTimeout(this.hoverdelay);
     this.hoverOpen(true);
   }
 
   mouseLeave() {
+    window.clearTimeout(this.hoverdelay);
     this.hoverdelay = window.setTimeout(() => {
       this.hoverOpen(false);
     }, 400);

File diff ditekan karena terlalu besar
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue.css


File diff ditekan karena terlalu besar
+ 0 - 0
desktop/core/src/desktop/static/desktop/css/hue3-extra.css


+ 15 - 11
desktop/core/src/desktop/static/desktop/less/components/hue-sidebar.less

@@ -384,27 +384,31 @@
   }
 
   &:not(.collapsed) .sidebar-menu {
-    left: @sidebar-width + 8px;
+    left: @sidebar-width;
   }
 
   &.collapsed .sidebar-menu {
-    left: @sidebar-collapsed-width + 8px;
+    left: @sidebar-collapsed-width;
   }
 
   .sidebar-menu {
     z-index: 1011;
     position: absolute;
     display: none;
-    background-color: @cui-gray-800;
-    color: @cui-white;
-    font-size: 14px;
-    border-radius: 3px;
-    box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px 0;
-    white-space: nowrap;
-    padding: 4px 8px;
-    height: auto;
-    transition: none;
     margin-top: -40px;
+    height: auto;
+    padding-left: 8px;
+
+    .inner {
+      background-color: @cui-gray-800;
+      color: @cui-white;
+      font-size: 14px;
+      border-radius: 3px;
+      box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px 0;
+      white-space: nowrap;
+      padding: 4px 8px;
+      transition: none;
+    }
 
     &.user-menu {
       margin-top: 0;

Beberapa file tidak ditampilkan karena terlalu banyak file yang berubah dalam diff ini