/
list-item-form.component.html
60 lines (59 loc) · 2.63 KB
/
list-item-form.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!-- add new node item -->
<div class="new-list-item medium-field" *ngIf="newNode && projectAdmin">
<app-string-literal-input class="list-item-label" [placeholder]="placeholder" [value]="[]"
(dataChanged)="handleData($event)" [language]="language" (enter)="createChildNode()">
</app-string-literal-input>
<button *ngIf="!loading" mat-icon-button matSuffix [disabled]="!labels?.length" class="add-node-btn"
(click)="createChildNode()">
<mat-icon>
add
</mat-icon>
</button>
<app-progress-indicator [status]="0" *ngIf="loading" class="progress-indicator"></app-progress-indicator>
</div>
<!-- node item -->
<div class="list-item medium-field"
*ngIf="!newNode"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()">
<app-string-literal-input class="list-item-label"
[placeholder]="labels | appStringifyStringLiteral:'all' | appTruncate: 128" [value]="labels" [readonly]="true"
(dataChanged)="handleData($event)" [language]="language">
</app-string-literal-input>
<div class="action-bubble" *ngIf="showActionBubble && projectStatus" [@simpleFadeAnimation]="'in'">
<div class="button-container">
<button mat-button
*ngIf="position > 0"
title="move up"
(click)="$event.stopPropagation(); repositionNode('up')"
class="reposition up">
<mat-icon>arrow_upward</mat-icon>
</button>
<button mat-button
*ngIf="!lastPosition"
title="move down"
(click)="$event.stopPropagation(); repositionNode('down')"
class="reposition down">
<mat-icon>arrow_downward</mat-icon>
</button>
<button mat-button
title="insert new child node above"
(click)="$event.stopPropagation(); openDialog('insertListNode', labels[0].value, iri)"
class="insert">
<mat-icon>vertical_align_top</mat-icon>
</button>
<button mat-button
class="edit"
title="edit"
(click)="$event.stopPropagation(); openDialog('editListNode', labels[0].value, iri)">
<mat-icon>edit</mat-icon>
</button>
<button mat-button
class="delete"
title="delete"
(click)="$event.stopPropagation(); openDialog('deleteListNode', labels[0].value, iri)">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</div>