From 47b96d9b3d4425173d4537774521f258f9308397 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 14 Dec 2021 18:15:09 +0100
Subject: [PATCH] Add new position property 'fixedSize'
This allows elements in dynamic sections to have fixed dimensions.
Some modifications to property panel logic, to show dimension fields and
proper labels.
Only implmented in dropList and button elements.
---
projects/common/models/uI-element.ts | 1 +
.../ui-elements/button/button.component.ts | 9 +++++---
.../drop-list/drop-list.component.ts | 9 ++++++--
.../common/util/unit-interface-initializer.ts | 4 ++++
.../element-sizing-properties.component.ts | 22 ++++++++++++++++---
projects/editor/src/assets/i18n/de.json | 3 ++-
6 files changed, 39 insertions(+), 9 deletions(-)
diff --git a/projects/common/models/uI-element.ts b/projects/common/models/uI-element.ts
index 5a05bfbf6..0914e857f 100644
--- a/projects/common/models/uI-element.ts
+++ b/projects/common/models/uI-element.ts
@@ -92,6 +92,7 @@ export interface PositionedElement extends UIElement {
export interface PositionProperties {
[index: string]: string | number | boolean;
+ fixedSize: boolean;
dynamicPositioning: boolean;
xPosition: number;
yPosition: number;
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index d81bd940e..63f58619e 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -9,8 +9,10 @@ import { ButtonElement } from './button-element';
template: `
<button *ngIf="!elementModel.imageSrc" mat-button
type='button'
- [style.width.%]="100"
- [style.height.%]="100"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
@@ -30,7 +32,8 @@ import { ButtonElement } from './button-element';
`,
styles: [
'.dynamic-image {width: 100%; height: fit-content}',
- '.static-image {width: 100%; height: 100%; object-fit: contain}'
+ '.static-image {width: 100%; height: 100%; object-fit: contain}',
+ '.center-content {position: absolute; top: 0; bottom: 0; left: 0;right: 0; margin: auto;}'
]
})
export class ButtonComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index 8ae96952e..a231a945c 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -14,6 +14,10 @@ import { DragNDropValueObject } from '../../models/uI-element';
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
<!-- class style.-->
<div class="list"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
+ [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
[ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
[style.border-color]="elementModel.highlightReceivingDropListColor"
@@ -67,7 +71,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
`,
styles: [
'.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
- '.list {width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10px}',
+ '.list {border-radius: 10px}',
'.text-item {border-radius: 10px; padding: 10px;}',
'.item {cursor: grab}',
'.item:active {cursor: grabbing}',
@@ -82,7 +86,8 @@ import { DragNDropValueObject } from '../../models/uI-element';
'.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
'.dropList-highlight.cdk-drop-list-dragging {border: solid;}',
- '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}'
+ '.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}',
+ '.center-content {position: absolute; top: 0; bottom: 0; left: 0;right: 0; margin: auto;}'
]
})
export class DropListComponent extends FormElementComponent {
diff --git a/projects/common/util/unit-interface-initializer.ts b/projects/common/util/unit-interface-initializer.ts
index d42fe1959..afb138728 100644
--- a/projects/common/util/unit-interface-initializer.ts
+++ b/projects/common/util/unit-interface-initializer.ts
@@ -17,6 +17,7 @@ const DEFAULT_LINE_HEIGHT = 120;
const DEFAULT_BOLD = false;
const DEFAULT_ITALIC = false;
const DEFAULT_UNDERLINE = false;
+const DEFAULT_FIXED_SIZE = false;
const DEFAULT_BACKGROUND_COLOR = '#d3d3d3';
@@ -24,6 +25,8 @@ export function initPositionedElement(serializedElement: Partial<UIElement>): Po
if (serializedElement.positionProps) {
return {
dynamicPositioning: serializedElement.positionProps.dynamicPositioning as boolean || DEFAULT_DYNAMIC_POSITIONING,
+ fixedSize: serializedElement.positionProps.fixedSize !== undefined ?
+ serializedElement.positionProps.fixedSize as boolean : DEFAULT_FIXED_SIZE,
xPosition: serializedElement.positionProps.xPosition !== undefined ?
serializedElement.positionProps.xPosition as number : 0,
yPosition: serializedElement.positionProps.yPosition !== undefined ?
@@ -51,6 +54,7 @@ export function initPositionedElement(serializedElement: Partial<UIElement>): Po
};
}
return {
+ fixedSize: serializedElement.fixedSize as boolean || DEFAULT_FIXED_SIZE,
dynamicPositioning: serializedElement.dynamicPositioning as boolean || DEFAULT_DYNAMIC_POSITIONING,
xPosition: serializedElement.xPosition !== undefined ? serializedElement.xPosition as number : 0,
yPosition: serializedElement.yPosition !== undefined ? serializedElement.yPosition as number : 0,
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
index 565e8496f..6319880d5 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts
@@ -44,8 +44,21 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
</mat-form-field>
</ng-container>
<ng-template #elseBlock>
+
+ <mat-checkbox *ngIf="combinedProperties.positionProps !== undefined"
+ matTooltip="Element ist nicht mehr dynamisch. Die eingestellte Größe wird benutzt."
+ [checked]="$any(combinedProperties.fixedSize)"
+ (change)="updateModel.emit({ property: 'fixedSize', value: $event.checked })">
+ {{'propertiesPanel.fixedSize' | translate }}
+ </mat-checkbox>
+
<mat-form-field appearance="fill" *ngIf="combinedProperties.positionProps !== undefined">
- <mat-label>{{'propertiesPanel.minWidth' | translate }}</mat-label>
+ <mat-label *ngIf="!combinedProperties.positionProps.fixedSize">
+ {{'propertiesPanel.minWidth' | translate }}
+ </mat-label>
+ <mat-label *ngIf="combinedProperties.positionProps.fixedSize">
+ {{'propertiesPanel.width' | translate }}
+ </mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
(ngModelChange)="updateModel.emit({ property: 'width',
@@ -53,14 +66,16 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
isInputValid: width.valid && $event !== null })">
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.positionProps !== undefined"
+ <mat-checkbox *ngIf="combinedProperties.positionProps && !combinedProperties.positionProps.fixedSize"
[checked]="$any(combinedProperties.useMinHeight)"
(change)="updateModel.emit({ property: 'useMinHeight', value: $event.checked })">
{{'propertiesPanel.useMinHeight' | translate }}
</mat-checkbox>
<mat-form-field *ngIf="combinedProperties.positionProps &&
- combinedProperties.positionProps.useMinHeight" appearance="fill">
+ combinedProperties.positionProps.useMinHeight ||
+ combinedProperties.positionProps &&
+ combinedProperties.positionProps.fixedSize" appearance="fill">
<mat-label>{{'propertiesPanel.minHeight' | translate }}</mat-label>
<input matInput type="number" #height="ngModel" min="0"
[ngModel]="combinedProperties.height"
@@ -144,6 +159,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
value: $event,
isInputValid: zIndex.valid && $event !== null })"
matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne.">
+<!-- TODO translate-->
</mat-form-field>
<ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1">
{{'propertiesPanel.alignment' | translate }}
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 9ec1b6107..7062f2764 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -133,7 +133,8 @@
"borderWidth": "Randstärke",
"borderStyle": "Linienstil",
"selectionColor": "Auswahlfarbe",
- "flex": "Dynamisch zentriert"
+ "flex": "Dynamisch zentriert",
+ "fixedSize": "Feste Abmessungen"
},
"player": {
"autoStart": "Autostart",
--
GitLab