Skip to content

Commit ae75381

Browse files
Cody ToleneGeorgii Rychko
Cody Tolene
authored and
Georgii Rychko
committed
fix(custom-menu): close menu when custom menu item gets clicked (#218)
1 parent 88727c4 commit ae75381

File tree

2 files changed

+177
-137
lines changed

2 files changed

+177
-137
lines changed

‎src/demo/app/app.component.ts

+171-137
Original file line numberDiff line numberDiff line change
@@ -9,165 +9,183 @@ declare const alertify: any;
99
selector: 'app',
1010
template: `
1111
<div class="tree-demo-app">
12-
<div class="tree-container">
13-
<div class="tree-info"><p class="tree-title">Fonts tree</p></div>
14-
<div class="tree-content">
15-
<tree #treeFonts
16-
[tree]="fonts"
17-
[settings]="{rootIsVisible: false}"
18-
(menuItemSelected)="onMenuItemSelected($event)"
19-
(nodeRemoved)="onNodeRemoved($event)"
20-
(nodeRenamed)="onNodeRenamed($event)"
21-
(nodeSelected)="onNodeSelected($event)"
22-
(nodeMoved)="onNodeMoved($event)"
23-
(nodeCreated)="onNodeCreated($event)"
24-
(nodeExpanded)="onNodeExpanded($event)"
25-
(nodeCollapsed)="onNodeCollapsed($event)">
26-
</tree>
12+
<div class="tree-container">
13+
<div class="tree-info">
14+
<p class="tree-title">Fonts tree</p>
15+
</div>
16+
<div class="tree-content">
17+
<tree #treeFonts
18+
[tree]="fonts"
19+
[settings]="{rootIsVisible: false}"
20+
(menuItemSelected)="onMenuItemSelected($event)"
21+
(nodeRemoved)="onNodeRemoved($event)"
22+
(nodeRenamed)="onNodeRenamed($event)"
23+
(nodeSelected)="onNodeSelected($event)"
24+
(nodeMoved)="onNodeMoved($event)"
25+
(nodeCreated)="onNodeCreated($event)"
26+
(nodeExpanded)="onNodeExpanded($event)"
27+
(nodeCollapsed)="onNodeCollapsed($event)">
28+
</tree>
29+
</div>
2730
</div>
28-
</div>
29-
<div class="tree-container">
30-
<div class="tree-info"><p class="tree-title">Programming languages tree</p>
31-
<p class="notice">this tree is loaded asynchronously</p></div>
32-
<div class="tree-content">
33-
<tree
34-
[tree]="pls"
35-
[settings]="disabledCheckboxesSettings"
36-
(nodeRemoved)="onNodeRemoved($event)"
37-
(nodeRenamed)="onNodeRenamed($event)"
38-
(nodeSelected)="onNodeSelected($event)"
39-
(nodeMoved)="onNodeMoved($event)"
40-
(nodeCreated)="onNodeCreated($event)">
41-
</tree>
31+
<div class="tree-container">
32+
<div class="tree-info">
33+
<p class="tree-title">Programming languages tree</p>
34+
<p class="notice">this tree is loaded asynchronously</p>
35+
</div>
36+
<div class="tree-content">
37+
<tree [tree]="pls"
38+
[settings]="disabledCheckboxesSettings"
39+
(nodeRemoved)="onNodeRemoved($event)"
40+
(nodeRenamed)="onNodeRenamed($event)"
41+
(nodeSelected)="onNodeSelected($event)"
42+
(nodeMoved)="onNodeMoved($event)"
43+
(nodeCreated)="onNodeCreated($event)">
44+
</tree>
45+
</div>
4246
</div>
43-
</div>
44-
<div class="tree-container tree-container--with-controls">
45-
<div class="tree-info">
46-
<p class="tree-title">Directory/File structure</p>
47-
<p class="notice">this tree has advanced configurations</p>
47+
<div class="tree-container tree-container--with-controls">
48+
<div class="tree-info">
49+
<p class="tree-title">Directory/File structure</p>
50+
<p class="notice">this tree has advanced configurations</p>
51+
</div>
52+
<div class="tree-content">
53+
<tree #treeFFS
54+
[tree]="ffs"
55+
(nodeRemoved)="onNodeRemoved($event)"
56+
(nodeRenamed)="onNodeRenamed($event)"
57+
(nodeSelected)="onNodeSelected($event)"
58+
(nodeMoved)="onNodeMoved($event)"
59+
(nodeCreated)="onNodeFFSCreated($event)"
60+
(nodeExpanded)="onNodeExpanded($event)"
61+
(nodeCollapsed)="onNodeCollapsed($event)"
62+
[settings]="settings">
63+
</tree>
64+
</div>
65+
66+
<div class="tree-controlls">
67+
<p class="notice">Tree API exposed via TreeController</p>
68+
<button button (click)="handleActionOnFFS(13, 'select')">Select 'boot' node</button>
69+
<button button (click)="handleActionOnFFS(2, 'collapse')">Collapse 'bin' node</button>
70+
<button button (click)="handleActionOnFFS(2, 'expand')">Expand 'bin' node</button>
71+
<button button (click)="renameFFS(21)">Rename 'unicode.pf2' to 'unicode.pf'</button>
72+
<button button (click)="handleActionOnFFS(12, 'remove')">Remove 'nano'</button>
73+
<button button (click)="handleActionOnFFS(52, 'reloadChildren')">Reload Music's children</button>
74+
<button button (click)="setChildrenFFS(36)">Set 'etc' children</button>
75+
<button button (click)="addChildFFS(2, {value: 'ping'})">Add a child with name 'ping' to 'bin'</button>
76+
<button button (click)="addChildFFS(22, {value: 'lost'})">Add a child with name 'lost' to 'lost+found'</button>
77+
<button button (click)="addChildFFS(22, {value: 'found', children: []})">Add a child with name 'found' to 'lost+found'</button>
78+
<button button (click)="addChildFFS(36, {value: 'found', children: []})">Add a child with name 'found' to 'etc'</button>
79+
<button button (click)="addChildFFS(78, {value: 'Voodo People'})">Add a child with name 'Voodo People' to '2Cellos'</button>
80+
<button button (click)="checkFolder(52)">Check Music folder</button>
81+
<button button (click)="uncheckFolder(52)">Uncheck Music folder</button>
82+
</div>
4883
</div>
49-
<div class="tree-content">
50-
<tree #treeFFS
51-
[tree]="ffs"
52-
(nodeRemoved)="onNodeRemoved($event)"
53-
(nodeRenamed)="onNodeRenamed($event)"
54-
(nodeSelected)="onNodeSelected($event)"
55-
(nodeMoved)="onNodeMoved($event)"
56-
(nodeCreated)="onNodeFFSCreated($event)"
57-
(nodeExpanded)="onNodeExpanded($event)"
58-
(nodeCollapsed)="onNodeCollapsed($event)"
59-
[settings]="settings">
60-
</tree>
84+
<div class="tree-container">
85+
<div class="tree-info">
86+
<p class="tree-title">Programming languages tree</p>
87+
<p class="notice">this tree is using a custom template</p>
88+
</div>
89+
<div class="tree-content">
90+
<tree [tree]="icons"
91+
[settings]="settings"
92+
(nodeRemoved)="onNodeRemoved($event)"
93+
(nodeRenamed)="onNodeRenamed($event)"
94+
(nodeSelected)="onNodeSelected($event)"
95+
(nodeMoved)="onNodeMoved($event)"
96+
(nodeCreated)="onNodeCreated($event)">
97+
<ng-template let-node>
98+
<i class="fa {{node.icon}}"></i>
99+
<span class="node-name" [innerHTML]="node.value"></span>
100+
</ng-template>
101+
</tree>
102+
</div>
61103
</div>
62-
63-
<div class="tree-controlls">
64-
<p class="notice">Tree API exposed via TreeController</p>
65-
<button button (click)="handleActionOnFFS(13, 'select')">Select 'boot' node</button>
66-
<button button (click)="handleActionOnFFS(2, 'collapse')">Collapse 'bin' node</button>
67-
<button button (click)="handleActionOnFFS(2, 'expand')">Expand 'bin' node</button>
68-
<button button (click)="renameFFS(21)">Rename 'unicode.pf2' to 'unicode.pf'</button>
69-
<button button (click)="handleActionOnFFS(12, 'remove')">Remove 'nano'</button>
70-
<button button (click)="handleActionOnFFS(52, 'reloadChildren')">Reload Music's children</button>
71-
<button button (click)="setChildrenFFS(36)">Set 'etc' children</button>
72-
<button button (click)="addChildFFS(2, {value: 'ping'})">Add a child with name 'ping' to 'bin'</button>
73-
<button button (click)="addChildFFS(22, {value: 'lost'})">Add a child with name 'lost' to 'lost+found'</button>
74-
<button button (click)="addChildFFS(22, {value: 'found', children: []})">Add a child with name 'found' to 'lost+found'</button>
75-
<button button (click)="addChildFFS(36, {value: 'found', children: []})">Add a child with name 'found' to 'etc'</button>
76-
<button button (click)="addChildFFS(78, {value: 'Voodo People'})">Add a child with name 'Voodo People' to '2Cellos'</button>
77-
<button button (click)="checkFolder(52)">Check Music folder</button>
78-
<button button (click)="uncheckFolder(52)">Uncheck Music folder</button>
79-
</div>
80-
</div>
81-
<div class="tree-container">
82-
<div class="tree-info"><p class="tree-title">Programming languages tree</p>
83-
<p class="notice">this tree is using a custom template</p></div>
84-
<div class="tree-content">
85-
<tree [tree]="icons"
86-
[settings]="settings"
87-
(nodeRemoved)="onNodeRemoved($event)"
88-
(nodeRenamed)="onNodeRenamed($event)"
89-
(nodeSelected)="onNodeSelected($event)"
90-
(nodeMoved)="onNodeMoved($event)"
91-
(nodeCreated)="onNodeCreated($event)">
92-
<ng-template let-node>
93-
<i class="fa {{node.icon}}"></i> <span class="node-name" [innerHTML]="node.value"></span>
94-
</ng-template>
95-
</tree>
104+
<div>
105+
<div class="tree-info">
106+
<p class="tree-title">Custom right click GUI tree</p>
107+
<p class="notice">this tree is using a custom right click menu</p>
108+
</div>
109+
<div class="tree-content">
110+
<tree [tree]="custom"
111+
(nodeSelected)="onNodeSelected($event)">
112+
</tree>
113+
</div>
96114
</div>
97-
</div>
98115
</div>
99116
`,
100117
styles: [`
101118
.tree-info {
102-
flex: 1 0 100%;
103-
display: flex;
104-
flex-direction: column;
105-
align-items: flex-start;
106-
}
119+
flex: 1 0 100%;
120+
display: flex;
121+
flex-direction: column;
122+
align-items: flex-start;
123+
}
107124
108-
.tree-controlls {
109-
display: flex;
110-
flex-direction: column;
111-
}
125+
.tree-controlls {
126+
display: flex;
127+
flex-direction: column;
128+
}
112129
113-
.tree-content {
114-
display: flex;
115-
flex-direction: column;
116-
}
130+
.tree-content {
131+
display: flex;
132+
flex-direction: column;
133+
}
117134
118-
.tree-container {
119-
margin-bottom: 20px;
135+
.tree-container {
136+
margin-bottom: 20px;
120137
121-
}
138+
}
122139
123-
.tree-container--with-controls {
124-
display: flex;
125-
flex-wrap: wrap;
126-
}
140+
.tree-container--with-controls {
141+
display: flex;
142+
flex-wrap: wrap;
143+
}
127144
128-
.tree-demo-app {
129-
display: flex;
130-
flex-direction: column;
131-
}
145+
.tree-demo-app {
146+
display: flex;
147+
flex-direction: column;
148+
margin-bottom:50px;
149+
}
132150
133-
.tree-title {
134-
margin: 0;
135-
color: #40a070;
136-
font-size: 2em;
137-
}
151+
.tree-title {
152+
margin: 0;
153+
color: #40a070;
154+
font-size: 2em;
155+
}
138156
139-
.notice {
140-
color: #e91e63;
141-
font-size: 1.2em;
142-
font-style: italic;
143-
}
157+
.notice {
158+
color: #e91e63;
159+
font-size: 1.2em;
160+
font-style: italic;
161+
}
144162
145-
:host /deep/ .fa {
146-
cursor: pointer;
147-
}
163+
:host /deep/ .fa {
164+
cursor: pointer;
165+
}
148166
149-
:host /deep/ .fa.disabled {
150-
cursor: inherit;
151-
color: #757575;
152-
}
167+
:host /deep/ .fa.disabled {
168+
cursor: inherit;
169+
color: #757575;
170+
}
153171
154-
.button {
155-
border-radius: 4px;
156-
box-shadow: 0 2px 4px 0 #888;
157-
background-color: #fff;
158-
-webkit-appearance: none;
159-
border: 1px solid #000;
160-
height: 35px;
161-
outline: none;
162-
}
172+
.button {
173+
border-radius: 4px;
174+
box-shadow: 0 2px 4px 0 #888;
175+
background-color: #fff;
176+
-webkit-appearance: none;
177+
border: 1px solid #000;
178+
height: 35px;
179+
outline: none;
180+
}
163181
164-
.button-pressed {
165-
box-shadow: 0 0 1px 0 #888;
166-
}
182+
.button-pressed {
183+
box-shadow: 0 0 1px 0 #888;
184+
}
167185
168-
.tree-controlls button {
169-
margin: 5px;
170-
}
186+
.tree-controlls button {
187+
margin: 5px;
188+
}
171189
`]
172190
})
173191
export class AppComponent implements OnInit {
@@ -515,6 +533,22 @@ export class AppComponent implements OnInit {
515533
]
516534
};
517535

536+
public custom: TreeModel = {
537+
settings: {
538+
menuItems: [
539+
{ action: NodeMenuItemAction.NewFolder, name: 'Add parent node', cssClass: '' },
540+
{ action: NodeMenuItemAction.NewTag, name: 'Add child node', cssClass: '' },
541+
{ action: NodeMenuItemAction.Remove, name: 'Remove node', cssClass: '' },
542+
{ action: NodeMenuItemAction.Rename, name: 'Rename node', cssClass: '' },
543+
{ action: NodeMenuItemAction.Custom, name: 'Custom Action', cssClass: '' }
544+
]
545+
},
546+
value: 'TestParent',
547+
children: [
548+
{value: 'TestChild', icon: ''}
549+
]
550+
}
551+
518552
private static logEvent(e: NodeEvent, message: string): void {
519553
console.log(e);
520554
alertify.message(`${message}: ${e.node.value}`);

‎src/tree-internal.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -229,6 +229,7 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy, Afte
229229
this.onRemoveSelected();
230230
break;
231231
case NodeMenuItemAction.Custom:
232+
this.onCustomSelected();
232233
this.treeService.fireMenuItemSelected(this.tree, e.nodeMenuItemSelected);
233234
break;
234235
default:
@@ -253,6 +254,11 @@ export class TreeInternalComponent implements OnInit, OnChanges, OnDestroy, Afte
253254
this.treeService.fireNodeRemoved(this.tree);
254255
}
255256

257+
private onCustomSelected(): void {
258+
this.isRightMenuVisible = false;
259+
this.isLeftMenuVisible = false;
260+
}
261+
256262
public onSwitchFoldingType(): void {
257263
this.tree.switchFoldingType();
258264
this.treeService.fireNodeSwitchFoldingType(this.tree);

0 commit comments

Comments
 (0)