diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 7e12cacd4abb342dc794ae66792ab44d4bf58458..075efcd369405691d7f021a6d63f4ee5ce02c89d 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -7,7 +7,8 @@ export interface UnitPage {
[index: string]: string | number | boolean | undefined | UnitPageSection[];
id: string;
sections: UnitPageSection[];
- width: number;
+ hasMaxWidth: boolean;
+ maxWidth: number;
margin: number;
backgroundColor: string;
alwaysVisible: boolean;
diff --git a/projects/editor/src/app/UnitFactory.ts b/projects/editor/src/app/UnitFactory.ts
index 88e1b4c84f30653a3d81fe1e2c68169d20f3e841..e855b3419d8556a2a04e31ef9e606a615cc4cee6 100644
--- a/projects/editor/src/app/UnitFactory.ts
+++ b/projects/editor/src/app/UnitFactory.ts
@@ -17,7 +17,8 @@ export function createUnitPage(pageIndex: number): UnitPage {
return {
id: `page${pageIndex}`,
sections: [],
- width: 1100,
+ hasMaxWidth: false,
+ maxWidth: 1100,
margin: 8,
backgroundColor: 'white',
alwaysVisible: false,
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
index 8e5e388bc04102e74c55607d4dd4aad46adfb425..a01ae6d330894dbaaeff3f4f16945b5780d43c0d 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.html
@@ -5,7 +5,7 @@
<div class="canvasBackground" fxFlex>
<div *ngIf="!sectionEditMode"
class="canvasFrame"
- [style.width.px]="page.width"
+ [style.width.px]="page.maxWidth"
[style.padding.px]="page.margin"
[style.background-color]="page.backgroundColor">
<div cdkDropListGroup>
@@ -20,7 +20,7 @@
<div *ngIf="sectionEditMode" class="drop-list"
- [style.width.px]="page.width" [style.padding.px]="page.margin"
+ [style.width.px]="page.maxWidth" [style.padding.px]="page.margin"
cdkDropList (cdkDropListDropped)="sectionDrop($event)" [cdkDropListData]="page.sections">
<ng-container *ngFor="let section of page.sections; let i = index">
<button mat-fab class="add-section-button"
@@ -35,7 +35,7 @@
</ng-container>
</div>
- <button mat-fab class="add-section-button" [style.width.px]="page.width" [style.margin.px]="page.margin"
+ <button mat-fab class="add-section-button" [style.width.px]="page.maxWidth" [style.margin.px]="page.margin"
(click)="addSection()">
<mat-icon>add</mat-icon>
</button>
diff --git a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts
index 5e87559a05b988d535773eaffa12deaae2e0aca5..e7f48d51b5088d155f09604184aa29323e9a8d25 100644
--- a/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/canvas/page-canvas.component.ts
@@ -35,8 +35,8 @@ export class PageCanvasComponent {
if (newXPosition < 0) {
newXPosition = 0;
}
- if (newXPosition > this.page.width - sourceItemModel.width) {
- newXPosition = this.page.width - sourceItemModel.width;
+ if (newXPosition > this.page.maxWidth - sourceItemModel.width) {
+ newXPosition = this.page.maxWidth - sourceItemModel.width;
}
this.unitService.updateElementProperty(this.selectionService.getSelectedElements(), 'xPosition', newXPosition);
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
index 96d07978e2870eb276aadd693b1303701545c96d..a1c04eeee1ce535c2b0cdc1c25239a54da55d576 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/page-properties.component.ts
@@ -11,11 +11,15 @@ import { SelectionService } from '../../../../selection.service';
selector: 'app-page-properties',
template: `
<div fxLayout="column">
- <mat-form-field>
- <mat-label>Breite</mat-label>
+ <mat-checkbox [checked]="selectedPage.hasMaxWidth"
+ (change)="updateModel('hasMaxWidth', $any($event.source).checked)">
+ Maximalbreite setzen
+ </mat-checkbox>
+ <mat-form-field *ngIf="selectedPage.hasMaxWidth">
+ <mat-label>Maximalbreite</mat-label>
<input matInput type="number"
- [value]="selectedPage.width"
- (change)="updateModel('width', $any($event.target).value)">
+ [value]="selectedPage.maxWidth"
+ (change)="updateModel('maxWidth', $any($event.target).value)">
</mat-form-field>
<mat-form-field>
<mat-label>Randbreite</mat-label>
@@ -33,6 +37,12 @@ import { SelectionService } from '../../../../selection.service';
(change)="updateModel('alwaysVisible', $any($event.source).checked)">
Immer angezeigt
</mat-checkbox>
+ <mat-form-field *ngIf="selectedPage.alwaysVisible">
+ <mat-label>Seitenverhältnis (in Prozent)</mat-label>
+ <input matInput type="number" min="0" max="100"
+ [value]="selectedPage.alwaysVisibleAspectRatio"
+ (change)="updateModel('alwaysVisibleAspectRatio', $any($event.target).value)">
+ </mat-form-field>
</div>
`
})
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
index bdffd6dff940fff323a077c337077b6b2b78d4c8..163b4eade032c9c44ef19fbd21fb8f51e27bf564 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/section-properties.component.ts
@@ -136,7 +136,7 @@ export class SectionPropertiesComponent implements OnInit, OnDestroy {
})
.unsubscribe();
- if (property === 'width' && value > selectedPage!.width) {
+ if (property === 'width' && value > selectedPage!.maxWidth) {
this.messageService.showError('Darf nicht breiter als die Seite sein.');
} else {
this.unitService.updateSectionProperty(this.selectedPageSection, property, value);
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 66105537eabc3d040fc48195fe03346c7aa6c804..5c1eb3e16a940e4bee562716ad2b7efb6652cd53 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -17,7 +17,7 @@
[style.max-width.px]="layoutAlignment === 'row' ? alwaysVisiblePageWidth : layoutWidth">
<div appHideFirstChild
[hideFirstChild]="hidePageLabels"
- [style.max-width.px]="alwaysVisiblePage.width"
+ [style.max-width.px]="alwaysVisiblePage.maxWidth"
[style.margin.px]="alwaysVisiblePage.margin">
<div class="mat-tab-label">{{'alwaysVisiblePage' | translate}} {{selectedIndex}}</div>
<app-page [parentArrayIndex]="alwaysVisibleUnitPageIndex"
@@ -51,7 +51,7 @@
<ng-container *ngFor="let page of pages; let i = index">
<mat-tab *ngIf="!page.alwaysVisible"
label="{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}">
- <div [style.margin.px]="page.margin" [style.max-width.px]="page.width">
+ <div [style.margin.px]="page.margin" [style.max-width.px]="page.maxWidth">
<app-page [parentArrayIndex]="i"
[index]="playerPageIndices[i]"
[parentForm]="parentForm"
@@ -81,7 +81,7 @@
[pagesContainer]="pagesScrolledContainer"
[selectIndex]="selectIndex"
[index]="playerPageIndices[i]"
- [style.max-width.px]="page.width"
+ [style.max-width.px]="page.maxWidth"
[style.margin.px]="page.margin">
<div class="mat-tab-label">
{{'pageIndication' | translate: {index: playerPageIndices[i] + 1} }}
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index 4bb596cdd564fe5222ea0cfdd6458b9bedb48746..67dfbffc85e3b7598b60982a5053a386f43554f5 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -87,7 +87,7 @@ export class LayoutComponent implements OnInit {
Math.max(...this.scrollPages.map((page: UnitPage): number => this.getAbsolutePageWidth(page))) : 0;
}
- private getAbsolutePageWidth = (page: UnitPage | undefined): number => ((page) ? 2 * page.margin + page.width : 0);
+ private getAbsolutePageWidth = (page: UnitPage | undefined): number => ((page) ? 2 * page.margin + page.maxWidth : 0);
onSelectedIndexChange(selectedIndex: number): void {
this.selectedIndexChange.emit(selectedIndex);