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>
      <aspect-ui-element-toolbox></aspect-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">
              <div (click)="$event.stopPropagation()">
                <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)="$event.stopPropagation()"
                              (change)="updateModel(page, 'hasMaxWidth', $event.source.checked)">
                  {{'pageProperties.maxWidth' | translate }}
                </mat-checkbox>
                <div *ngIf="page.hasMaxWidth" class="menuItem">
                  {{'pageProperties.pageWidth' | translate}}: {{page.maxWidth + 2 * page.margin}}px
                </div>
                <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
                  <mat-label>{{'pageProperties.sectionWidth' | translate }}</mat-label>
                  <input matInput type="number" min="0" #maxWidth="ngModel"
                         [ngModel]="page.maxWidth"
                         (click)="$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)="$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"
                         [ngModel]="page.backgroundColor"
                         (ngModelChange)="updateModel(page,'backgroundColor', $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)="$event.stopPropagation()"
                              (change)="updateModel(page, 'alwaysVisible', $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)="$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)="$event.stopPropagation()"
                         (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event)">
                </mat-form-field>
              </div>
            </mat-menu>

          </ng-template>
          <aspect-page-canvas *ngIf="pagesLoaded" [page]="page" fxLayout="column"></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-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>