Merge pull request #6566 from abpframework/feat/volo-4176

Enhancements for the TreeComponent

npm/ng-packs/packages/components/package.json

@@ -8,6 +8,7 @@
   },
   "peerDependencies": {
     "@abp/ng.core": ">=4.0.0",
+    "@abp/ng.theme.shared": ">=4.0.0",
     "@ng-bootstrap/ng-bootstrap": ">=6.0.0"
   },
   "dependencies": {

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html

@@ -7,10 +7,12 @@
   [nzData]="nodes"
   [nzTreeTemplate]="treeTemplate"
   [nzExpandedKeys]="expandedKeys"
-  [nzExpandedIcon]="expandedIconTemplate?.template"
+  [nzExpandedIcon]="expandedIconTemplate?.template || defaultIconTemplate"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
   (nzOnDrop)="onDrop($event)"
+  [nzNoAnimation]="noAnimation"
+  (nzContextMenu)="dropdowns[$event.node?.key]?.toggle()"
 ></nz-tree>
 <ng-template #treeTemplate let-node>
   <div
@@ -19,22 +21,76 @@
     [title]="node.title"
     (click)="onSelectedNodeChange(node)"
   >
-    <ng-container
-      *ngTemplateOutlet="
-        customNodeTemplate?.template || defaultNodeTemplate;
-        context: { $implicit: node }
-      "
-    ></ng-container>
+    <ng-container *ngTemplateOutlet="nodeTemplate; context: { $implicit: node }"></ng-container>
 
-    <ng-template #defaultNodeTemplate>
-      <span>{{ node.title }}</span>
-    </ng-template>
+    <ng-template #nodeTemplate let-node>
+      <div class="d-inline-block">
+        <ng-container
+          *ngTemplateOutlet="
+            customNodeTemplate ? customNodeTemplate?.template : defaultNodeTemplate;
+            context: { $implicit: node }
+          "
+        ></ng-container>
+      </div>
 
-    <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
-      <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
-      <div ngbDropdownMenu>
-        <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+      <div
+        #dropdown="ngbDropdown"
+        *ngIf="menu"
+        class="d-inline-block ml-1"
+        ngbDropdown
+        placement="bottom"
+        container="body"
+        (abpInit)="initDropdown(node.key, dropdown)"
+      >
+        <i
+          class="fas fa-caret-down text-muted"
+          ngbDropdownToggle
+          [class.dropdown-toggle]="false"
+        ></i>
+        <div ngbDropdownMenu>
+          <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+        </div>
       </div>
-    </div>
+    </ng-template>
+
+    <ng-template #defaultNodeTemplate let-node>
+      <span>{{ node.title }}</span>
+    </ng-template>
   </div>
 </ng-template>
+
+<ng-template #defaultIconTemplate let-node let-origin="origin">
+  <i style="line-height: 28px" aria-hidden="true">
+    <ng-container *ngTemplateOutlet="node.isExpanded ? minusIcon : plusIcon"></ng-container
+  ></i>
+</ng-template>
+
+<ng-template #minusIcon>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm-6.5 10h13v1h-13v-1z"
+    />
+  </svg>
+</ng-template>
+
+<ng-template #plusIcon>
+  <svg
+    width="15"
+    height="15"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+  >
+    <path
+      d="M11.5 0c6.347 0 11.5 5.153 11.5 11.5s-5.153 11.5-11.5 11.5-11.5-5.153-11.5-11.5 5.153-11.5 11.5-11.5zm0 1c5.795 0 10.5 4.705 10.5 10.5s-4.705 10.5-10.5 10.5-10.5-4.705-10.5-10.5 4.705-10.5 10.5-10.5zm.5 10h6v1h-6v6h-1v-6h-6v-1h6v-6h1v6z"
+    />
+  </svg>
+</ng-template>

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.scss

@@ -27,18 +27,6 @@
     cursor: pointer;
     padding-left: 8px;
     border: 1px solid transparent;
-
-    &:hover {
-      background-color: transparent;
-      border: 1px solid var(--primary);
-      color: var(--text-color);
-    }
-
-    &.selected {
-      background-color: transparent;
-      color: var(--white);
-      background-color: var(--primary);
-    }
   }
 
   .ellipsis {

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@@ -11,6 +11,7 @@ import { NzFormatEmitEvent, NzFormatBeforeDropEvent } from 'ng-zorro-antd/tree';
 import { of } from 'rxjs';
 import { TreeNodeTemplateDirective } from '../templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from '../templates/expanded-icon-template.directive';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
 export type DropEvent = NzFormatEmitEvent & { pos: number };
 
@@ -26,6 +27,8 @@ export type DropEvent = NzFormatEmitEvent & { pos: number };
 export class TreeComponent {
   dropPosition: number;
 
+  dropdowns = {} as { [key: string]: NgbDropdown };
+
   @ContentChild('menu') menu: TemplateRef<any>;
   @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
   @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
@@ -33,6 +36,7 @@ export class TreeComponent {
   @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
   @Output() readonly selectedNodeChange = new EventEmitter();
   @Output() readonly dropOver = new EventEmitter<DropEvent>();
+  @Input() noAnimation = true;
   @Input() draggable: boolean;
   @Input() checkable: boolean;
   @Input() checkStrictly: boolean;
@@ -68,4 +72,8 @@ export class TreeComponent {
 
     this.dropOver.emit(event);
   }
+
+  initDropdown(key: string, dropdown: NgbDropdown) {
+    this.dropdowns[key] = dropdown;
+  }
 }

npm/ng-packs/packages/components/tree/src/lib/tree.module.ts

@@ -1,17 +1,18 @@
-import { CommonModule } from '@angular/common';
+import { CoreModule } from '@abp/ng.core';
 import { NgModule } from '@angular/core';
 import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation';
 import { NzTreeModule } from 'ng-zorro-antd/tree';
 import { TreeComponent } from './components/tree.component';
-import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
 import { ExpandedIconTemplateDirective } from './templates/expanded-icon-template.directive';
+import { TreeNodeTemplateDirective } from './templates/tree-node-template.directive';
 
 const templates = [TreeNodeTemplateDirective, ExpandedIconTemplateDirective];
 
 const exported = [...templates, TreeComponent];
 
 @NgModule({
-  imports: [CommonModule, NzTreeModule, NgbDropdownModule],
+  imports: [CoreModule, NzTreeModule, NgbDropdownModule, NzNoAnimationModule],
   exports: [...exported],
   declarations: [...exported],
 })