diff --git a/docs/release-notes-editor.txt b/docs/release-notes-editor.txt
index fa3990fc744a458c4fcbe8a421b410cd2380beab..ec2c7833fa54f9c0c03716e172dc89323457af10 100644
--- a/docs/release-notes-editor.txt
+++ b/docs/release-notes-editor.txt
@@ -1,5 +1,9 @@
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
diff --git a/projects/common/ui-elements/text/text-element.ts b/projects/common/ui-elements/text/text-element.ts
index 0a442ac36c901da1b9ce274485319f233d9070dc..132a0a95ad1368d6ae21cf051c04454b853ce1b0 100644
--- a/projects/common/ui-elements/text/text-element.ts
+++ b/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;
}
}
}
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 6c2c46a67896a2a8ef64d6906c2446925a631cd5..e689efe14f74eae7efaa278b6d308a2b203b1ff1 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/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
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts
index 82cdaf3ab63bf80b18a174351246cce8c9d7c88e..a23935762122dcf561bb694d48e9640a164df342 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties-component.component.ts
+++ b/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 })">
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 8eb6e0abafb47fd83c435bb9efb6a892339258ea..ea55c59ee6936f27826d9a938509ddf77e3290d3 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/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",