diff --git a/docs/unit_definition_changelog.txt b/docs/unit_definition_changelog.txt index 944f16f9efe96f629ab4b41810625ea26b85f74d..cf31299cb843441368340bbcbfb030176bba0d4a 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 3746c3a33c0f95c434a485a146409581bd29188c..c1bae15ba89a6f3364e73f7598e5ac9d0a793666 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 9c701027da449f6dd1b09ad2a6829245979bc242..f14bd768269a223b6cd3bb888ddd8ee223bdae75 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 b4a37238a9bc9fbc0a16d8560c9a19fc6cd14a64..7ff826726ee36d8d8101c113b225382aa6091ae1 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 ed2ea7c4efcb069c012d7320bacaacde7b32a953..57d571dc64967def4a77d82658272b174cde1caf 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 75f2f74a663c184da24e35211decdde1fb452368..9d2b27b3cad6edb05e98e322fc22df06e51914db 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",