From c0d1d1adc012daaa6b103bd6668616e15df0149a Mon Sep 17 00:00:00 2001
From: mehmet-erim <bilgi@mehmeterim.com>
Date: Wed, 9 Dec 2020 10:06:51 +0300
Subject: [PATCH] style: improve tree node dropdown

---
 .../src/lib/components/tree.component.html    | 25 ++++++++++++++-----
 .../tree/src/lib/components/tree.component.ts |  7 ++++++
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
index 182d4a1ff9..cf2619b19a 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.html
+++ b/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">
-      <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>
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index e4fda04736..3f6179a5b2 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/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;
+  }
 }