You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
frontend/src/app/app.component.html

50 lines
2.4 KiB

<ion-app class="dark">
<ion-split-pane contentId="main-content" *ngIf="ready$ | async">
<ion-menu class="sidebar" contentId="main-content" content="content" type="push" side="start" *ngIf="!api.isPublicUser">
<ion-header>
<ion-toolbar color="primary">
<ion-title style="font-weight: bold; color: white;">{{ appName }}
<ion-menu-toggle menu="first" autoHide="false"></ion-menu-toggle>
</ion-title>
</ion-toolbar>
<ion-list>
<ion-list-header>
<ion-buttons>
<ion-button fill="outline" [color]="refreshingMenu ? 'success' : 'light'" (click)="onMenuRefresh()">
<ion-icon color="tertiary" name="refresh"></ion-icon>
</ion-button>
<ion-button fill="outline" color="light" (click)="onCreateClick($event)">
<ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span class="button-text">Create</span>
</ion-button>
<ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
<ion-button fill="outline" color="light" (click)="onNodeMenuClick($event)" [disabled]="!menuTarget">
<i class="fa fa-ellipsis-v" style="color: darkgrey"></i>
</ion-button>
</ion-buttons>
</ion-list-header>
</ion-list>
</ion-header>
<ion-content>
<tree-root style="font-size: 15px;" #menuTree [nodes]="nodes" [options]="options">
<ng-template #treeNodeTemplate let-node let-index="index">
<span class="tree-node-container" style="display: flex; padding: 5px; width: 100%;" [ngClass]="node.data.type">
<i class="tree-node-icon" [ngClass]="typeIcons[node.data.type]"></i>
<div class="tree-node-name">{{ node.data.name }}</div>
</span>
</ng-template>
</tree-root>
</ion-content>
<ion-footer>
<ion-item button lines="full" (click)="showOptions($event)">
<ion-icon name="list" slot="start"></ion-icon>
<ion-label>Menu</ion-label>
</ion-item>
</ion-footer>
</ion-menu>
<ion-router-outlet id="main-content" #content main></ion-router-outlet>
</ion-split-pane>
</ion-app>