59 lines
3.3 KiB
HTML
59 lines
3.3 KiB
HTML
<mat-toolbar id="toolbar">
|
|
<button mat-icon-button routerLink="/">
|
|
<img src="/assets/images/logo.png" height="35px" width="auto">
|
|
</button>
|
|
<small class="ml-1">{{version}}</small>
|
|
<mat-progress-spinner *ngIf="(status | async) == 'staving'" color="primary" class="text-muted pl-2"></mat-progress-spinner>
|
|
<button mat-icon-button *ngIf="(status | async) == 'modified'" class="ml-2" (click)="save.emit()"><mat-icon class="text-muted">autorenew</mat-icon></button>
|
|
<div class="ml-auto">
|
|
<ng-container *ngFor="let item of displayMenuItems; let i = index">
|
|
<ng-container *ngIf="i < maxMenuItems">
|
|
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'icon'}"></ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
<button *ngIf="displayMenuItems.length > maxMenuItems" mat-icon-button [matMenuTriggerFor]="overflowMenu">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
<mat-menu #overflowMenu="matMenu">
|
|
<ng-container *ngFor="let item of displayMenuItems; let i = index">
|
|
<ng-container *ngIf="i >= maxMenuItems">
|
|
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: item, menu: displayMenuItems, mode: 'menu'}"></ng-container>
|
|
</ng-container>
|
|
</ng-container>
|
|
</mat-menu>
|
|
</div>
|
|
</mat-toolbar>
|
|
|
|
<ng-template #menuItem let-item let-menu="menu" let-mode="mode">
|
|
<ng-container *ngIf="mode == 'icon' && !item.subMenu">
|
|
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name">
|
|
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="mode == 'menu' && !item.subMenu">
|
|
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)">
|
|
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
|
|
</button>
|
|
</ng-container>
|
|
<ng-container *ngIf="mode == 'icon' && item.subMenu">
|
|
<button mat-icon-button class="d-inline mr-1" [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matTooltip]="item.name" [matMenuTriggerFor]="subMenu">
|
|
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon>
|
|
</button>
|
|
<mat-menu #subMenu="matMenu">
|
|
<ng-container *ngFor="let child of item.subMenu">
|
|
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, menu: item.subMenu, mode: 'menu'}"></ng-container>
|
|
</ng-container>
|
|
</mat-menu>
|
|
</ng-container>
|
|
<ng-container *ngIf="mode == 'menu' && item.subMenu">
|
|
<button mat-menu-item [ngClass]="{'selected': item?.enabled}" (click)="clickWrapper(item, menu)" [matMenuTriggerFor]="subMenu">
|
|
<mat-icon *ngIf="item.icon">{{item.icon}}</mat-icon> {{item?.name}}
|
|
</button>
|
|
<mat-menu #subMenu="matMenu">
|
|
<ng-container *ngFor="let child of item.subMenu">
|
|
<ng-container *ngTemplateOutlet="menuItem; context: {$implicit: child, menu: item.subMenu, mode: 'menu'}"></ng-container>
|
|
</ng-container>
|
|
</mat-menu>
|
|
</ng-container>
|
|
</ng-template>
|