Offer a choice of colors for marking text & remove underlinable option

docs/release-notes-editor.txt

 Editor
 ======
+ - Remove underlinable option for text
+ - Offer a choice of colors for marking text
+
+
 1.12.0
  - Add new element cloze ("Lückentext")
    Similar to a text element but parses the text on change and replaces

projects/common/ui-elements/text/text-element.ts

@@ -10,7 +10,9 @@ import { initFontElement, initPositionedElement, initSurfaceElement } from '../.
 
 export class TextElement extends UIElement implements PositionedElement, FontElement, SurfaceElement {
   text: string = '<p>Lorem ipsum dolor sit amet</p>';
-  interaction: 'none' | 'highlightable' | 'underlinable' | 'strikable' = 'none';
+  highlightableOrange: boolean = false;
+  highlightableTurquoise: boolean = false;
+  highlightableYellow: boolean = false;
 
   positionProps: PositionProperties;
   fontProps: FontProperties;
@@ -34,8 +36,12 @@ export class TextElement extends UIElement implements PositionedElement, FontEle
   }
 
   handleBackwardsCompatibility(serializedElement: UIElement): void {
-    if (serializedElement.highlightable) { // TODO
-      this.interaction = 'highlightable';
+    if (serializedElement.highlightable || serializedElement.interaction === 'highlightable') {
+      this.highlightableYellow = true;
+      this.highlightableTurquoise = true;
+      this.highlightableOrange = true;
+    } else if (serializedElement.interaction === 'underlinable') {
+      this.highlightableYellow = true;
     }
   }
 }

projects/common/ui-elements/text/text.component.ts

@@ -10,36 +10,31 @@ import { ValueChangeElement } from '../../models/uI-element';
   template: `
     <div [style.width.%]="100"
          [style.height]="'auto'">
-      <div *ngIf="elementModel.interaction !== 'none'"
+      <div *ngIf="elementModel.highlightableYellow ||
+           elementModel.highlightableTurquoise ||
+           elementModel.highlightableOrange"
            class="marking-bar">
-        <ng-container *ngIf="elementModel.interaction === 'highlightable'">
-          <button type="button"
-                  class="marking-button"
-                  mat-mini-fab [style.background-color]="'yellow'"
-                  (click)="applySelection.emit({ mode: 'mark', color:'yellow', element: container })">
-            <mat-icon>border_color</mat-icon>
-          </button>
-          <button type="button"
-                  class="marking-button"
-                  mat-mini-fab [style.background-color]="'turquoise'"
-                  (click)="applySelection.emit({ mode: 'mark', color: 'turquoise', element: container })">
-            <mat-icon>border_color</mat-icon>
-          </button>
-          <button type="button"
-                  class="marking-button"
-                  mat-mini-fab [style.background-color]="'orange'"
-                  (click)="applySelection.emit({ mode: 'mark', color: 'orange', element: container })">
-            <mat-icon>border_color</mat-icon>
-          </button>
-        </ng-container>
-        <ng-container *ngIf="elementModel.interaction === 'underlinable'">
-          <button type="button"
-                  class="marking-button"
-                  mat-mini-fab [style.background-color]="'white'"
-                  (click)="applySelection.emit({ mode: 'underline', color: 'black', element: container })">
-            <mat-icon>format_underlined</mat-icon>
-          </button>
-        </ng-container>
+        <button *ngIf="elementModel.highlightableYellow"
+                type="button"
+                class="marking-button"
+                mat-mini-fab [style.background-color]="'yellow'"
+                (click)="applySelection.emit({ mode: 'mark', color:'yellow', element: container })">
+          <mat-icon>border_color</mat-icon>
+        </button>
+        <button *ngIf="elementModel.highlightableTurquoise"
+                type="button"
+                class="marking-button"
+                mat-mini-fab [style.background-color]="'turquoise'"
+                (click)="applySelection.emit({ mode: 'mark', color: 'turquoise', element: container })">
+          <mat-icon>border_color</mat-icon>
+        </button>
+        <button *ngIf="elementModel.highlightableOrange"
+                type="button"
+                class="marking-button"
+                mat-mini-fab [style.background-color]="'orange'"
+                (click)="applySelection.emit({ mode: 'mark', color: 'orange', element: container })">
+          <mat-icon>border_color</mat-icon>
+        </button>
         <button type="button"
                 class="marking-button" [style.background-color]="'lightgrey'" mat-mini-fab
                 (click)="applySelection.emit({ mode: 'delete', color: 'none', element: container })">
@@ -75,7 +70,7 @@ export class TextComponent extends ElementComponent {
   @Input() elementModel!: TextElement;
   @Output() elementValueChanged = new EventEmitter<ValueChangeElement>();
   @Output() startSelection = new EventEmitter<MouseEvent>();
-  @Output() applySelection = new EventEmitter <{
+  @Output() applySelection = new EventEmitter<{
     mode: 'mark' | 'underline' | 'delete',
     color: string,
     element: HTMLElement

projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts

@@ -4,7 +4,9 @@ import {
 } from '@angular/core';
 import { CdkDragDrop } from '@angular/cdk/drag-drop/drag-events';
 import { moveItemInArray } from '@angular/cdk/drag-drop';
-import { InputElementValue, LikertColumn, LikertRow, UIElement } from '../../../../../../../common/models/uI-element';
+import {
+  InputElementValue, LikertColumn, LikertRow, UIElement
+} from '../../../../../../../common/models/uI-element';
 import { LikertElement } from '../../../../../../../common/ui-elements/likert/likert-element';
 import { LikertElementRow } from '../../../../../../../common/ui-elements/likert/likert-element-row';
 import { UnitService } from '../../../../services/unit.service';
@@ -41,23 +43,28 @@ import { FileService } from '../../../../../../../common/file.service';
         </button>
       </ng-container>
 
-      <mat-form-field *ngIf="combinedProperties.interaction !== undefined" appearance="fill">
-        <mat-label>{{'propertiesPanel.interaction' | translate }}</mat-label>
-        <mat-select [value]="combinedProperties.interaction"
-                    (selectionChange)="updateModel.emit({ property: 'interaction', value: $event.value })">
-          <mat-option *ngFor="let interaction of ['none', 'highlightable', 'underlinable', 'strikable']"
-                      [value]="interaction">
-            {{'propertiesPanel.' + interaction | translate }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      {{'propertiesPanel.highlightable' | translate }}
+      <mat-checkbox *ngIf="combinedProperties.highlightableYellow !== undefined"
+                    [checked]="$any(combinedProperties.highlightableYellow)"
+                    (change)="updateModel.emit({ property: 'highlightableYellow', value: $event.checked })">
+        {{'propertiesPanel.highlightableYellow' | translate }}
+      </mat-checkbox>
+      <mat-checkbox *ngIf="combinedProperties.highlightableTurquoise !== undefined"
+                    [checked]="$any(combinedProperties.highlightableTurquoise)"
+                    (change)="updateModel.emit({ property: 'highlightableTurquoise', value: $event.checked })">
+        {{'propertiesPanel.highlightableTurquoise' | translate }}
+      </mat-checkbox>
+      <mat-checkbox *ngIf="combinedProperties.highlightableOrange !== undefined"
+                    [checked]="$any(combinedProperties.highlightableOrange)"
+                    (change)="updateModel.emit({ property: 'highlightableOrange', value: $event.checked })">
+        {{'propertiesPanel.highlightableOrange' | translate }}
+      </mat-checkbox>
 
       <mat-checkbox *ngIf="combinedProperties.strikeOtherOptions !== undefined"
                     [checked]="$any(combinedProperties.strikeOtherOptions)"
                     (change)="updateModel.emit({ property: 'strikeOtherOptions', value: $event.checked })">
         {{'propertiesPanel.strikeOtherOptions' | translate }}
       </mat-checkbox>
-
       <mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
                     [checked]="$any(combinedProperties.allowUnset)"
                     (change)="updateModel.emit({ property: 'allowUnset', value: $event.checked })">

projects/editor/src/assets/i18n/de.json

@@ -66,9 +66,10 @@
     "label": "Beschriftung",
     "text": "Text",
     "borderRadius": "Kantenradius",
-    "highlightable": "Markieren",
-    "underlinable": "Unterstreichen",
-    "strikable": "Durchstreichen",
+    "highlightable": "Markieren erlauben",
+    "highlightableYellow": "Gelb",
+    "highlightableTurquoise": "Türkis",
+    "highlightableOrange": "Orange",
     "allowUnset": "Deselektion erlauben",
     "readOnly": "Schreibgeschützt",
     "requiredField": "Pflichtfeld",
@@ -90,7 +91,7 @@
     "true": "wahr",
     "false": "falsch",
     "appearance": "Aussehen",
-    "interaction": "Interaktion",
+
     "minLength": "Minimallänge",
     "minLengthWarnMessage": "Minimalwert Warnmeldung",
     "maxLength": "Maximalwert",