OpenSlides/client/src/app/shared/components/head-bar/head-bar.component.html

69 lines
2.3 KiB
HTML
Raw Normal View History

2018-11-29 17:36:22 +01:00
<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
2018-11-06 15:35:51 +01:00
<div class="toolbar-left">
<!-- Nav menu -->
<button mat-icon-button *ngIf="vp.isMobile && !showBackButton && !editMode" (click)="clickHamburgerMenu()">
<mat-icon>menu</mat-icon>
</button>
2018-11-06 15:35:51 +01:00
<!-- Exit / Back button -->
<button mat-icon-button *ngIf="showBackButton && !editMode" (click)="onBackButton()">
2018-11-06 15:35:51 +01:00
<mat-icon>arrow_back</mat-icon>
</button>
2018-11-06 15:35:51 +01:00
<!-- Cancel edit button -->
<button mat-icon-button *ngIf="editMode" (click)="sendMainEvent()">
2018-11-06 15:35:51 +01:00
<mat-icon>close</mat-icon>
</button>
<div class="toolbar-left-text" *ngIf="!multiSelectMode">
2018-11-06 15:35:51 +01:00
<!-- Title slot -->
<ng-content select=".title-slot"></ng-content>
</div>
</div>
2018-11-05 17:40:32 +01:00
2018-11-29 17:36:22 +01:00
<!-- centered information slot -->
<div *ngIf="!multiSelectMode" class="spacer"></div>
<div class="toolbar-centered" *ngIf="multiSelectMode">
2018-11-05 17:40:32 +01:00
<ng-content select=".central-info-slot"></ng-content>
</div>
2018-11-29 17:36:22 +01:00
<div class="spacer"></div>
2018-11-05 17:40:32 +01:00
<div class="toolbar-right">
2018-11-06 15:35:51 +01:00
<!-- Extra controls slot -->
<ng-content select=".extra-controls-slot"></ng-content>
2018-11-06 15:35:51 +01:00
<!-- Main action button - desktop -->
2018-11-29 17:36:22 +01:00
<button
2019-01-09 08:31:13 +01:00
mat-icon-button
*ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()"
>
<mat-icon>add_circle</mat-icon>
</button>
<button
mat-icon-button
*ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
2018-11-29 17:36:22 +01:00
(click)="sendMainEvent()"
>
2019-01-09 08:31:13 +01:00
<mat-icon>edit</mat-icon>
2018-11-06 15:35:51 +01:00
</button>
<!-- Save button -->
<button mat-button *ngIf="editMode" [disabled]="!isSaveButtonEnabled" (click)="save()"><strong translate class="upper">Save</strong></button>
2018-11-06 15:35:51 +01:00
<!-- Menu button slot -->
<ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
2018-11-06 15:35:51 +01:00
</div>
</mat-toolbar>
2018-11-29 17:36:22 +01:00
<!-- Main action button - mobile -->
2018-11-05 17:40:32 +01:00
2018-11-29 17:36:22 +01:00
<button
mat-fab
class="head-button "
2018-11-29 17:36:22 +01:00
*ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode"
(click)="sendMainEvent()"
>
2018-11-08 17:38:44 +01:00
<mat-icon>{{ mainButtonIcon }}</mat-icon>
2018-11-06 15:35:51 +01:00
</button>