From a0bc62f39a388e5822c877e35be6bc48df5df021 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 12 Jul 2024 14:35:39 +0200
Subject: [PATCH] [editor] Allow setting isWidthFixed and maxWidth in
non-expert mode
Since there is not dimension-tab is this mode, the controls are placed
here.
---
.../element-model-properties.component.html | 33 +++++++++++++++++++
.../element-model-properties.component.ts | 10 ++++++
2 files changed, 43 insertions(+)
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
index d85568a28..69c5e2281 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.html
@@ -187,6 +187,39 @@
{{'propertiesPanel.verticalOrientation' | translate }}
</mat-checkbox>
+ <ng-container *ngIf="!unitService.expertMode">
+ <mat-divider [style.margin.px]="15"></mat-divider>
+ <mat-checkbox #maxWidthEnabled [checked]="$any(combinedProperties.dimensions).maxWidth !== null"
+ (change)="toggleProperty('maxWidth', $event.checked)">
+ {{'propertiesPanel.maxWidthEnabled' | translate }}
+ </mat-checkbox>
+ <mat-form-field>
+ <mat-label>
+ {{'propertiesPanel.maxWidth' | translate }}
+ </mat-label>
+ <input matInput type="number" min="0"
+ [disabled]="!maxWidthEnabled.checked"
+ [ngModel]="$any(combinedProperties.dimensions).maxWidth"
+ (ngModelChange)="updateDimensionProperty('maxWidth', $event)">
+ </mat-form-field>
+
+ <ng-container *ngIf="combinedProperties.type === 'drop-list' || combinedProperties.type === 'text-field-simple'">
+ <mat-checkbox #fixedWidth [checked]="$any(combinedProperties.dimensions).isWidthFixed"
+ (change)="updateDimensionProperty('isWidthFixed', $event.checked)">
+ {{'propertiesPanel.isWidthFixed' | translate }}
+ </mat-checkbox>
+ <mat-form-field appearance="fill">
+ <mat-label>{{'propertiesPanel.width' | translate }}</mat-label>
+ <input matInput type="number" min="0"
+ [disabled]="!fixedWidth.checked"
+ [ngModel]="$any(combinedProperties.dimensions).width"
+ (ngModelChange)="updateDimensionProperty('width', $event)"
+ (change)="$any(combinedProperties.dimensions).width =
+ $any(combinedProperties.dimensions).width ? $any(combinedProperties.dimensions).width : 0">
+ </mat-form-field>
+ </ng-container>
+ </ng-container>
+
<mat-checkbox *ngIf="unitService.expertMode" [style.margin-top.px]="20"
[checked]="$any(combinedProperties.isRelevantForPresentationComplete)"
(change)="updateModel
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts
index a38aa5542..cffea84d0 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.ts
@@ -86,6 +86,16 @@ export class ElementModelPropertiesComponent implements OnDestroy {
this.updateModel.emit({ property: 'src', value: mediaSrc });
}
+ toggleProperty(property: string, checked:boolean): void {
+ if (!checked) {
+ this.elementService.updateElementsDimensionsProperty(this.selectionService.getSelectedElements(), property, null);
+ }
+ }
+
+ updateDimensionProperty(property: string, value: any): void {
+ this.elementService.updateElementsDimensionsProperty(this.selectionService.getSelectedElements(), property, value);
+ }
+
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
--
GitLab