From 99f696db27b7bf0f35da8f4df36711e8c544cf2a Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 13 Oct 2021 14:59:59 +0200
Subject: [PATCH] [editor] Fix sizing properties panel
- Fix conditions for showing inputs. As all the properties are mandatory
and have to be available, so no contionals are need here.
- Move CSS into the component (from parent properties component)
---
.../element-properties.component.css | 30 +------------
.../element-sizing-properties.component.ts | 42 ++++++++++---------
2 files changed, 24 insertions(+), 48 deletions(-)
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.css b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.css
index e336ec7db..fe12109fe 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.css
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.css
@@ -1,18 +1,6 @@
-::ng-deep app-element-properties .margin-properties .mat-form-field-infix {
- width: 55px;
-}
-
-::ng-deep app-element-properties .small-input .mat-form-field-infix {
- width: 95px;
- margin: 0 5px;
-}
-
.list-items {
padding: 5px 10px;
border-bottom: solid 1px #ccc;
-}
-
-.list-items {
display: flex;
flex-direction: row;
align-items: center;
@@ -23,19 +11,6 @@
margin-top: 10px
}
-.input-group {
- background-color: rgba(0,0,0,.04);
- margin-bottom: 10px;
-}
-
-.centered-form-field {
- margin-left: 25%;
-}
-
-.right-form-field {
- margin-left: 15%;
-}
-
::ng-deep app-element-properties .mat-tab-label {
min-width: 0 !important;
}
@@ -49,13 +24,10 @@
max-height: 500px;
overflow: auto;
margin-bottom: 10px;
-}
-
-.text-text {
background-color: rgba(0,0,0,.04);
}
-::ng-deep app-element-properties p {
+::ng-deep app-element-properties>p {
text-align: center;
font-weight: bold;
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-sizing-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties/element-sizing-properties.component.ts
index b3dc0807e..739037f3c 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-sizing-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-sizing-properties.component.ts
@@ -9,20 +9,20 @@ import { SelectionService } from '../../../../selection.service';
template: `
<div fxLayout="column">
<ng-container *ngIf="!combinedProperties.dynamicPositioning; else elseBlock">
- <mat-form-field *ngIf="combinedProperties.width" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Breite</mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
(ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.height" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Hoehe</mat-label>
<input matInput type="number" #height="ngModel" min="0"
[ngModel]="combinedProperties.height"
(ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.xPosition" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>X Position</mat-label>
<input matInput type="number" #xPosition="ngModel" min="0"
[ngModel]="combinedProperties.xPosition"
@@ -30,7 +30,7 @@ import { SelectionService } from '../../../../selection.service';
{ property: 'xPosition', value: $event, isInputValid: xPosition.valid })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.yPosition" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Y Position</mat-label>
<input matInput type="number" #yPosition="ngModel" min="0"
[ngModel]="combinedProperties.yPosition"
@@ -39,39 +39,40 @@ import { SelectionService } from '../../../../selection.service';
</mat-form-field>
</ng-container>
<ng-template #elseBlock>
- <mat-form-field *ngIf="combinedProperties.width" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Mindestbreite</mat-label>
<input matInput type="number" #width="ngModel" min="0"
[ngModel]="combinedProperties.width"
(ngModelChange)="updateModel.emit({ property: 'width', value: $event, isInputValid: width.valid })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.height" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Mindesthöhe</mat-label>
<input matInput type="number" #height="ngModel" min="0"
[ngModel]="combinedProperties.height"
(ngModelChange)="updateModel.emit({ property: 'height', value: $event, isInputValid: height.valid })">
</mat-form-field>
+
Grid
<div class="input-group">
<div fxLayoutAlign="row">
- <mat-form-field *ngIf="combinedProperties.gridColumnStart" class="small-input">
+ <mat-form-field class="small-input">
<mat-label>Start-Spalte</mat-label>
<input matInput type="number" [ngModel]="combinedProperties.gridColumnStart"
(ngModelChange)="updateModel.emit({ property: 'gridColumnStart', value: $event })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.gridColumnEnd" class="small-input">
+ <mat-form-field class="small-input">
<mat-label>End-Spalte</mat-label>
<input matInput type="number" [ngModel]="combinedProperties.gridColumnEnd"
(ngModelChange)="updateModel.emit({ property: 'gridColumnEnd', value: $event })">
</mat-form-field>
</div>
<div fxLayoutAlign="row">
- <mat-form-field *ngIf="combinedProperties.gridRowStart" class="small-input">
+ <mat-form-field class="small-input">
<mat-label>Start-Zeile</mat-label>
<input matInput type="number" [ngModel]="combinedProperties.gridRowStart"
(ngModelChange)="updateModel.emit({ property: 'gridRowStart', value: $event })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.gridRowEnd" class="small-input">
+ <mat-form-field class="small-input">
<mat-label>End-Zeile</mat-label>
<input matInput type="number" [ngModel]="combinedProperties.gridRowEnd"
(ngModelChange)="updateModel.emit({ property: 'gridRowEnd', value: $event })">
@@ -81,8 +82,7 @@ import { SelectionService } from '../../../../selection.service';
Abstand
<div class="input-group">
- <mat-form-field *ngIf="combinedProperties.marginTop"
- class="centered-form-field">
+ <mat-form-field class="centered-form-field small-input">
<mat-label>oben</mat-label>
<input matInput type="number" #marginTop="ngModel" min="0"
[ngModel]="combinedProperties.marginTop"
@@ -90,15 +90,14 @@ import { SelectionService } from '../../../../selection.service';
{ property: 'marginTop', value: $event, isInputValid: marginTop.valid })">
</mat-form-field>
<div fxLayoutAlign="row">
- <mat-form-field *ngIf="combinedProperties.marginLeft">
+ <mat-form-field class="small-input">
<mat-label>links</mat-label>
<input matInput type="number" #marginLeft="ngModel" min="0"
[ngModel]="combinedProperties.marginLeft"
(ngModelChange)="updateModel.emit(
{ property: 'marginLeft', value: $event, isInputValid: marginLeft.valid })">
</mat-form-field>
- <mat-form-field *ngIf="combinedProperties.marginRight"
- class="right-form-field">
+ <mat-form-field class="right-form-field small-input">
<mat-label>rechts</mat-label>
<input matInput type="number" #marginRight="ngModel" min="0"
[ngModel]="combinedProperties.marginRight"
@@ -106,8 +105,7 @@ import { SelectionService } from '../../../../selection.service';
{ property: 'marginRight', value: $event, isInputValid: marginRight.valid })">
</mat-form-field>
</div>
- <mat-form-field *ngIf="combinedProperties.marginBottom"
- class="centered-form-field">
+ <mat-form-field class="centered-form-field small-input">
<mat-label>unten</mat-label>
<input matInput type="number" #marginBottom="ngModel" min="0"
[ngModel]="combinedProperties.marginBottom"
@@ -117,7 +115,7 @@ import { SelectionService } from '../../../../selection.service';
</div>
</ng-template>
- <mat-form-field *ngIf="combinedProperties.zIndex" appearance="fill">
+ <mat-form-field appearance="fill">
<mat-label>Z-Index</mat-label>
<input matInput type="number" #zIndex="ngModel" min="0"
[ngModel]="combinedProperties.zIndex"
@@ -142,7 +140,13 @@ import { SelectionService } from '../../../../selection.service';
</div>
</ng-container>
</div>
- `
+ `,
+ styles: [
+ '.centered-form-field {margin-left: 25%}',
+ '.right-form-field {margin-left: 15%}',
+ '.input-group {background-color: rgba(0,0,0,.04); margin-bottom: 10px;}',
+ '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 95px; margin: 0 5px;}'
+ ]
})
export class ElementSizingPropertiesComponent {
@Input() combinedProperties: Record<string, string | number | boolean | string[] | undefined> = {};
--
GitLab