diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
index 23e31341c2a4b0a4779c3a17cae4031170ec1cfe..4dee89ed9a2798e83a13978e754b585b99f26d9b 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/section-menu.component.ts
@@ -28,13 +28,15 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
<mat-icon>height</mat-icon>
</button>
<mat-menu #heightMenu="matMenu" class="layoutMenu" xPosition="before">
- <mat-form-field appearance="fill">
- <mat-label>Höhe</mat-label>
- <input matInput type="number"
- [value]="$any(section.height)"
- (click)="$any($event).stopPropagation()"
- (change)="updateModel('height', $any($event.target).value)">
- </mat-form-field>
+ <div (click)="$event.stopPropagation()">
+ <mat-form-field appearance="fill">
+ <mat-label>Höhe</mat-label>
+ <input matInput mat-menu-item type="number"
+ [value]="$any(section.height)"
+ (click)="$any($event).stopPropagation()"
+ (change)="updateModel('height', $any($event.target).value)">
+ </mat-form-field>
+ </div>
</mat-menu>
<button mat-mini-fab
(click)="openColorPicker()">
@@ -48,75 +50,77 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
<mat-icon>space_dashboard</mat-icon>
</button>
<mat-menu #layoutMenu="matMenu" class="layoutMenu" xPosition="before">
- <mat-checkbox class="menuItem" [checked]="section.dynamicPositioning"
- (click)="$any($event).stopPropagation()"
- (change)="updateModel('dynamicPositioning', $event.checked)">
- dynamisches Layout
- </mat-checkbox>
- <div *ngIf="section.dynamicPositioning">
- Spalten
- <div class="size-group">
- <mat-form-field>
- <mat-label>Anzahl</mat-label>
- <input matInput type="number"
- [value]="$any(section.gridColumnSizes.split(' ').length)"
- (click)="$any($event).stopPropagation()"
- (change)="modifySizeArray('gridColumnSizes', $any($event).target.value)">
- </mat-form-field>
- <mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
+ <div (click)="$event.stopPropagation()">
+ <mat-checkbox class="menuItem" [checked]="section.dynamicPositioning"
(click)="$any($event).stopPropagation()"
- (change)="updateModel('autoColumnSize', $event.checked)">
- dynamische Breite
+ (change)="updateModel('dynamicPositioning', $event.checked)">
+ dynamisches Layout
</mat-checkbox>
- <ng-container *ngIf="!section.autoColumnSize">
- <div *ngFor="let size of columnSizes ; let i = index" class="size-inputs" fxLayout="row">
- <mat-form-field>
- <mat-label>Breite {{i + 1}}</mat-label>
- <input matInput type="number"
- [value]="size.value"
- (click)="$any($event).stopPropagation()"
- (change)="changeGridSize('gridColumnSizes', i, false, $any($event).target.value)">
- </mat-form-field>
- <mat-select [value]="size.unit"
+ <div *ngIf="section.dynamicPositioning">
+ Spalten
+ <div class="size-group">
+ <mat-form-field>
+ <mat-label>Anzahl</mat-label>
+ <input matInput type="number"
+ [value]="$any(section.gridColumnSizes.split(' ').length)"
+ (click)="$any($event).stopPropagation()"
+ (change)="modifySizeArray('gridColumnSizes', $any($event).target.value)">
+ </mat-form-field>
+ <mat-checkbox class="menuItem" [checked]="section.autoColumnSize"
(click)="$any($event).stopPropagation()"
- (selectionChange)="changeGridSize('gridColumnSizes', i, true, $event.value)">
- <mat-option value="fr">Anteile</mat-option>
- <mat-option value="px">Bildpunkte</mat-option>
- </mat-select>
- </div>
- </ng-container>
- </div>
- Zeilen
- <div class="size-group">
- <mat-form-field>
- <mat-label>Anzahl</mat-label>
- <input matInput type="number"
- [value]="$any(section.gridRowSizes.split(' ').length)"
- (click)="$any($event).stopPropagation()"
- (change)="modifySizeArray('gridRowSizes', $any($event).target.value)">
- </mat-form-field>
- <mat-checkbox class="menuItem" [checked]="section.autoRowSize"
- (click)="$any($event).stopPropagation()"
- (change)="updateModel('autoRowSize', $event.checked)">
- dynamische Höhe
- </mat-checkbox>
- <ng-container *ngIf="!section.autoRowSize">
- <div *ngFor="let size of rowSizes ; let i = index" class="size-inputs" fxLayout="row">
- <mat-form-field>
- <mat-label>Höhe {{i + 1}}</mat-label>
- <input matInput type="number"
- [value]="size.value"
- (click)="$any($event).stopPropagation()"
- (change)="changeGridSize('gridRowSizes', i, false, $any($event).target.value)">
- </mat-form-field>
- <mat-select [value]="size.unit"
+ (change)="updateModel('autoColumnSize', $event.checked)">
+ dynamische Breite
+ </mat-checkbox>
+ <ng-container *ngIf="!section.autoColumnSize">
+ <div *ngFor="let size of columnSizes ; let i = index" class="size-inputs" fxLayout="row">
+ <mat-form-field>
+ <mat-label>Breite {{i + 1}}</mat-label>
+ <input matInput type="number"
+ [value]="size.value"
+ (click)="$any($event).stopPropagation()"
+ (change)="changeGridSize('gridColumnSizes', i, false, $any($event).target.value)">
+ </mat-form-field>
+ <mat-select [value]="size.unit"
+ (click)="$any($event).stopPropagation()"
+ (selectionChange)="changeGridSize('gridColumnSizes', i, true, $event.value)">
+ <mat-option value="fr">Anteile</mat-option>
+ <mat-option value="px">Bildpunkte</mat-option>
+ </mat-select>
+ </div>
+ </ng-container>
+ </div>
+ Zeilen
+ <div class="size-group">
+ <mat-form-field>
+ <mat-label>Anzahl</mat-label>
+ <input matInput type="number"
+ [value]="$any(section.gridRowSizes.split(' ').length)"
+ (click)="$any($event).stopPropagation()"
+ (change)="modifySizeArray('gridRowSizes', $any($event).target.value)">
+ </mat-form-field>
+ <mat-checkbox class="menuItem" [checked]="section.autoRowSize"
(click)="$any($event).stopPropagation()"
- (selectionChange)="changeGridSize('gridRowSizes', i, true, $event.value)">
- <mat-option value="fr">Anteile</mat-option>
- <mat-option value="px">Bildpunkte</mat-option>
- </mat-select>
- </div>
- </ng-container>
+ (change)="updateModel('autoRowSize', $event.checked)">
+ dynamische Höhe
+ </mat-checkbox>
+ <ng-container *ngIf="!section.autoRowSize">
+ <div *ngFor="let size of rowSizes ; let i = index" class="size-inputs" fxLayout="row">
+ <mat-form-field>
+ <mat-label>Höhe {{i + 1}}</mat-label>
+ <input matInput type="number"
+ [value]="size.value"
+ (click)="$any($event).stopPropagation()"
+ (change)="changeGridSize('gridRowSizes', i, false, $any($event).target.value)">
+ </mat-form-field>
+ <mat-select [value]="size.unit"
+ (click)="$any($event).stopPropagation()"
+ (selectionChange)="changeGridSize('gridRowSizes', i, true, $event.value)">
+ <mat-option value="fr">Anteile</mat-option>
+ <mat-option value="px">Bildpunkte</mat-option>
+ </mat-select>
+ </div>
+ </ng-container>
+ </div>
</div>
</div>
</mat-menu>
diff --git a/projects/editor/src/app/components/unit-view/unit-view.component.html b/projects/editor/src/app/components/unit-view/unit-view.component.html
index a7e6c798b87e595d16df5fc0e72fc409ee1a9954..b0da05308028fb54b8217aa6e54a0f1a82987bb2 100644
--- a/projects/editor/src/app/components/unit-view/unit-view.component.html
+++ b/projects/editor/src/app/components/unit-view/unit-view.component.html
@@ -31,72 +31,74 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #pageMenu="matMenu">
- <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)="$any($event).stopPropagation()"
- (change)="updateModel(page, 'hasMaxWidth', $any($event.source).checked)">
- {{'pageProperties.maxWidth' | translate }}
- </mat-checkbox>
- <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
- <mat-label>{{'maxWidth' | translate }}</mat-label>
- <input matInput type="number" min="0" #maxWidth="ngModel"
- [ngModel]="page.maxWidth"
- (click)="$any($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)="$any($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"
- [value]="page.backgroundColor"
- (change)="updateModel(page,'backgroundColor', $any($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)="$any($event).stopPropagation()"
- (change)="updateModel(page, 'alwaysVisible', $any($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)="$any($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)="$any($event).stopPropagation()"
- (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event)">
- </mat-form-field>
+ <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)="$any($event).stopPropagation()"
+ (change)="updateModel(page, 'hasMaxWidth', $any($event.source).checked)">
+ {{'pageProperties.maxWidth' | translate }}
+ </mat-checkbox>
+ <mat-form-field *ngIf="page.hasMaxWidth" class="menuItem" appearance="fill">
+ <mat-label>{{'maxWidth' | translate }}</mat-label>
+ <input matInput type="number" min="0" #maxWidth="ngModel"
+ [ngModel]="page.maxWidth"
+ (click)="$any($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)="$any($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"
+ [value]="page.backgroundColor"
+ (change)="updateModel(page,'backgroundColor', $any($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)="$any($event).stopPropagation()"
+ (change)="updateModel(page, 'alwaysVisible', $any($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)="$any($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)="$any($event).stopPropagation()"
+ (ngModelChange)="updateModel(page, 'alwaysVisibleAspectRatio', $event)">
+ </mat-form-field>
+ </div>
</mat-menu>
</ng-template>