Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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
<div [style]="'display: flex;'">
<button [disabled]="page.alwaysVisible ||
pageIndex == 0 ||
(pageIndex == 1 && unitService.unit.pages[0].alwaysVisible)"
[style]="'justify-content: center'"
[matTooltip]="'Seite nach vorn verschieben'"
mat-menu-item (click)="movePage('left')">
<mat-icon>west</mat-icon>
</button>
<button [disabled]="page.alwaysVisible ||
pageIndex == unitService.unit.pages.length - 1"
[style]="'justify-content: center;'"
[matTooltip]="'Seite nach hinten verschieben'"
mat-menu-item (click)="movePage('right')">
<mat-icon>east</mat-icon>
</button>
</div>
<button mat-menu-item class="delete-button"
[matTooltip]="'Seite löschen'"
(click)="deletePage()">
<mat-icon>delete</mat-icon>
</button>
<mat-divider></mat-divider>
<fieldset class="fx-column-start-stretch">
<legend>Seitenbreite</legend>
<mat-checkbox class="menuItem"
[matTooltip]="'Abgewählt wird die verfügbare Bildschirmbreite voll ausgenutzt.'"
[checked]="page.hasMaxWidth"
(click)="$event.stopPropagation()"
(change)="updateModel(page, 'hasMaxWidth', $event.source.checked)">
Seitenbreite begrenzen
</mat-checkbox>
<p class="menuItem" [style.margin-top.px]="5" [style.margin-left.px]="10">
effektive Seitenbreite: <br>{{page.hasMaxWidth ? page.maxWidth + 2 * page.margin + 'px' : '∞'}}
</p>
<mat-form-field class="menuItem" appearance="fill">
<mat-label>Seitenbreite in px</mat-label>
<input matInput type="number" min="0" #maxWidth="ngModel"
[disabled]="!page.hasMaxWidth"
[ngModel]="page.hasMaxWidth ? page.maxWidth : null"
(click)="$event.stopPropagation()"
(ngModelChange)="updateModel(page,'maxWidth', $event || 0, maxWidth.valid)">
</mat-form-field>
<mat-form-field class="menuItem" appearance="fill">
<mat-label>Randbreite in px</mat-label>
<input matInput type="number" min="0" #margin="ngModel"
[ngModel]="page.margin"
(click)="$event.stopPropagation()"
(ngModelChange)="updateModel(page,'margin', $event || 0, margin.valid)">
</mat-form-field>
</fieldset>
<mat-form-field class="menuItem" appearance="fill" [style.margin-top.px]="16">
<mat-label>{{'pageProperties.backgroundColor' | translate }}</mat-label>
<input matInput type="color" #backgroundColor="ngModel"
[ngModel]="page.backgroundColor"
(ngModelChange)="updateModel(page,'backgroundColor', $event, backgroundColor.valid)">
</mat-form-field>
<mat-checkbox class="menuItem"
[disabled]="unitService.unit.pages.length < 2 || unitService.unit.pages[0].alwaysVisible && pageIndex != 0"
[ngModel]="page.alwaysVisible"
(click)="$event.stopPropagation()"
(change)="updateModel(page, 'alwaysVisible', $event.source.checked)">
Seite dauerhaft sichtbar
</mat-checkbox>
<mat-form-field class="menuItem" appearance="fill">
<mat-label>{{'pageProperties.position' | translate }}</mat-label>
<mat-select [disabled]="!page.alwaysVisible"
[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">
<mat-label>{{'pageProperties.alwaysVisibleAspectRatio' | translate }}</mat-label>
<input matInput type="number" min="0" max="100"
[disabled]="!page.alwaysVisible"
[ngModel]="page.alwaysVisibleAspectRatio"
(click)="$event.stopPropagation()"
(ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event || 0)">
</mat-form-field>