perf: change favorite folder

Author: ibuler

src/app/elements/asset-tree/asset-tree.component.html

@@ -65,14 +65,36 @@
 >
   <table>
     <tbody>
-      <tr *ngFor="let menu of rMenuList; let i = index" class="view-menu__item">
+      <tr
+        *ngFor="let menu of rMenuList; let i = index"
+        [class.view-menu__item--has-submenu]="menu.children?.length"
+        [ngStyle]="{ display: menu.hide ? 'none' : '' }"
+        class="view-menu__item"
+      >
         <td
-          (click)="handleMenuClick(menu)"
+          (click)="!menu.children?.length && handleMenuClick(menu, $event)"
           [attr.data-num]="i"
-          [ngStyle]="{ display: menu.hide ? 'none' : '', opacity: menu.disabled ? 0.4 : 1 }"
+          [ngStyle]="{ opacity: menu.disabled ? 0.4 : 1 }"
           class="view-menu__data"
         >
-          <span [ngClass]="menu.fa" class="view-menu__icon fa"></span> {{ menu.name | translate }}
+          <span [ngClass]="menu.fa" class="view-menu__icon fa"></span>
+          <span class="view-menu__label">{{ menu.name | translate }}</span>
+          <i *ngIf="menu.children?.length" class="fa fa-angle-right view-menu__submenu-arrow"></i>
+          <div *ngIf="menu.children?.length" class="view-menu__submenu">
+            <table>
+              <tbody>
+                <tr *ngFor="let child of menu.children" class="view-menu__item">
+                  <td
+                    (click)="handleSubmenuClick($event, child)"
+                    class="view-menu__data view-menu__submenu-data"
+                  >
+                    <span class="view-menu__submenu-label">{{ child.name }}</span>
+                    <i *ngIf="child.checked" class="fa fa-check view-menu__submenu-check"></i>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
         </td>
       </tr>
     </tbody>

src/app/elements/asset-tree/asset-tree.component.scss

@@ -286,9 +286,64 @@ tr:hover {
 }
 
 .view-menu__data {
+  position: relative;
   padding: 0 6px;
 }
 
+.view-menu__label {
+  flex: 1;
+}
+
+.view-menu__submenu-arrow {
+  margin-left: 12px;
+  font-size: 12px;
+  opacity: 0.6;
+}
+
+.view-menu__item--has-submenu {
+  .view-menu__data {
+    display: flex;
+    align-items: center;
+    padding-right: 10px;
+  }
+
+  &:hover > .view-menu__data > .view-menu__submenu {
+    display: block;
+  }
+}
+
+.view-menu__submenu {
+  display: none;
+  position: absolute;
+  top: -6px;
+  left: 100%;
+  margin: 0;
+  padding: 6px 0;
+  min-width: 120px;
+  border-radius: 2px;
+  background-color: var(--el-dropdown-bg-color);
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
+  z-index: 1001;
+
+  .view-menu__submenu-data {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-width: 140px;
+    padding-right: 10px;
+  }
+
+  .view-menu__submenu-label {
+    flex: 1;
+    padding-right: 8px;
+  }
+
+  .view-menu__submenu-check {
+    font-size: 12px;
+    color: #52c41a;
+  }
+}
+
 .open-tree {
   flex: 1;
 }