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

56 lines
2.1 KiB

<ion-app class="dark">
<ion-split-pane when="sm">
<ion-menu class="sidebar">
<ion-header>
<ion-toolbar color="primary">
<ion-title>Noded</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-list-header>
<ion-buttons class="ion-padding-start">
<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)="onTopLevelCreate()">
<ion-icon color="primary" name="add-circle"></ion-icon>
</ion-button>
<ion-button fill="outline" color="light" (click)="onChildCreate()" [disabled]="!addChildTarget">
<ion-icon color="primary" name="add-circle"></ion-icon>&nbsp;<span class="button-text">Child</span>
</ion-button>
<ion-button fill="outline" color="light" (click)="onDeleteClick()" [disabled]="!deleteTarget">
<ion-icon color="danger" name="trash"></ion-icon>
</ion-button>
</ion-buttons>
</ion-list-header>
<tree-root [nodes]="nodes" [options]="options"></tree-root>
</ion-list>
</ion-content>
<ion-footer>
<ion-item slot="end" lines="full">
<ion-icon slot="start" name="moon"></ion-icon>
<ion-label>
Dark mode
</ion-label>
<ion-toggle (ionChange)="toggleDark()" id="themeToggle" slot="end"></ion-toggle>
</ion-item>
<ion-item button slot="end" lines="full" (click)="logOut()">
<ion-icon name="exit" slot="start"></ion-icon>
<ion-label>Log out</ion-label>
</ion-item>
</ion-footer>
</ion-menu>
<div class="ion-page" main>
<ion-header> </ion-header>
<ion-content class="ion-padding">
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-content>
</div>
</ion-split-pane>
</ion-app>