Rework DropList option dialog

projects/editor/src/app/components/dialogs/drop-list-option-edit-dialog.component.ts

@@ -6,69 +6,102 @@ import { DragNDropValueObject } from 'common/models/elements/label-interfaces';
 @Component({
   selector: 'aspect-drop-list-option-edit-dialog',
   template: `
-    <mat-dialog-content class="fx-column-start-stretch fx-gap-20">
-      <mat-form-field>
-        <mat-label>{{'text' | translate }}</mat-label>
-        <input #textField matInput type="text" [value]="data.value.text">
-      </mat-form-field>
-      <div *ngIf="!audioSrc" class="fx-column-start-stretch fx-gap-3">
-        <button mat-raised-button (click)="loadImage()">{{ 'loadImage' | translate }}</button>
-        <button mat-raised-button (click)="imgSrc = null">{{ 'removeImage' | translate }}</button>
-        <img [src]="imgSrc"
-             [style.object-fit]="'scale-down'"
-             [width]="200">
-      </div>
-      <div *ngIf="!imgSrc" class="fx-column-start-stretch fx-gap-3">
-        <button mat-raised-button (click)="loadAudio()">
-          {{(audioSrc ? 'changeAudio' : 'loadAudio') | translate }}
-        </button>
-        <button mat-raised-button (click)="audioSrc = null">
-          {{ 'removeAudio' | translate }}
-        </button>
-      </div>
-      <mat-form-field>
-        <mat-label>{{'id' | translate }}</mat-label>
-        <input #idField matInput type="text" [value]="data.value.id">
-      </mat-form-field>
-    </mat-dialog-content>
-    <mat-dialog-actions>
-      <button mat-button [mat-dialog-close]="{
-        text: textField.value,
-        imgSrc: imgSrc,
-        audioSrc: audioSrc,
-        id: idField.value
-      }">
-        {{'save' | translate }}
-      </button>
-      <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
-    </mat-dialog-actions>
+    <div class="wrapper">
+      <h2 mat-dialog-title>Ablegelistenoption anpassen</h2>
+      <mat-dialog-content class="content">
+        <mat-form-field>
+          <mat-label>{{'text' | translate }}</mat-label>
+          <input matInput type="text" [(ngModel)]="newLabel.text">
+        </mat-form-field>
+        <mat-form-field>
+          <mat-label>{{'id' | translate }}</mat-label>
+          <input matInput type="text" [(ngModel)]="newLabel.id">
+        </mat-form-field>
+
+        <div class="media-panels">
+          <fieldset class="image-panel-controls">
+            <legend>Bild</legend>
+            <button mat-raised-button (click)="loadImage()">{{ 'loadImage' | translate }}</button>
+            <button mat-raised-button [disabled]="newLabel.imgSrc === null" (click)="newLabel.imgSrc = null">
+              {{ 'removeImage' | translate }}
+            </button>
+            <mat-form-field>
+              <mat-label>{{'imagePosition' | translate }}</mat-label>
+              <mat-select [(ngModel)]="newLabel.imgPosition"
+                          [disabled]="newLabel.imgSrc == null">
+                <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
+                            [value]="option">
+                  {{ option | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </fieldset>
+
+          <fieldset>
+            <legend>Audio</legend>
+            <div class="image-panel-controls">
+              <button mat-raised-button (click)="loadAudio()">
+                {{(newLabel.audioSrc ? 'changeAudio' : 'loadAudio') | translate }}
+              </button>
+              <button mat-raised-button [disabled]="newLabel.audioSrc === null" (click)="newLabel.audioSrc = null">
+                {{ 'removeAudio' | translate }}
+              </button>
+            </div>
+          </fieldset>
+        </div>
+
+        <fieldset [style.height.px]="180" [style.margin-top.px]="10">
+          <legend>Vorschau</legend>
+          <aspect-text-image-panel [label]="newLabel" [style.justify-content]="'center'"></aspect-text-image-panel>
+        </fieldset>
+
+      </mat-dialog-content>
+      <mat-dialog-actions>
+        <button mat-button [mat-dialog-close]="newLabel">{{'save' | translate }}</button>
+        <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
+      </mat-dialog-actions>
+    </div>
   `,
   styles: [`
-    .fx-gap-3 {
-      gap: 3px;
-    }
-    .fx-gap-20 {
-      gap: 20px;
+    .wrapper {
+      display:flex;
+      flex-direction: column;
+      height: 100%;
     }
-    .fx-column-start-stretch {
-      box-sizing: border-box;
+    .content {
       display: flex;
       flex-direction: column;
       justify-content: flex-start;
       align-items: stretch;
     }
+    .image-panel-controls {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+    aspect-text-image-panel {
+      margin-left: auto;
+      margin-right: auto;
+    }
+    .media-panels {
+      display: flex;
+      flex-direction: row;
+    }
+    .media-panels fieldset {
+      width: 50%;
+    }
   `]
 })
 export class DropListOptionEditDialogComponent {
+  newLabel = { ...this.data.value };
+
   constructor(@Inject(MAT_DIALOG_DATA) public data: { value: DragNDropValueObject }) { }
-  imgSrc: string | null = this.data.value.imgSrc;
-  audioSrc: string | null = this.data.value.audioSrc;
 
   async loadImage(): Promise<void> {
-    this.imgSrc = await FileService.loadImage();
+    this.newLabel.imgSrc = await FileService.loadImage();
   }
 
   async loadAudio() {
-    this.audioSrc = await FileService.loadAudio();
+    this.newLabel.audioSrc = await FileService.loadAudio();
   }
 }

projects/editor/src/app/services/dialog.service.ts

@@ -87,7 +87,9 @@ export class DialogService {
 
   showDropListOptionEditDialog(value: DragNDropValueObject): Observable<DragNDropValueObject> {
     const dialogRef = this.dialog.open(DropListOptionEditDialogComponent, {
-      data: { value }
+      data: { value },
+      height: '700px',
+      width: '600px'
     });
     return dialogRef.afterClosed();
   }