page-menu.component.html

<div [style]="'display: flex;'">
  <button [disabled]="page.alwaysVisible ||
                      pageIndex == 0 ||
                      (pageIndex == 1 && unitService.unit.pages[0].alwaysVisible)"
          [style]="'justify-content: center'"
          [matTooltip]="'Seite nach vorn verschieben'"
          mat-menu-item (click)="movePage('left')">
    <mat-icon>west</mat-icon>
  </button>
  <button [disabled]="page.alwaysVisible ||
                      pageIndex == unitService.unit.pages.length - 1"
          [style]="'justify-content: center;'"
          [matTooltip]="'Seite nach hinten verschieben'"
          mat-menu-item (click)="movePage('right')">
    <mat-icon>east</mat-icon>
  </button>
</div>

<button mat-menu-item class="delete-button"
        [disabled]="(unitService.unit.pages.length < 2) ||
                    (unitService.unit.pages.length == 2 && unitService.unit.pages[0].alwaysVisible)"
        [matTooltip]="'Seite löschen'"
        (click)="deletePage()">
  <mat-icon>delete</mat-icon>
</button>

<mat-divider></mat-divider>

<fieldset *ngIf="unitService.expertMode" class="fx-column-start-stretch">
  <legend>Seitenbreite</legend>
  <mat-checkbox class="menuItem"
                [matTooltip]="'Abgewählt wird die verfügbare Bildschirmbreite voll ausgenutzt.'"
                [checked]="page.hasMaxWidth"
                (click)="$event.stopPropagation()"
                (change)="updateModel(page, 'hasMaxWidth', $event.source.checked)">
    Seitenbreite begrenzen
  </mat-checkbox>
  <p class="menuItem" [style.margin-top.px]="5" [style.margin-left.px]="10">
    effektive Seitenbreite: <br>{{page.hasMaxWidth ? page.maxWidth + 2 * page.margin + 'px' : '∞'}}
  </p>
  <mat-form-field class="menuItem" appearance="fill">
    <mat-label>Seitenbreite in px</mat-label>
    <input matInput type="number" min="0" #maxWidth="ngModel"
           [disabled]="!page.hasMaxWidth"
           [ngModel]="page.hasMaxWidth ? page.maxWidth : null"
           (click)="$event.stopPropagation()"
           (ngModelChange)="updateModel(page,'maxWidth', $event || 0, maxWidth.valid)">
  </mat-form-field>
  <mat-form-field class="menuItem" appearance="fill">
    <mat-label>Randbreite in px</mat-label>
    <input matInput type="number" min="0" #margin="ngModel"
           [ngModel]="page.margin"
           (click)="$event.stopPropagation()"
           (ngModelChange)="updateModel(page,'margin', $event || 0, margin.valid)">
  </mat-form-field>
</fieldset>

<mat-form-field *ngIf="unitService.expertMode" class="menuItem" appearance="fill" [style.margin-top.px]="16">
  <mat-label>{{'pageProperties.backgroundColor' | translate }}</mat-label>
  <input matInput type="color" #backgroundColor="ngModel"
         [ngModel]="page.backgroundColor"
         (ngModelChange)="updateModel(page,'backgroundColor', $event, backgroundColor.valid)">
</mat-form-field>
<mat-checkbox class="menuItem"
              [disabled]="unitService.unit.pages.length < 2 || unitService.unit.pages[0].alwaysVisible && pageIndex != 0"
              [ngModel]="page.alwaysVisible"
              (click)="$event.stopPropagation()"
              (change)="updateModel(page, 'alwaysVisible', $event.source.checked)">
  Seite dauerhaft sichtbar
</mat-checkbox>
<mat-form-field *ngIf="unitService.expertMode" class="menuItem" appearance="fill">
  <mat-label>{{'pageProperties.position' | translate }}</mat-label>
  <mat-select [disabled]="!page.alwaysVisible"
              [value]="page.alwaysVisiblePagePosition"
              (click)="$event.stopPropagation()"
              (selectionChange)="updateModel(page, 'alwaysVisiblePagePosition', $event.value)">
    <mat-option *ngFor="let option of ['left', 'right', 'top', 'bottom']"
                [value]="option">
      {{option | translate}}
    </mat-option>
  </mat-select>
</mat-form-field>
<mat-form-field *ngIf="unitService.expertMode" class="menuItem" appearance="fill">
  <mat-label>{{'pageProperties.alwaysVisibleAspectRatio' | translate }}</mat-label>
  <input matInput type="number" min="0" max="100"
         [disabled]="!page.alwaysVisible"
         [ngModel]="page.alwaysVisibleAspectRatio"
         (click)="$event.stopPropagation()"
         (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event || 0)">
</mat-form-field>