unit-view.component.html

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

  <mat-drawer-container class="fx-flex">
    <mat-drawer #toolbox_drawer class="toolbox_drawer" mode="side" opened>
      <aspect-ui-element-toolbox></aspect-ui-element-toolbox>
    </mat-drawer>

    <mat-drawer-content>
      <mat-tab-group *ngIf="pagesLoaded"
                     preserveContent="true"
                     [style.height.%]="100" mat-align-tabs="start" mat-stretch-tabs="false"
                     [selectedIndex]="selectionService.selectedPageIndex"
                     (selectedIndexChange)="selectPage($event)"
                     (animationDone)="pageChangeService.pageChanged.emit()">
        <mat-tab *ngFor="let page of unitService.unit.pages; let i = index">
          <ng-template mat-tab-label>
            <ng-container *ngIf="page.alwaysVisible">
              <mat-icon [matTooltip]="'Dauerhaft sichtbare Seite'"
                        [matTooltipPosition]="'above'" [matTooltipShowDelay]="400">
                sticky_note_2
              </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 *ngIf="selectionService.selectedPageIndex == i"
                    mat-icon-button class="menu-button" [matMenuTriggerFor]="pageMenu"
                    [matTooltip]="'Seiteneinstellungen'" [matTooltipPosition]="'above'" [matTooltipShowDelay]="400">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #pageMenu="matMenu">
              <div (click)="$event.stopPropagation()">
                <aspect-unit-view-page-menu [page]="page" [pageIndex]="i"
                                            (pageOrderChanged)="refreshTabs()"></aspect-unit-view-page-menu>
              </div>
            </mat-menu>
          </ng-template>
          <aspect-page-canvas *ngIf="pagesLoaded" class="fx-column-start-stretch" [page]="page"></aspect-page-canvas>
        </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 disabled>
          <ng-template mat-tab-label>
            <button mat-icon-button class="history-button" [matMenuTriggerFor]="historyMenu">
              <mat-icon>history</mat-icon>
            </button>
            <mat-menu #historyMenu="matMenu">
              <h3>Änderungshistorie</h3>
              <p [style.color]="'red'">Achtung experimentelle Funktion!<br>
                Benutzung kann Fehler verursachen bis hin zu kaputter Unit.</p>
              <div *ngFor="let command of historyService.commandList">
                <p>{{ command.title }}</p>
              </div>
              <button *ngIf="historyService.commandList.length > 0" (click)="unitService.rollback()">Rollback</button>
            </mat-menu>
          </ng-template>
        </mat-tab>

      </mat-tab-group>
    </mat-drawer-content>

    <mat-drawer #properties_drawer class="properties_drawer" position="end" mode="side" opened>
      <aspect-element-properties></aspect-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>