unit-view.component.html

<div [style.height.%]="100">
  <button class="drawer-button show-elements-button" (click)="toolbox_drawer.toggle()">
    <span>
      {{'elements' | translate | uppercase}}
    </span>
  </button>

  <mat-drawer-container fxFlex>
    <mat-drawer #toolbox_drawer class="toolbox_drawer" mode="side" opened>
      <app-ui-element-toolbox></app-ui-element-toolbox>
    </mat-drawer>

    <mat-drawer-content>
      <mat-tab-group *ngIf="pagesLoaded"
                     [style.height.%]="100" mat-align-tabs="start"
                     [selectedIndex]="selectedPageIndex"
                     (selectedIndexChange)="selectPage($event)">
        <mat-tab *ngFor="let page of unitService.unit.pages; let i = index">
          <ng-template mat-tab-label>
            <ng-container *ngIf="page.alwaysVisible">
            <mat-icon class="page-alwaysVisible-icon">assignment</mat-icon>
            </ng-container>
            <ng-container *ngIf="!page.alwaysVisible && unitService.unit.pages[0].alwaysVisible === false">
              {{'page' | translate }} {{i + 1}}
            </ng-container>
            <ng-container *ngIf="!page.alwaysVisible && unitService.unit.pages[0].alwaysVisible === true">
              {{'page' | translate }} {{i}}
            </ng-container>

            <button mat-icon-button class="menu-button" [matMenuTriggerFor]="pageMenu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #pageMenu="matMenu">
              <button *ngIf="!page.alwaysVisible"
                      mat-menu-item (click)="movePage(page,'up')">
                <mat-icon>west</mat-icon>
                <span>{{'forward' | translate }}</span>
              </button>
              <button *ngIf="!page.alwaysVisible"
                      mat-menu-item (click)="movePage(page, 'down')">
                <mat-icon>east</mat-icon>
                <span>{{'backward' | translate }}</span>
              </button>
              <button mat-menu-item (click)="deletePage(page)">
                <mat-icon>delete</mat-icon>
                <span>{{'delete' | translate }}</span>
              </button>
              <mat-divider></mat-divider>
              <mat-checkbox class="menuItem" [checked]="page.hasMaxWidth"
                            (click)="$any($event).stopPropagation()"
                            (change)="updateModel(page, 'hasMaxWidth', $any($event.source).checked)">
                {{'pageProperties.maxWidth' | translate }}
              </mat-checkbox>
              <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
                <mat-label>{{'maxWidth' | translate }}</mat-label>
                <input matInput type="number" min="0" #maxWidth="ngModel"
                       [ngModel]="page.maxWidth"
                       (click)="$any($event).stopPropagation()"
                       (ngModelChange)="updateModel(page,'maxWidth', $event, maxWidth.valid)">
              </mat-form-field>
              <mat-form-field class="menuItem" appearance="fill">
                <mat-label>{{'pageProperties.marginWidth' | translate }}</mat-label>
                <input matInput type="number" min="0" #margin="ngModel"
                       [ngModel]="page.margin"
                       (click)="$any($event).stopPropagation()"
                       (ngModelChange)="updateModel(page,'margin', $event, margin.valid)">
              </mat-form-field>
              <mat-form-field class="menuItem" appearance="fill">
                <mat-label>{{'pageProperties.backgroundColor' | translate }}</mat-label>
                <input matInput type="color"
                       [value]="page.backgroundColor"
                       (change)="updateModel(page,'backgroundColor', $any($event.target).value)">
              </mat-form-field>
              <mat-checkbox class="menuItem"
                            [disabled]="unitService.unit.pages.length < 2 || unitService.unit.pages[0].alwaysVisible && i != 0"
                            [ngModel]="page.alwaysVisible"
                            (click)="$any($event).stopPropagation()"
                            (change)="updateModel(page, 'alwaysVisible', $any($event.source).checked)">
                {{'pageProperties.alwaysVisible' | translate }}
              </mat-checkbox>
              <mat-form-field *ngIf="page.alwaysVisible" class="menuItem" appearance="fill">
                <mat-label>{{'pageProperties.position' | translate }}</mat-label>
                <mat-select [value]="page.alwaysVisiblePagePosition"
                            (click)="$any($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 class="menuItem" appearance="fill"
                              *ngIf="page.alwaysVisible">
                <mat-label>{{'pageProperties.alwaysVisibleAspectRatio' | translate }}</mat-label>
                <input matInput type="number" min="0" max="100"
                       [ngModel]="page.alwaysVisibleAspectRatio"
                       (click)="$any($event).stopPropagation()"
                       (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event)">
              </mat-form-field>
            </mat-menu>

          </ng-template>
          <app-page-view [page]="page"></app-page-view>
        </mat-tab>
        <mat-tab disabled>
          <ng-template mat-tab-label>
            <button mat-icon-button (click)="addPage()">
              <mat-icon>add</mat-icon>
            </button>
          </ng-template>
        </mat-tab>
      </mat-tab-group>
    </mat-drawer-content>

    <mat-drawer #properties_drawer class="properties_drawer" position="end" mode="side" opened>
      <app-element-properties></app-element-properties>
    </mat-drawer>
  </mat-drawer-container>

  <button class="drawer-button show-properties-button" (click)="properties_drawer.toggle()">
    <span>
      {{'properties' | translate | uppercase}}
    </span>
  </button>
</div>