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 e5e64bcd1452e415b612567e44a49d376ce282f0..d4181af2fcb48826731765cc5e865e81ca3be152 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 73ecc5c9130acc520115818da0b013bfc029eebb..0ca6a6e4a8a525070791ea8af30d2a55395b01da 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 1a581131d4f533a46cd6b2e8a289a5da07d9b83f..7787ddf29f47fd88e7677ba75d3ff9dbc1266dc9 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 b196a46c3fb5956d6be817058c92f917bd3f7d05..2254befd35a7c0bc6d0d1232f8c920b1977cc30f 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 a11c716c717a6be55ba8acdd171a28708db712e8..5dc8c29421235913c2e4a27785356d63060bff52 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",