Newer
Older
<button class="drawer-button show-elements-button" (click)="toolbox_drawer.toggle()">
<span>
ELEMENTE
</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-tab-group *ngIf="pagesLoaded"
[style.height.%]="100" mat-align-tabs="start"
[selectedIndex]="selectedPageIndex"
(selectedIndexChange)="selectPage($event)">
<mat-tab *ngFor="let page of unit.pages; let i = index">
<ng-container *ngIf="page.alwaysVisible">
<mat-icon class="page-alwaysVisible-icon">assignment</mat-icon>
</ng-container>
<ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === false">
Seite {{i + 1}}
</ng-container>
<ng-container *ngIf="!page.alwaysVisible && unit.pages[0].alwaysVisible === true">
Seite {{i}}
</ng-container>
<button mat-icon-button class="menu-button" [matMenuTriggerFor]="pageMenu">
<mat-icon>more_vert</mat-icon>
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<mat-menu #pageMenu="matMenu">
<button *ngIf="!page.alwaysVisible"
mat-menu-item (click)="movePage(page,'up')">
<mat-icon>west</mat-icon>
<span>nach vorn</span>
</button>
<button *ngIf="!page.alwaysVisible"
mat-menu-item (click)="movePage(page, 'down')">
<mat-icon>east</mat-icon>
<span>nach hinten</span>
</button>
<button mat-menu-item (click)="deletePage(page)">
<mat-icon>delete</mat-icon>
<span>Löschen</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)">
Maximalbreite
</mat-checkbox>
<mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
<mat-label>Maximalbreite</mat-label>
<input matInput type="number" min="0" #maxWidth="ngModel"
[ngModel]="page.maxWidth"
(click)="$any($event).stopPropagation()">
</mat-form-field>
<mat-form-field class="menuItem" appearance="fill">
<mat-label>Randbreite</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>Hintergrundfarbe</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]="unit.pages.length < 2 || unit.pages[0].alwaysVisible && i != 0"
[ngModel]="page.alwaysVisible"
(click)="$any($event).stopPropagation()"
(change)="updateModel(page, 'alwaysVisible', $any($event.source).checked)">
Immer angezeigt
</mat-checkbox>
<mat-form-field class="menuItem" appearance="fill"
*ngIf="page.alwaysVisible">
<mat-label>Seitenverhältnis (in Prozent)</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>
<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 #properties_drawer class="properties_drawer" position="end" mode="side" opened>
<app-element-properties></app-element-properties>