Skip to content
Snippets Groups Projects
Commit 70029bd4 authored by rhenck's avatar rhenck
Browse files

MathTable: Add coloring property to lower helper row

#588
parent 28914841
No related branches found
No related tags found
No related merge requests found
......@@ -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
......@@ -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"
......
......@@ -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);
}
......@@ -59,6 +59,7 @@ export interface OtherStyles {
firstLineColoring?: boolean;
firstLineColoringColor?: string;
selectionColor?: string;
lastHelperRowColor?: string;
}
export interface PlayerProperties {
......
......@@ -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)">
......
......@@ -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",
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment