From d6d223dd9c0a9313f1a0fc49a45aef879a4076f2 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 18 Nov 2021 13:11:16 +0100
Subject: [PATCH] Refactor likert layout and add first column ratio prop
- Images now scale up and down depending on the available space.
- The new property controls the first (column) size parameter for the
grid. The others are fixed at 1. Decimal values are allowed for
fine-tuned control.
This prop is passed on to the child likert-row component. It uses the
same grid and needs this info for proper alignment with the column
headers.
- Remove unnecessary div in likert
---
.../likert-radio-button-group.component.ts | 4 +++-
.../compound-elements/likert.component.ts | 16 +++++-----------
.../compound-elements/likert-element-row.ts | 1 +
.../models/compound-elements/likert-element.ts | 1 +
...ement-model-properties-component.component.ts | 7 +++++++
projects/editor/src/assets/i18n/de.json | 2 ++
6 files changed, 19 insertions(+), 12 deletions(-)
diff --git a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts b/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
index 0cc99391b..9f543c92d 100644
--- a/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
+++ b/projects/common/element-components/compound-elements/likert-radio-button-group.component.ts
@@ -9,7 +9,8 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
<mat-radio-group [style.display]="'grid'"
[formControl]="elementFormControl"
[value]="elementModel.value"
- [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columnCount)">
+ [style.grid-template-columns]="firstColumnSizeRatio + 'fr ' +
+ '1fr '.repeat(elementModel.columnCount)">
<div [style.grid-column-start]="1"
[style.grid-column-end]="2"
[style.grid-row-start]="1"
@@ -31,4 +32,5 @@ import { LikertElementRow } from '../../models/compound-elements/likert-element-
export class LikertRadioButtonGroupComponent extends FormElementComponent {
@Input() elementModel!: LikertElementRow;
@Input() parentForm!: FormGroup;
+ @Input() firstColumnSizeRatio!: number;
}
diff --git a/projects/common/element-components/compound-elements/likert.component.ts b/projects/common/element-components/compound-elements/likert.component.ts
index 3a4ff074e..d343cf66b 100644
--- a/projects/common/element-components/compound-elements/likert.component.ts
+++ b/projects/common/element-components/compound-elements/likert.component.ts
@@ -12,7 +12,9 @@ import { CompoundElementComponent } from './compound-element.directive';
selector: 'app-likert',
template: `
<div class="mat-typography"
- [style.display]="'grid'" [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columns.length)"
+ [style.display]="'grid'"
+ [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
+ '1fr '.repeat(elementModel.columns.length)"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
@@ -21,12 +23,6 @@ import { CompoundElementComponent } from './compound-element.directive';
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
- <div class="headings" [style.display]="'grid'"
- [style.grid-template-columns]="'5fr ' + '2fr '.repeat(elementModel.columns.length)"
- [style.grid-column-start]="1"
- [style.grid-column-end]="elementModel.columns.length + 2"
- [style.grid-row-start]="1"
- [style.grid-row-end]="2">
<div *ngFor="let column of elementModel.columns; let i = index" class="columns"
fxLayout="column"
[style.grid-column-start]="2 + i"
@@ -39,18 +35,17 @@ import { CompoundElementComponent } from './compound-element.directive';
<img *ngIf="column.imgSrc && column.position === 'below'"
[src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder">
</div>
- </div>
<ng-container *ngFor="let row of elementModel.rows; let i = index">
<app-likert-radio-button-group
[style.background-color]="elementModel.lineColoring && i % 2 === 0 ? elementModel.lineColoringColor : ''"
- [style.display]="'grid'"
[style.grid-column-start]="1"
[style.grid-column-end]="elementModel.columns.length + 2"
[style.grid-row-start]="2 + i"
[style.grid-row-end]="3 + i"
[style.padding.px]="3"
[elementModel]="row"
+ [firstColumnSizeRatio]="elementModel.firstColumnSizeRatio"
[parentForm]="parentForm"
(elementValueChanged)="elementValueChanged.emit($event)">
</app-likert-radio-button-group>
@@ -58,8 +53,7 @@ import { CompoundElementComponent } from './compound-element.directive';
</div>
`,
styles: [
- '.headings {padding-bottom: 10px}',
- '.headings img {object-fit: none}',
+ 'img {object-fit: contain; max-height: 100%; max-width: 100%; margin: 10px}',
'.columns {text-align: center;}',
'::ng-deep app-likert mat-radio-button span.mat-radio-container {left: calc(50% - 10px)}'
]
diff --git a/projects/common/models/compound-elements/likert-element-row.ts b/projects/common/models/compound-elements/likert-element-row.ts
index de57211a8..44cfa1745 100644
--- a/projects/common/models/compound-elements/likert-element-row.ts
+++ b/projects/common/models/compound-elements/likert-element-row.ts
@@ -4,6 +4,7 @@ import { LikertRow } from '../../interfaces/UIElementInterfaces';
export class LikertElementRow extends InputElement implements LikertRow {
text: string = '';
columnCount: number = 0;
+ firstColumnSizeRatio: number = 5;
constructor(serializedElement: UIElement) {
super(serializedElement);
diff --git a/projects/common/models/compound-elements/likert-element.ts b/projects/common/models/compound-elements/likert-element.ts
index 8126c9076..04236cdcd 100644
--- a/projects/common/models/compound-elements/likert-element.ts
+++ b/projects/common/models/compound-elements/likert-element.ts
@@ -6,6 +6,7 @@ import { initFontElement, initSurfaceElement } from '../../util/unit-interface-i
export class LikertElement extends UIElement implements FontElement, SurfaceUIElement {
rows: LikertElementRow[] = [];
columns: LikertColumn[] = [];
+ firstColumnSizeRatio: number = 5;
lineColoring: boolean = true;
lineColoringColor: string = '#D0F6E7';
readOnly: boolean = false;
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts
index fd0e7649e..7341691be 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts
@@ -489,6 +489,13 @@ import { FileService } from '../../../../../../../common/file.service';
property: 'highlightReceivingDropListColor',
value: $any($event.target).value })">
</mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.firstColumnSizeRatio != null"
+ matTooltip="{{'propertiesPanel.firstColumnSizeRatioExplanation' | translate }}"
+ appearance="fill" class="mdInput textsingleline">
+ <mat-label>{{'propertiesPanel.firstColumnSizeRatio' | translate }}</mat-label>
+ <input matInput type="number" [value]="combinedProperties.firstColumnSizeRatio"
+ (input)="updateModel.emit({ property: 'firstColumnSizeRatio', value: $any($event.target).value })">
+ </mat-form-field>
</div>
`,
styleUrls: ['./element-model-properties.component.css']
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 37a70a329..237c76f48 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -114,6 +114,8 @@
"itemBackgroundColor": "Hintergrundfarbe der Elemente",
"highlightReceivingDropList": "Potentielle Ablagen hervorheben",
"highlightReceivingDropListColor": "Farbe der Hervorhebung",
+ "firstColumnSizeRatio": "Anteil der ersten Spalte",
+ "firstColumnSizeRatioExplanation": "Größenverhältnis der ersten Spalte zu allen anderen",
"duplicateElement": "Element duplizieren",
"deleteElement": "Element löschen",
"noElementSelected": "Kein Element ausgewählt"
--
GitLab