From fcccde58baedc5239a4803d75b284928040b7bd4 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 5 May 2023 12:28:57 +0200
Subject: [PATCH] [editor] Replace Flex layout module with classes in
HotspotEditDialogC.
- Reformat styles
---
.../dialogs/hotspot-edit-dialog.component.ts | 73 ++++++++++++++-----
1 file changed, 56 insertions(+), 17 deletions(-)
diff --git a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
index 52698c567..447fb7bd5 100644
--- a/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/hotspot-edit-dialog.component.ts
@@ -5,39 +5,39 @@ import { Hotspot } from 'common/models/elements/element';
@Component({
selector: 'aspect-hotspot-edit-dialog',
template: `
- <mat-dialog-content fxLayout="column" fxLayoutGap="10px">
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-dialog-content class="fx-column-start-stretch fx-fix-gap-10">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.top' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.top">
</mat-form-field>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.left' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.left">
</mat-form-field>
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.width' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.width">
</mat-form-field>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.height' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.height">
</mat-form-field>
</div>
- <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center">
- <mat-radio-group [(ngModel)]="newHotspot.shape" fxFlex="50" fxLayout='column' fxLayoutGap="5px">
+ <div class="fx-row-space-between-center fx-fix-gap-10">
+ <mat-radio-group [(ngModel)]="newHotspot.shape" class="fx-column-start-stretch fx-flex-50 fx-fix-gap-5">
<label>{{'hotspot.shape' | translate}}</label>
<mat-radio-button value='ellipse'>{{'hotspot.ellipse' | translate}}</mat-radio-button>
<mat-radio-button value='rectangle'>{{'hotspot.rectangle' | translate}}</mat-radio-button>
<mat-radio-button value='triangle'>{{'hotspot.triangle' | translate}}</mat-radio-button>
</mat-radio-group>
- <mat-form-field appearance="fill" fxFlex="50">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.borderWidth' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.borderWidth">
@@ -45,8 +45,8 @@ import { Hotspot } from 'common/models/elements/element';
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" class="mdInput textsingleline">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field appearance="fill" class="mdInput textsingleline fx-flex-50">
<mat-label>{{'hotspot.backgroundColor' | translate }}</mat-label>
<input matInput type="text" [(ngModel)]="newHotspot.backgroundColor">
<button mat-icon-button matSuffix (click)="backgroundColorInput.click()">
@@ -55,7 +55,7 @@ import { Hotspot } from 'common/models/elements/element';
</mat-form-field>
<input matInput type="color" hidden #backgroundColorInput [(ngModel)]="newHotspot.backgroundColor">
- <mat-form-field appearance="fill" class="mdInput textsingleline">
+ <mat-form-field appearance="fill" class="mdInput textsingleline fx-flex-50">
<mat-label>{{'hotspot.borderColor' | translate }}</mat-label>
<input matInput type="text" [(ngModel)]="newHotspot.borderColor">
<button mat-icon-button matSuffix (click)="borderColorInput.click()">
@@ -65,13 +65,13 @@ import { Hotspot } from 'common/models/elements/element';
<input matInput type="color" hidden #borderColorInput [(ngModel)]="newHotspot.borderColor">
</div>
- <div fxLayout="row" fxLayoutGap="10px">
- <mat-form-field appearance="fill" fxFlex="50">
+ <div class="fx-row-start-stretch fx-fix-gap-10">
+ <mat-form-field class="fx-flex-50" appearance="fill">
<mat-label>{{ 'hotspot.rotation' | translate }}</mat-label>
<input matInput type="number" min="0"
[(ngModel)]="newHotspot.rotation">
</mat-form-field>
- <div fxFlex="50">
+ <div class="fx-flex-50">
<mat-checkbox [checked]="newHotspot.value"
(change)="newHotspot.value = $event.checked">
{{ 'hotspot.value' | translate }}
@@ -87,7 +87,46 @@ import { Hotspot } from 'common/models/elements/element';
<button mat-button [mat-dialog-close]="newHotspot">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
- `
+ `,
+ styles: [`
+ .fx-column-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: start;
+ align-items: stretch;
+ }
+
+ .fx-row-start-stretch {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ align-items: stretch;
+ }
+
+ .fx-row-space-between-center {
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .fx-fix-gap-10 {
+ gap: 10px;
+ }
+
+ .fx-fix-gap-5 {
+ gap: 5px;
+ }
+
+ .fx-flex-50 {
+ flex: 1 1 100%;
+ box-sizing: border-box;
+ max-width: 50%;
+ }
+ `]
})
export class HotspotEditDialogComponent {
constructor(@Inject(MAT_DIALOG_DATA) public data: { hotspot: Hotspot }) { }
--
GitLab