style: improve tree node dropdown

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

@@ -7,7 +7,6 @@
   [nzData]="nodes"
   [nzTreeTemplate]="treeTemplate"
   [nzExpandedKeys]="expandedKeys"
-  [nzExpandedIcon]="expandedIconTemplate?.template"
   [nzExpandedIcon]="expandedIconTemplate?.template || defaultIconTemplate"
   (nzExpandChange)="onExpandedKeysChange($event)"
   (nzCheckBoxChange)="onCheckboxChange($event)"
@@ -33,12 +32,26 @@
         ></ng-container>
       </div>
 
-    <div *ngIf="menu" class="ellipsis" ngbDropdown placement="bottom" container="body">
+      <div
-      <i class="fas fa-ellipsis-h" ngbDropdownToggle [class.dropdown-toggle]="false"></i>
+        #dropdown="ngbDropdown"
-      <div ngbDropdownMenu>
+        *ngIf="menu"
-        <ng-template *ngTemplateOutlet="menu; context: { $implicit: node }"></ng-template>
+        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>

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;
@@ -69,4 +72,8 @@ export class TreeComponent {
 
     this.dropOver.emit(event);
   }
+
+  initDropdown(key: string, dropdown: NgbDropdown) {
+    this.dropdowns[key] = dropdown;
+  }
 }