From eee1f1f2d6a10bbafb8ec0c1979cdac1e6bf6d2a Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 5 May 2023 10:59:09 +0200
Subject: [PATCH] [editor] Replace Flex layout module with classes in
ElementModelProp.
---
.../element-model-properties.component.css | 16 ++++++++++++++++
.../element-model-properties.component.html | 14 +++++++++-----
2 files changed, 25 insertions(+), 5 deletions(-)
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
index 7b3c282c8..5b88bc5b9 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
@@ -32,3 +32,19 @@ button:not(.media-src-button):not(.mat-mini-fab):not(.mat-icon-button) {
:host ::ng-deep .option-draggable:last-child {
border: none;
}
+
+.fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+}
+
+.fx-align-self-center {
+ align-self: center;
+}
+
+.fx-align-self-start {
+ align-self: start;
+}
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 e5ad7f692..d631783ed 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
@@ -1,4 +1,4 @@
-<div fxLayout="column">
+<div class='fx-column-start-stretch'>
<mat-form-field appearance="fill">
<mat-label>{{'propertiesPanel.id' | translate }}</mat-label>
<input matInput type="text" *ngIf="selectedElements.length === 1" [value]="combinedProperties.id"
@@ -40,19 +40,22 @@
(updateModel)="updateModel.emit($event)"></aspect-border-properties>
<button *ngIf="combinedProperties.document"
- mat-raised-button fxFlexAlign="center"
+ class="fx-align-self-center"
+ mat-raised-button
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
Text editieren
</button>
<button *ngIf="combinedProperties.src"
- mat-fab color="primary" fxFlexAlign="center" class="media-src-button"
+ class="media-src-button fx-align-self-center"
+ mat-fab color="primary"
[matTooltip]="'Medienquelle ändern'" [matTooltipPosition]="'right'"
(click)="changeMediaSrc(combinedProperties.type)">
<mat-icon>upload_file</mat-icon>
</button>
<button *ngIf="combinedProperties.player"
- mat-raised-button fxFlexAlign="center"
+ class="fx-align-self-center"
+ mat-raised-button
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
Medienoptionen
</button>
@@ -112,7 +115,8 @@
<ng-container *ngIf="combinedProperties.type === 'checkbox'">
{{'preset' | translate }}
- <mat-button-toggle-group [value]="combinedProperties.value" fxFlexAlign="start"
+ <mat-button-toggle-group class="fx-align-self-start"
+ [value]="combinedProperties.value"
(change)="updateModel.emit({ property: 'value', value: $event.value })">
<mat-button-toggle [value]="true">{{'propertiesPanel.true' | translate }}</mat-button-toggle>
<mat-button-toggle [value]="false">{{'propertiesPanel.false' | translate }}</mat-button-toggle>
--
GitLab