MathTable: Add coloring property to lower helper row

#588

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

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"

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);
 }
-
-

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 {

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)">

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",