From b70ca88103c02fd217852aeae58797cbdbbcf5a0 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 25 Aug 2021 12:44:48 +0200
Subject: [PATCH] Add new page property 'hasMaxWidth' and rename width to
maxWidth
When this is set the page will only be rendered to that width. Otherwise
100% of the available space is used.
---
projects/common/unit.ts | 3 ++-
projects/editor/src/app/UnitFactory.ts | 3 ++-
.../canvas/page-canvas.component.html | 6 +++---
.../page-view/canvas/page-canvas.component.ts | 4 ++--
.../properties/page-properties.component.ts | 18 ++++++++++++++----
.../properties/section-properties.component.ts | 2 +-
.../components/layout/layout.component.html | 6 +++---
.../app/components/layout/layout.component.ts | 2 +-
8 files changed, 28 insertions(+), 16 deletions(-)
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 7e12cacd4..075efcd36 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 88e1b4c84..e855b3419 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 8e5e388bc..a01ae6d33 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 5e87559a0..e7f48d51b 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 96d07978e..a1c04eeee 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 bdffd6dff..163b4eade 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 66105537e..5c1eb3e16 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 4bb596cdd..67dfbffc8 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);
--
GitLab