From 70029bd4c56a7f33adbe4e0252c445cab51793a5 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 5 Dec 2023 21:10:23 +0100
Subject: [PATCH] MathTable: Add coloring property to lower helper row
#588
---
docs/unit_definition_changelog.txt | 2 ++
.../input-elements/math-table.component.ts | 5 +++--
.../models/elements/input-elements/math-table.ts | 15 ++++++++++-----
.../models/elements/property-group-interfaces.ts | 1 +
.../element-style-properties.component.ts | 14 ++++++++++++++
projects/editor/src/assets/i18n/de.json | 3 ++-
6 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/docs/unit_definition_changelog.txt b/docs/unit_definition_changelog.txt
index 944f16f9e..cf31299cb 100644
--- a/docs/unit_definition_changelog.txt
+++ b/docs/unit_definition_changelog.txt
@@ -135,3 +135,5 @@ iqb-aspect-definition@1.0.0
4.3.0
- Geometry: new property: trackedVariables
+- new property in "OtherStyles": lastHelperRowColor
+- MathTable: new styling property: lastHelperRowColor
diff --git a/projects/common/components/input-elements/math-table.component.ts b/projects/common/components/input-elements/math-table.component.ts
index 3746c3a33..c1bae15ba 100644
--- a/projects/common/components/input-elements/math-table.component.ts
+++ b/projects/common/components/input-elements/math-table.component.ts
@@ -16,10 +16,11 @@ import { ValueChangeElement } from 'common/models/elements/element';
[style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
[style.font-style]="elementModel.styling.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.styling.underline ? 'underline' : ''">
- <tr *ngFor="let row of tableModel"
+ <tr *ngFor="let row of tableModel; let index = index"
[style.height.px]="row.cells.length && row.isHelperRow ? elementModel.styling.fontSize * 1.5 :
elementModel.styling.fontSize * 2"
- [style.font-size]="row.cells.length && row.isHelperRow && '70%'">
+ [style.font-size]="row.cells.length && row.isHelperRow && '70%'"
+ [style.background-color]="index === tableModel.length - 2 ? elementModel.styling.lastHelperRowColor : 'transparent'">
<td *ngFor="let cell of row.cells" [attr.contenteditable]="cell.isEditable"
[style.width.px]="elementModel.styling.fontSize * 2"
[class.strike-through]="cell.isCrossedOut"
diff --git a/projects/common/models/elements/input-elements/math-table.ts b/projects/common/models/elements/input-elements/math-table.ts
index 9c701027d..f14bd7682 100644
--- a/projects/common/models/elements/input-elements/math-table.ts
+++ b/projects/common/models/elements/input-elements/math-table.ts
@@ -16,7 +16,9 @@ export class MathTableElement extends UIElement implements MathTableProperties {
operation: 'addition' | 'subtraction' | 'multiplication' = 'addition';
terms: string[] = ['123', '456', '789'];
result: string = '';
- styling: BasicStyles;
+ styling: BasicStyles & {
+ lastHelperRowColor: string;
+ };
constructor(element?: MathTableProperties) {
super(element);
@@ -32,7 +34,10 @@ export class MathTableElement extends UIElement implements MathTableProperties {
if (element?.operation !== undefined) this.operation = element.operation;
if (element?.terms !== undefined) this.terms = [...element.terms];
if (element?.result !== undefined) this.result = element.result;
- this.styling = PropertyGroupGenerators.generateBasicStyleProps(element?.styling);
+ this.styling = {
+ ...PropertyGroupGenerators.generateBasicStyleProps(element?.styling),
+ lastHelperRowColor: 'transparent'
+ };
}
}
@@ -65,7 +70,9 @@ export interface MathTableProperties extends UIElementProperties {
operation: 'addition' | 'subtraction' | 'multiplication';
terms: string[];
result: string;
- styling: BasicStyles;
+ styling: BasicStyles & {
+ lastHelperRowColor: string;
+ };
}
function isValid(blueprint?: MathTableProperties): boolean {
@@ -75,5 +82,3 @@ function isValid(blueprint?: MathTableProperties): boolean {
blueprint.result !== undefined &&
PropertyGroupValidators.isValidBasicStyles(blueprint.styling);
}
-
-
diff --git a/projects/common/models/elements/property-group-interfaces.ts b/projects/common/models/elements/property-group-interfaces.ts
index b4a37238a..7ff826726 100644
--- a/projects/common/models/elements/property-group-interfaces.ts
+++ b/projects/common/models/elements/property-group-interfaces.ts
@@ -59,6 +59,7 @@ export interface OtherStyles {
firstLineColoring?: boolean;
firstLineColoringColor?: string;
selectionColor?: string;
+ lastHelperRowColor?: string;
}
export interface PlayerProperties {
diff --git a/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts b/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
index ed2ea7c4e..57d571dc6 100644
--- a/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/style-properties-tab/element-style-properties.component.ts
@@ -6,6 +6,20 @@ import { Stylings } from 'common/models/elements/property-group-interfaces';
selector: 'aspect-element-style-properties',
template: `
<div class="fx-column-start-stretch" *ngIf="styles">
+ <mat-form-field *ngIf="styles.lastHelperRowColor !== undefined"
+ appearance="fill" class="mdInput textsingleline">
+ <mat-label>{{'propertiesPanel.lastHelperRowColor' | translate }}</mat-label>
+ <input matInput type="text" [value]="styles.lastHelperRowColor"
+ (input)="unitService.updateSelectedElementsStyleProperty(
+ 'lastHelperRowColor', $any($event.target).value)">
+ <button mat-icon-button matSuffix (click)="lastHelperRowColorInput.click()">
+ <mat-icon>edit</mat-icon>
+ </button>
+ </mat-form-field>
+ <input matInput type="color" hidden #lastHelperRowColorInput
+ [value]="styles.lastHelperRowColor"
+ (input)="unitService.updateSelectedElementsStyleProperty('lastHelperRowColor', $any($event.target).value)">
+
<mat-checkbox *ngIf="styles.lineColoring !== undefined"
[checked]="$any(styles.lineColoring)"
(change)="unitService.updateSelectedElementsStyleProperty('lineColoring', $event.checked)">
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 75f2f74a6..9d2b27b3c 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -250,7 +250,8 @@
"presentation": "Darstellung",
"tooltip": "Tooltip",
"stickyHeader": "Haftende Kopfzeile",
- "crossOutChecked": "Auswahl durchstreichen"
+ "crossOutChecked": "Auswahl durchstreichen",
+ "lastHelperRowColor": "Farbe unterer Hilfszeile"
},
"hotspot": {
"top": "Abstand von oben",
--
GitLab