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]="showPagesAsList ? 0 : selectionService.selectedPageIndex"
                     (selectedIndexChange)="selectPage($event)"
                     (animationDone)="pageChangeService.pageChanged.emit()">
        <ng-container *ngIf="!showPagesAsList">
          <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">
                <aspect-unit-view-page-menu [page]="page" [pageIndex]="i"
                                            (pageOrderChanged)="refreshTabs()"></aspect-unit-view-page-menu>
              </mat-menu>
            </ng-template>
            <div cdkDropListGroup class="page-view-wrapper">
              <aspect-editor-page-view *ngIf="pagesLoaded" class="fx-column-start-stretch fullscreen-page"
                                         [page]="unitService.unit.pages[selectionService.selectedPageIndex]"
                                         [pageIndex]="i" [singlePageMode]="true"
                                         (pagesChanged)="refreshTabs()">
              </aspect-editor-page-view>
            </div>
          </mat-tab>
        </ng-container>

        <ng-container *ngIf="showPagesAsList">
          <mat-tab *ngIf="unitService.unit.pages[0].alwaysVisible">
            <ng-template mat-tab-label>
              <mat-icon [matTooltip]="'Dauerhaft sichtbare Seite'"
                        [matTooltipPosition]="'above'" [matTooltipShowDelay]="400">
                sticky_note_2
              </mat-icon>
            </ng-template>
            <aspect-editor-page-view *ngIf="pagesLoaded" class="fx-column-start-stretch"
                                     [page]="unitService.unit.pages[0]" [pageIndex]="0"
                                     (pagesChanged)="refreshTabs()">
            </aspect-editor-page-view>
          </mat-tab>
          <mat-tab>
            <ng-template mat-tab-label>
              {{unitService.unit.pages[0].alwaysVisible ? unitService.unit.pages.length - 1: unitService.unit.pages.length}} Seiten
            </ng-template>
            <div *ngIf="pagesLoaded" cdkDropListGroup >
              <aspect-editor-page-view *ngFor="let page of
                (unitService.unit.pages[0].alwaysVisible ? unitService.unit.pages.slice(1) : unitService.unit.pages);
                let pageIndex = index"
                                       [page]="page"
                                       [pageIndex]="pageIndex + (unitService.unit.pages[0].alwaysVisible ? 1 : 0)"
                                       [isLastPage]="pageIndex == unitService.unit.pages.length - 1"
                                       (alwaysVisiblePageModified)="refreshTabs()">
              </aspect-editor-page-view>
            </div>
            <button mat-fab extended class="add-page-button" [matTooltip]="'Weitere Seite anlegen'" (click)="addPage()">
              <mat-icon>add</mat-icon>Neue Seite
            </button>
          </mat-tab>
        </ng-container>

        <mat-tab *ngIf="!showPagesAsList" [disabled]="true">
          <ng-template mat-tab-label>
            <button mat-icon-button [matTooltip]="'Weitere Seite anlegen'" (click)="addPage()">
              <mat-icon>add</mat-icon>
            </button>
          </ng-template>
        </mat-tab>

<!--        Commented out for now, until feature works-->
<!--        <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 [disabled]="true" class="align-right">
          <ng-template mat-tab-label>
            <button mat-icon-button [matMenuTriggerFor]="numberingMenu">
              <mat-icon>settings</mat-icon>
            </button>
            <mat-menu #numberingMenu="matMenu" (click)="$event.stopPropagation()">
              <div [style.padding]="'0 20px 10px'" (click)="$event.stopPropagation()">
                <h3>Abschnittsnummerierung</h3>
                <mat-checkbox #numberingInput [checked]="unitService.unit.enableSectionNumbering"
                              (change)="setSectionNumbering($event)">
                  Nummerierung aktivieren
                </mat-checkbox>
                <mat-checkbox [disabled]="!numberingInput.checked" [checked]="unitService.unit.sectionNumberingPosition"
                              (change)="setSectionNumberingPosition($event)">
                  vertikale Ausrichtung
                </mat-checkbox>
                <h3>Navigation</h3>
                <mat-checkbox [matTooltip]="'Wird am Ende der letzten Seite angezeigt'" (change)="setUnitNavNext($event)">
                  Navigationsknopf zur nächsten Unit anfügen
                </mat-checkbox>
              </div>
            </mat-menu>
          </ng-template>
        </mat-tab>
        <mat-tab [disabled]="true" class="align-right">
          <ng-template mat-tab-label>
            <button mat-icon-button [matMenuTriggerFor]="extrasMenu" data-cy="extras-menu">
              <mat-icon>menu</mat-icon>
            </button>
            <mat-menu #extrasMenu="matMenu" (click)="$event.stopPropagation()">
              <div [style.padding]="'0 20px 10px'" (click)="$event.stopPropagation()">
                <mat-checkbox [disabled]="!unitService.allowExpertMode"
                              [ngModel]="unitService.expertMode" (change)="setExpertMode($event)">
                  Erweiterter Modus
                </mat-checkbox>
                <mat-checkbox [checked]="showPagesAsList" (change)="toggleViewMode()">
                  Seitenansicht untereinander
                </mat-checkbox>
              </div>
            </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>