From 8643cef43156bbf325bfcba7baab63f0970f1ad2 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 9 Aug 2022 19:34:13 +0200
Subject: [PATCH] make LikertRow rowLabel rich text and overhaul edit dialog
---
.../likert-radio-button-group.component.ts | 4 +-
.../likert-row-edit-dialog.component.ts | 90 +++++++++----------
.../editor/src/app/services/dialog.service.ts | 4 +-
.../rich-text-editor-simple.component.css | 3 +-
4 files changed, 50 insertions(+), 51 deletions(-)
diff --git a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
index 62fb691a6..e802b20e6 100644
--- a/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
+++ b/projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
-import { FormElementComponent } from '../../../directives/form-element-component.directive';
+import { FormElementComponent } from 'common/directives/form-element-component.directive';
import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
@Component({
@@ -23,7 +23,7 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
(elementModel.rowLabel.imgPosition === 'above' || elementModel.rowLabel.imgPosition === 'left')"
[src]="elementModel.rowLabel.imgSrc | safeResourceUrl" alt="Image Placeholder"
[style.object-fit]="'scale-down'" [style.max-width.%]="100">
- <ng-container>{{elementModel.rowLabel.text}}</ng-container>
+ <div [innerHTML]="elementModel.rowLabel.text"></div>
<img *ngIf="elementModel.rowLabel.imgSrc &&
(elementModel.rowLabel.imgPosition === 'below' || elementModel.rowLabel.imgPosition === 'right')"
[src]="elementModel.rowLabel.imgSrc | safeResourceUrl" alt="Image Placeholder"
diff --git a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
index f5093132a..038fb8f3d 100644
--- a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
@@ -8,35 +8,31 @@ import { TextLabel } from 'common/models/elements/element';
selector: 'aspect-likert-row-edit-dialog',
template: `
<mat-dialog-content fxLayout="column">
- <mat-form-field>
- <mat-label>{{'text' | translate }}</mat-label>
- <input #textField matInput type="text" [value]="data.row.rowLabel.text">
- </mat-form-field>
+ <aspect-rich-text-editor-simple [(content)]="newLikertRow.rowLabel.text">
+ </aspect-rich-text-editor-simple>
- <mat-form-field>
+ <mat-form-field [style.margin-top.px]="15">
<mat-label>{{'id' | translate }}</mat-label>
- <input #idField matInput type="text" [value]="data.row.id">
+ <input matInput type="text" [(ngModel)]="newLikertRow.id">
</mat-form-field>
- <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">
+ <mat-checkbox [(ngModel)]="newLikertRow.readOnly">
+ {{'propertiesPanel.readOnly' | translate }}
+ </mat-checkbox>
<mat-form-field appearance="fill">
- <mat-label>{{'imagePosition' | translate }}</mat-label>
- <mat-select #positionSelect [value]="data.row.rowLabel.imgPosition">
- <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
- [value]="option">
- {{ option | translate }}
+ <mat-label>{{'preset' | translate }}</mat-label>
+ <mat-select [(ngModel)]="newLikertRow.value">
+ <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
+ <mat-option *ngFor="let column of data.options; let i = index" [value]="i">
+ {{column.text}} (Index: {{i}})
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>{{'verticalButtonAlignment' | translate }}</mat-label>
- <mat-select #verticalButtonAlignmentSelect [value]="data.row.verticalButtonAlignment">
+ <mat-select [(ngModel)]="newLikertRow.verticalButtonAlignment">
<mat-option *ngFor="let option of ['auto', 'center']"
[value]="option">
{{ option | translate }}
@@ -44,45 +40,49 @@ import { TextLabel } from 'common/models/elements/element';
</mat-select>
</mat-form-field>
- <mat-form-field appearance="fill">
- <mat-label>{{'preset' | translate }}</mat-label>
- <mat-select #valueField [value]="data.row.value">
- <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
- <mat-option *ngFor="let column of data.columns; let i = index" [value]="i">
- {{column.text}} (Index: {{i}})
- </mat-option>
- </mat-select>
- </mat-form-field>
+ <div fxLayout="row" fxLayoutAlign="space-between center">
+ <div fxLayout="column" fxLayoutGap="10px">
+ <button mat-raised-button (click)="loadImage()">
+ {{ 'loadImage' | translate }}</button>
+ <button mat-raised-button (click)="newLikertRow.rowLabel.imgSrc = null">
+ {{ 'removeImage' | translate }}</button>
+ <mat-form-field>
+ <mat-label>{{'imagePosition' | translate }}</mat-label>
+ <mat-select [(ngModel)]="newLikertRow.rowLabel.imgPosition">
+ <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
+ [value]="option">
+ {{ option | translate }}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+
+ <img [src]="newLikertRow.rowLabel.imgSrc"
+ [style.object-fit]="'scale-down'" [width]="200">
+ </div>
- <mat-checkbox #readOnlyField [checked]="data.row.readOnly">
- {{'propertiesPanel.readOnly' | translate }}
- </mat-checkbox>
</mat-dialog-content>
<mat-dialog-actions>
- <button mat-button
- [mat-dialog-close]="{
- rowLabel: {
- text: textField.value,
- imgSrc: imgSrc,
- position: positionSelect.value
- },
- id: idField.value,
- value: valueField.value,
- verticalButtonAlignment: verticalButtonAlignmentSelect.value,
- readOnly: readOnlyField.value
- }">
+ <button mat-button [mat-dialog-close]="newLikertRow">
{{'save' | translate }}
</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
- `
+ `,
+ styles: [
+ 'mat-checkbox {margin-bottom: 15px;}'
+ ]
})
export class LikertRowEditDialogComponent {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, columns: TextLabel[] }) { }
- imgSrc: string | null = this.data.row.rowLabel.imgSrc;
+ constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, options: TextLabel[] }) { }
+
+ newLikertRow = {
+ ...this.data.row,
+ rowLabel: { ...this.data.row.rowLabel }
+ };
async loadImage(): Promise<void> {
- this.imgSrc = await FileService.loadImage();
+ this.newLikertRow.rowLabel.imgSrc = await FileService.loadImage();
}
}
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index b8291f50d..65b1f9f37 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -93,9 +93,9 @@ export class DialogService {
return dialogRef.afterClosed();
}
- showLikertRowEditDialog(row: LikertRowElement, columns: TextImageLabel[]): Observable<LikertRowElement> {
+ showLikertRowEditDialog(row: LikertRowElement, options: TextImageLabel[]): Observable<LikertRowElement> {
const dialogRef = this.dialog.open(LikertRowEditDialogComponent, {
- data: { row, columns }
+ data: { row, options }
});
return dialogRef.afterClosed();
}
diff --git a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
index cd115f951..4790c9456 100644
--- a/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
+++ b/projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css
@@ -1,5 +1,5 @@
:host ::ng-deep div.ProseMirror {
- min-height: 100px;
+ min-height: 60px;
border: 1px solid;
}
@@ -9,7 +9,6 @@
}
.editor-control-panel {
- margin-bottom: 20px;
background: linear-gradient(to top right, #FFF5F8, #FAFAFA);
font: unset;
max-width: 1000px;
--
GitLab