frontend/config/tree-indent.html

<ng-container *ngIf="type == 'edit' || node['new']; else menu">
    <img *ngIf="type == 'edit' && node['info']['type'] != 4" class="icon_action" src="assets/netopeer/icons/close.svg" 
        onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
        onmouseout="this.src='assets/netopeer/icons/close.svg'"
        (click)="closeCreatingDialog(node)"/>
    <img *ngIf="node['info']['type'] == 4 && (type == 'edit' || node['key'])" class="icon_action" src="assets/netopeer/icons/tree_empty.svg"/>
    <img *ngIf="type != 'edit' && node['dirty'] && !node['key']" class="icon_action" src="assets/netopeer/icons/close.svg" 
        onmouseover="this.src='assets/netopeer/icons/close_active.svg'"
        onmouseout="this.src='assets/netopeer/icons/close.svg'"
        (click)="deleteSubtree(node)"/>
</ng-container>
<ng-template #menu >
    <span *ngIf="node['info']['config']; else empty"
        (mouseenter)="showEditMenu($event)" 
        (mouseleave)="hideEditMenu($event.currentTarget.lastElementChild)">
        <img  class="icon_action" src="assets/netopeer/icons/menu.svg" 
            onmouseover="this.src='assets/netopeer/icons/menu_active.svg'"
            onmouseout="this.src='assets/netopeer/icons/menu.svg'"/>
        <div class="editmenu msg-rounded">
            <div class="button_action" title="remove subtree {{node['path']}}"
                onmouseover="this.firstElementChild.src='assets/netopeer/icons/close_active.svg'"
                onmouseout="this.firstElementChild.src='assets/netopeer/icons/close.svg'"
                (click)="deleteSubtree(node);hideEditMenu($event.currentTarget.parentElement);">
                <img class="icon_action" src="assets/netopeer/icons/close.svg" />
                delete
            </div>
            <div class="button_action" title="create sibling data node(s)"
                onmouseover="this.firstElementChild.src='assets/netopeer/icons/add_active.svg'"
                onmouseout="this.firstElementChild.src='assets/netopeer/icons/add.svg'"
                (click)="openCreatingDialog($event.currentTarget, node, true);hideEditMenu($event.currentTarget.parentElement);">
                <img class="icon_action" src="assets/netopeer/icons/add.svg" />
                create sibling
            </div>
            <div *ngIf="node['info']['type'] != 4 && node['info']['type'] != 8"
                class="button_action" title="create children data node(s)"
                onmouseover="this.firstElementChild.src='assets/netopeer/icons/add_active.svg'"
                onmouseout="this.firstElementChild.src='assets/netopeer/icons/add.svg'"
                (click)="openCreatingDialog($event.currentTarget, node, flase);hideEditMenu($event.currentTarget.parentElement);">
                <img class="icon_action" src="assets/netopeer/icons/add.svg" />
                create children
            </div>
        </div>
    </span>
    <ng-template #empty>
        <img class="icon" src="assets/netopeer/icons/tree_empty.svg" />
    </ng-template>
</ng-template>
<ng-container *ngFor="let indent of indentation">
    <img *ngIf="!indent" class="indentation" src="assets/netopeer/icons/tree_cont.svg" />
    <img *ngIf="indent" class="indentation" src="assets/netopeer/icons/tree_empty.svg" />
</ng-container>
<ng-container *ngIf="type != 'edit' || node['info']['type'] != 4">
    <ng-container *ngIf="type == 'value'; else nodes">
        <img class="indentation" src="assets/netopeer/icons/tree_empty.svg" />
    </ng-container>
    <ng-template #nodes>
        <img *ngIf="type == 'edit' || node['last']" class="indentation" src="assets/netopeer/icons/tree_last_branch.svg" />
        <img *ngIf="type == 'current' && !node['last']" class="indentation" src="assets/netopeer/icons/tree_branch.svg" />
    </ng-template>
</ng-container>