From 7232ab4e59e5bfdfa9f2396cd1fc7733bf05ef4f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 10 Jul 2024 11:14:54 +0200
Subject: [PATCH] [editor] Improve wizard dialog styling
---
.../dialogs/wizards/input.dialog.component.ts | 40 ++++++++++---------
.../wizards/likert.dialog.component.ts | 21 +++++++---
.../dialogs/wizards/radio.dialog.component.ts | 2 +-
.../wizards/radio2.dialog.component.ts | 10 +++--
.../dialogs/wizards/text.dialog.component.ts | 2 +-
.../dialogs/wizards/text2.dialog.component.ts | 8 ++--
6 files changed, 51 insertions(+), 32 deletions(-)
diff --git a/projects/editor/src/app/components/dialogs/wizards/input.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/input.dialog.component.ts
index 71da65b41..32d955dd9 100644
--- a/projects/editor/src/app/components/dialogs/wizards/input.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/input.dialog.component.ts
@@ -9,11 +9,15 @@ import { Component } from '@angular/core';
<aspect-rich-text-editor [(content)]="text" [showReducedControls]="true"
[style.min-height.px]="200"></aspect-rich-text-editor>
+ <mat-divider></mat-divider>
+
<h3>Anzahl Antwortfelder</h3>
<mat-form-field class="align-start">
- <input matInput type="number" min="1" maxlength="1" [(ngModel)]="answerCount">
+ <input matInput type="number" min="1" max="9" [(ngModel)]="answerCount">
</mat-form-field>
+ <mat-divider></mat-divider>
+
<h3>Nummerierung</h3>
<mat-form-field class="align-start">
<mat-select [disabled]="answerCount < 2" [(ngModel)]="numbering">
@@ -24,17 +28,18 @@ import { Component } from '@angular/core';
</mat-select>
</mat-form-field>
- <h3>Antwortlänge</h3>
- <mat-radio-group [(ngModel)]="useTextAreas">
- <mat-radio-button [value]="false">Einzeilig</mat-radio-button>
- <mat-radio-button [value]="true">Mehrzeilig</mat-radio-button>
- </mat-radio-group>
+ <mat-divider></mat-divider>
+ <h3>Antwortfeldgröße</h3>
+ <div class="row">
+ <mat-radio-group [(ngModel)]="useTextAreas">
+ <mat-radio-button [value]="false">Einzeilig</mat-radio-button>
+ <mat-radio-button [value]="true">Mehrzeilig</mat-radio-button>
+ </mat-radio-group>
- <div class="row" [style]="'justify-content: space-evenly;'">
- <div class="column">
- <h3>Länge der Antworten</h3>
+ <ng-container *ngIf="!useTextAreas">
<mat-form-field [style]="'width: 270px;'">
+ <mat-label>Länge der Antworten</mat-label>
<mat-select [(ngModel)]="fieldLength" [disabled]="useTextAreas">
<mat-option [value]="'large'">lang (<12 Wörter)</mat-option>
<mat-option [value]="'medium'">mittel (<7 Wörter)</mat-option>
@@ -42,17 +47,15 @@ import { Component } from '@angular/core';
<mat-option [value]="'very-small'">sehr kurz (< vierstellige Zahl)</mat-option>
</mat-select>
</mat-form-field>
- </div>
-
- <div class="column">
- <h3>Erwartete Zeichenanzahl</h3>
- <mat-form-field>
+ </ng-container>
+ <ng-container *ngIf="useTextAreas">
+ <mat-form-field [style]="'width: 270px;'">
+ <mat-label>Erwartete Zeichenanzahl</mat-label>
<input matInput type="number" maxlength="4"
[(ngModel)]="expectedCharsCount" [disabled]="!useTextAreas">
</mat-form-field>
- </div>
+ </ng-container>
</div>
-
</div>
<div mat-dialog-actions>
<button mat-button
@@ -64,11 +67,10 @@ import { Component } from '@angular/core';
`,
styles: `
.mat-mdc-dialog-content {display: flex; flex-direction: column;}
- /*.mat-mdc-dialog-content *:not(h3, mat-divider) {margin-left: 30px;}*/
+ .mat-mdc-dialog-content > *:not(h3, mat-divider) {margin-left: 30px;}
h3 {text-decoration: underline;}
mat-form-field {align-self: flex-start;}
- .row {display: flex; flex-direction: row;}
- .column {display: flex; flex-direction: column;}
+ .row {display: flex; flex-direction: row; gap: 25px;}
`
})
export class InputWizardDialogComponent {
diff --git a/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
index a0f80e126..113fcb287 100644
--- a/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/likert.dialog.component.ts
@@ -1,38 +1,49 @@
import { Component } from '@angular/core';
import { TextImageLabel } from 'common/models/elements/label-interfaces';
-import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
@Component({
selector: 'aspect-editor-likert-wizard-dialog',
template: `
- <div mat-dialog-title>Richtig/Falsch-Assistent</div>
+ <div mat-dialog-title>Assistent: Richtig/Falsch-Aufgaben</div>
<div mat-dialog-content>
<h3>Text</h3>
- <aspect-rich-text-editor [(content)]="text1"></aspect-rich-text-editor>
+ <aspect-rich-text-editor [(content)]="text1" [style.min-height.px]="300"></aspect-rich-text-editor>
+
+ <mat-divider></mat-divider>
<h3>Satzanfang</h3>
<mat-form-field appearance="fill">
<textarea matInput type="text" [(ngModel)]="text2"></textarea>
</mat-form-field>
+ <mat-divider></mat-divider>
+
<h3>Optionen</h3>
<aspect-option-list-panel class="options" [textFieldLabel]="'Neue Option'"
[itemList]="options"
+ [showImageButton]="true"
[localMode]="true">
</aspect-option-list-panel>
+ <mat-divider></mat-divider>
+
<h3>Zeilen</h3>
<aspect-option-list-panel class="options" [textFieldLabel]="'Neue Zeile'"
[itemList]="rows"
+ [showImageButton]="true"
[localMode]="true">
</aspect-option-list-panel>
-
-
</div>
<div mat-dialog-actions>
<button mat-button [mat-dialog-close]="{ }">{{'confirm' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</div>
+ `,
+ styles: `
+ .mat-mdc-dialog-content {display: flex; flex-direction: column;}
+ .mat-mdc-dialog-content > *:not(h3, mat-divider) {margin-left: 30px;}
+ h3 {text-decoration: underline;}
+ mat-form-field {align-self: flex-start;}
`
})
export class LikertWizardDialogComponent {
diff --git a/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
index 481708a61..d6343ec16 100644
--- a/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/radio.dialog.component.ts
@@ -32,7 +32,7 @@ import { Label } from 'common/models/elements/label-interfaces';
`,
styles: `
.mat-mdc-dialog-content {display: flex; flex-direction: column;}
- /*.mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}*/
+ .mat-mdc-dialog-content > *:not(h3, mat-divider) {margin-left: 30px;}
.input1 {min-height: 200px;}
`
})
diff --git a/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts
index 9511625d5..74788bc0c 100644
--- a/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/radio2.dialog.component.ts
@@ -19,10 +19,14 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
[localMode]="true">
</aspect-option-list-panel>
+ <mat-divider></mat-divider>
+
<h3>Bilder je Zeile</h3>
- <mat-form-field class="align-start">
- <input matInput type="number" min="1" maxlength="1" [(ngModel)]="itemsPerRow">
+ <mat-form-field [style.align-self]="'flex-start'">
+ <input matInput type="number" min="1" max="9" [(ngModel)]="itemsPerRow">
</mat-form-field>
+ <p>4 Bilder pro Zeile: empfohlen für kleine Bilder oder einseitige Aufgaben<br>
+ 2 Bilder pro Zeile: empfohlen für zweiseitige Aufgaben oder große Bilder</p>
</div>
<div mat-dialog-actions>
<button mat-button [mat-dialog-close]="{ label1, options, itemsPerRow }">{{'confirm' | translate }}</button>
@@ -31,7 +35,7 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
`,
styles: `
.mat-mdc-dialog-content {display: flex; flex-direction: column;}
- /*.mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}*/
+ .mat-mdc-dialog-content > *:not(h3, mat-divider) {margin-left: 30px;}
.input1 {min-height: 200px;}
`
})
diff --git a/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
index 0c13d553e..274764a48 100644
--- a/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/text.dialog.component.ts
@@ -39,7 +39,7 @@ import { Component } from '@angular/core';
`,
styles: `
.mat-mdc-dialog-content {display: flex; flex-direction: column;}
- .mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}
+ .mat-mdc-dialog-content *:not(h3, mat-divider) {margin-left: 30px;}
h3 {text-decoration: underline;}
.input1 {min-height: 400px;}
.radios {display: flex; flex-direction: row; gap: 10px;}
diff --git a/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts b/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts
index abf279e1e..06e50ab83 100644
--- a/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/wizards/text2.dialog.component.ts
@@ -8,8 +8,10 @@ import { Component } from '@angular/core';
<h3>Text</h3>
<aspect-rich-text-editor class="input1" [(content)]="text1"></aspect-rich-text-editor>
- <h3>Tooltip</h3>
- <mat-checkbox [(ngModel)]="showHelper" [style]="'margin-bottom: 20px;'">
+ <mat-divider></mat-divider>
+
+ <h3>Tooltipp</h3>
+ <mat-checkbox [(ngModel)]="showHelper">
Anzeigen
</mat-checkbox>
</div>
@@ -23,7 +25,7 @@ import { Component } from '@angular/core';
`,
styles: `
.mat-mdc-dialog-content {display: flex; flex-direction: column;}
- .mat-mdc-dialog-content *:not(h3, mat-divider) {padding-left: 30px;}
+ .mat-mdc-dialog-content *:not(h3, mat-divider) {margin-left: 30px;}
h3 {text-decoration: underline;}
.input1 {min-height: 400px;}
`
--
GitLab