From 4b7df84a1940bd15090605ccef5345e534ae5240 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 2 Aug 2022 19:39:52 +0200
Subject: [PATCH] Implement strikethrough for selected ToggleButton value
Also refactor properties panel and ToggleButton class logic for striking
values. This now relies more on CSS classes provided by Material instead
of doing finetuned logic my ourselves. This also allows showing the
correct preview in the editor.
#287
---
.../cloze-child-elements/toggle-button.component.ts | 12 +++++++-----
.../cloze/cloze-child-elements/toggle-button.ts | 2 ++
.../element-model-properties.component.css | 12 ++++++++++++
.../input-groups/select-properties.component.ts | 9 ++++++---
projects/editor/src/assets/i18n/de.json | 3 ++-
5 files changed, 29 insertions(+), 9 deletions(-)
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
index e5e64bcd1..d4181af2f 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
@@ -1,5 +1,5 @@
import { Component, Input } from '@angular/core';
-import { FormElementComponent } from '../../../../directives/form-element-component.directive';
+import { FormElementComponent } from 'common/directives/form-element-component.directive';
import { ToggleButtonElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button';
@Component({
@@ -11,9 +11,8 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
[style.width]="elementModel.dynamicWidth ? 'unset' : '100%'">
<mat-button-toggle *ngFor="let option of elementModel.richTextOptions; let i = index"
[value]="i"
- [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
- elementFormControl.value !== null &&
- elementFormControl.value !== i }"
+ [ngClass]="{ 'strike-other-options' : elementModel.strikeOtherOptions,
+ 'strike-selected-option' : elementModel.strikeSelectedOption }"
[style.color]="elementModel.styling.fontColor"
[style.font-size.px]="elementModel.styling.fontSize"
[style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
@@ -33,7 +32,10 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
'mat-button-toggle-group {display: inline-flex; min-width: 70px; min-height: 20px; max-width: 100%;}',
'mat-button-toggle-group {justify-content: center;}',
':host ::ng-deep .mat-button-toggle-label-content {line-height: unset}',
- ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}',
+ ':host ::ng-deep .strike-selected-option.mat-button-toggle-checked .mat-button-toggle-label-content' +
+ '{text-decoration: line-through}',
+ ':host ::ng-deep .strike-other-options:not(.mat-button-toggle-checked) .mat-button-toggle-label-content' +
+ '{text-decoration: line-through}'
]
})
export class ToggleButtonComponent extends FormElementComponent {
diff --git a/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button.ts b/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button.ts
index 73ecc5c91..0ca6a6e4a 100644
--- a/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button.ts
+++ b/projects/common/models/elements/compound-elements/cloze/cloze-child-elements/toggle-button.ts
@@ -9,6 +9,7 @@ import {
export class ToggleButtonElement extends InputElement {
richTextOptions: string[] = [];
strikeOtherOptions: boolean = false;
+ strikeSelectedOption: boolean = false;
verticalOrientation: boolean = false;
dynamicWidth: boolean = true;
styling: BasicStyles & {
@@ -20,6 +21,7 @@ export class ToggleButtonElement extends InputElement {
super({ height: 25, ...element }, ...args);
if (element.richTextOptions) this.richTextOptions = element.richTextOptions;
if (element.strikeOtherOptions) this.strikeOtherOptions = element.strikeOtherOptions;
+ if (element.strikeSelectedOption) this.strikeSelectedOption = element.strikeSelectedOption;
if (element.verticalOrientation) this.verticalOrientation = element.verticalOrientation;
if (element.dynamicWidth !== undefined) this.dynamicWidth = element.dynamicWidth;
this.styling = {
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
index 1a581131d..7787ddf29 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/element-model-properties.component.css
@@ -23,3 +23,15 @@
button {
margin-bottom: 15px;
}
+
+:host ::ng-deep .mat-form-field {
+ margin-bottom: -10px;
+}
+
+:host ::ng-deep fieldset {
+ margin-bottom: 15px;
+}
+
+:host ::ng-deep .mat-checkbox {
+ margin-bottom: 8px;
+}
diff --git a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/select-properties.component.ts b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/select-properties.component.ts
index b196a46c3..2254befd3 100644
--- a/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/select-properties.component.ts
+++ b/projects/editor/src/app/components/properties-panel/model-properties-tab/input-groups/select-properties.component.ts
@@ -1,6 +1,7 @@
import {
Component, EventEmitter, Input, Output
} from '@angular/core';
+import { CombinedProperties } from 'editor/src/app/components/properties-panel/element-properties-panel.component';
@Component({
selector: 'aspect-select-properties',
@@ -25,8 +26,10 @@ import {
]
})
export class SelectPropertiesComponent {
- @Input() combinedProperties!: any;
+ @Input() combinedProperties!: CombinedProperties;
@Output() updateModel =
- new EventEmitter<{ property: string; value: string | number | boolean | string[], isInputValid?: boolean | null }>();
-
+ new EventEmitter<{
+ property: string,
+ value: string | number | boolean | string[]
+ }>();
}
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index a11c716c7..5dc8c2942 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -100,7 +100,8 @@
"true": "wahr",
"false": "falsch",
"appearance": "Aussehen",
- "strikeOtherOptions": "Andere Optionen durchstreichen",
+ "strikeOtherOptions": "Nicht gewählte Optionen durchstreichen",
+ "strikeSelectedOption": "Gewählte Option durchstreichen",
"minLength": "Minimallänge",
"minValue": "Minimalwert",
"minLengthWarnMessage": "Minimalwert Warnmeldung",
--
GitLab