From 2dd83bd18f4e8067ea8c8c4945dfeebfc6e05fea Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 29 Nov 2021 12:04:15 +0100
Subject: [PATCH] [editor] Fix property panels to work correctly with props in
variable
---
.../element-sizing-properties.component.ts | 12 +++++------
.../element-style-properties.component.ts | 20 +++++++++----------
2 files changed, 16 insertions(+), 16 deletions(-)
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 0f35d0b60..ba71e8d08 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
@@ -9,7 +9,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
selector: 'app-element-sizing-properties',
template: `
<div fxLayout="column">
- <ng-container *ngIf="!combinedProperties.dynamicPositioning; else elseBlock">
+ <ng-container *ngIf="!combinedProperties.positionProps?.dynamicPositioning; else elseBlock">
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.width' | translate }}</mat-label>
<input matInput type="number" #width="ngModel" min="0"
@@ -27,7 +27,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
isInputValid: height.valid && $event !== null})">
</mat-form-field>
- <mat-form-field appearance="fill">
+ <mat-form-field *ngIf="combinedProperties.positionProps" appearance="fill">
<mat-label>{{'propertiesPanel.xPosition' | translate }}</mat-label>
<input matInput type="number" #xPosition="ngModel" min="0"
[ngModel]="combinedProperties.positionProps?.xPosition"
@@ -35,7 +35,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
{ property: 'xPosition', value: $event, isInputValid: xPosition.valid && $event !== null })">
</mat-form-field>
- <mat-form-field appearance="fill">
+ <mat-form-field *ngIf="combinedProperties.positionProps" appearance="fill">
<mat-label>{{'propertiesPanel.yPosition' | translate }}</mat-label>
<input matInput type="number" #yPosition="ngModel" min="0"
[ngModel]="combinedProperties.positionProps?.yPosition"
@@ -44,7 +44,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
</mat-form-field>
</ng-container>
<ng-template #elseBlock>
- <mat-form-field appearance="fill">
+ <mat-form-field appearance="fill" *ngIf="combinedProperties.positionProps !== undefined">
<mat-label>{{'propertiesPanel.minWidth' | translate }}</mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
@@ -53,7 +53,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
isInputValid: width.valid && $event !== null })">
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.positionProps?.useMinHeight !== undefined"
+ <mat-checkbox *ngIf="combinedProperties.positionProps !== undefined"
[checked]="$any(combinedProperties.positionProps?.useMinHeight)"
(change)="updateModel.emit({ property: 'useMinHeight', value: $event.checked })">
{{'propertiesPanel.useMinHeight' | translate }}
@@ -135,7 +135,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
</div>
</ng-template>
- <mat-form-field appearance="fill">
+ <mat-form-field *ngIf="combinedProperties.positionProps" appearance="fill">
<mat-label>{{'propertiesPanel.zIndex' | translate }}</mat-label>
<input matInput type="number" #zIndex="ngModel" min="0"
[ngModel]="combinedProperties.positionProps?.zIndex"
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
index b8b01fbe0..740e5ac6e 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
@@ -26,39 +26,39 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
(input)="updateModel.emit({ property: 'itemBackgroundColor', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.surfaceProps?.backgroundColor !== undefined"
+ <mat-form-field *ngIf="combinedProperties.surfaceProps"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.backgroundColor' | translate }}</mat-label>
<input matInput type="color" [value]="combinedProperties.surfaceProps?.backgroundColor"
(input)="updateModel.emit({ property: 'backgroundColor', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.surfaceProps?.backgroundColor !== undefined"
+ <mat-form-field *ngIf="combinedProperties.surfaceProps"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.backgroundColor' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.surfaceProps?.backgroundColor"
(input)="updateModel.emit({ property: 'backgroundColor', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.fontProps?.fontColor !== undefined"
+ <mat-form-field *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.fontColor !== undefined"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.fontColor' | translate }}</mat-label>
<input matInput type="color" [value]="combinedProperties.fontProps?.fontColor"
(input)="updateModel.emit({ property: 'fontColor', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.fontProps?.fontColor !== undefined"
+ <mat-form-field *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.fontColor !== undefined"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.fontColor' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.fontProps?.fontColor"
(input)="updateModel.emit({ property: 'fontColor', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.fontProps?.font !== undefined"
+ <mat-form-field *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.font !== undefined"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.font' | translate }}</mat-label>
<input matInput type="text" [value]="combinedProperties.fontProps?.font"
(input)="updateModel.emit({ property: 'font', value: $any($event.target).value })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.fontProps?.fontSize !== undefined"
+ <mat-form-field *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.fontSize !== undefined"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.fontSize' | translate }}</mat-label>
<input matInput type="number" #fontSize="ngModel" min="0"
@@ -67,7 +67,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
value: $event,
isInputValid: fontSize.valid && $event !== null})">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.fontProps?.lineHeight !== undefined"
+ <mat-form-field *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.lineHeight !== undefined"
appearance="fill" class="mdInput textsingleline">
<mat-label>{{'propertiesPanel.lineHeight' | translate }}</mat-label>
<input matInput type="number" #lineHeight="ngModel" min="0"
@@ -77,17 +77,17 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
isInputValid: lineHeight.valid && $event !== null })">
</mat-form-field>
- <mat-checkbox *ngIf="combinedProperties.fontProps?.bold !== undefined"
+ <mat-checkbox *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.bold !== undefined"
[checked]="$any(combinedProperties.fontProps?.bold)"
(change)="updateModel.emit({ property: 'bold', value: $event.checked })">
{{'propertiesPanel.bold' | translate }}
</mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.fontProps?.italic !== undefined"
+ <mat-checkbox *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.italic !== undefined"
[checked]="$any(combinedProperties.fontProps?.italic)"
(change)="updateModel.emit({ property: 'italic', value: $event.checked })">
{{'propertiesPanel.italic' | translate }}
</mat-checkbox>
- <mat-checkbox *ngIf="combinedProperties.fontProps?.underline !== undefined"
+ <mat-checkbox *ngIf="combinedProperties.fontProps && combinedProperties.fontProps.underline !== undefined"
[checked]="$any(combinedProperties.fontProps?.underline)"
(change)="updateModel.emit({ property: 'underline', value: $event.checked })">
{{'propertiesPanel.underline' | translate }}
--
GitLab