From 4eb7b469e24554c9560d642b58bb2a8fe26a594f Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 29 Oct 2021 17:44:22 +0200
Subject: [PATCH] Add 'strikeOtherOptions' to radio button groups
This makes it so that other options appear with strikethrough when one
is selected.
---
.../element-components/radio-button-group.component.ts | 4 +++-
projects/common/models/radio-button-group-element.ts | 1 +
.../properties-panel/element-properties.component.html | 6 ++++++
3 files changed, 10 insertions(+), 1 deletion(-)
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 0e524fb65..dea56cedc 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -25,6 +25,7 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
[fxLayout]="elementModel.alignment"
[formControl]="elementFormControl">
<mat-radio-button *ngFor="let option of elementModel.options; let i = index"
+ [ngClass]="{ 'strike' : elementModel.strikeOtherOptions && elementModel.value !== i }"
[value]="i"
[style.pointer-events]="elementModel.readOnly ? 'none' : 'unset'"
[style.line-height.%]="elementModel.lineHeight">
@@ -43,7 +44,8 @@ import { RadioButtonGroupElement } from '../models/radio-button-group-element';
'::ng-deep app-radio-button-group mat-radio-button {margin-bottom: 6px}',
'::ng-deep app-radio-button-group mat-radio-button {margin-right: 15px}',
'.white-space-break {white-space: normal}',
- '.error-message { position: absolute; margin-top: 25px; font-size: 75% }'
+ '.error-message { position: absolute; margin-top: 25px; font-size: 75% }',
+ '::ng-deep app-radio-button-group .strike .mat-radio-label {text-decoration: line-through}'
]
})
export class RadioButtonGroupComponent extends FormElementComponent {
diff --git a/projects/common/models/radio-button-group-element.ts b/projects/common/models/radio-button-group-element.ts
index 864503cba..7f8588a26 100644
--- a/projects/common/models/radio-button-group-element.ts
+++ b/projects/common/models/radio-button-group-element.ts
@@ -5,6 +5,7 @@ import { initFontElement, initSurfaceElement } from '../util/unit-interface-init
export class RadioButtonGroupElement extends InputElement implements FontElement, SurfaceUIElement {
options: string[] = [];
alignment: 'row' | 'column' = 'column';
+ strikeOtherOptions: boolean = false;
fontColor: string = 'black';
font: string = 'Roboto';
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 3b15bc6d6..013bf006f 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
@@ -48,6 +48,12 @@
Unterstreichung erlauben
</mat-checkbox>
+ <mat-checkbox *ngIf="combinedProperties.strikeOtherOptions !== undefined"
+ [checked]="$any(combinedProperties.strikeOtherOptions)"
+ (change)="updateModel('strikeOtherOptions', $event.checked)">
+ Andere Optionen durchstreichen
+ </mat-checkbox>
+
<mat-checkbox *ngIf="combinedProperties.allowUnset !== undefined"
[checked]="$any(combinedProperties.allowUnset)"
(change)="updateModel('allowUnset', $event.checked)">
--
GitLab