From 0b8056f04c95b63f265e684ab7ec8312c5dc2d76 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 9 Dec 2021 16:42:44 +0100
Subject: [PATCH] Add coloring options to taoggle-button
Now correctly sets the chosen background color and additionally sets
another (configurable) color to the selected value.
---
.../toggle-button/toggle-button.component.ts | 25 +++++++++++--------
.../toggle-button/toggle-button.ts | 4 +++
.../element-style-properties.component.ts | 12 +++++++++
projects/editor/src/assets/i18n/de.json | 3 ++-
4 files changed, 32 insertions(+), 12 deletions(-)
diff --git a/projects/common/ui-elements/toggle-button/toggle-button.component.ts b/projects/common/ui-elements/toggle-button/toggle-button.component.ts
index 3c7424e34..08b8307e6 100644
--- a/projects/common/ui-elements/toggle-button/toggle-button.component.ts
+++ b/projects/common/ui-elements/toggle-button/toggle-button.component.ts
@@ -7,20 +7,23 @@ import { FormElementComponent } from '../../directives/form-element-component.di
template: `
<div class="mat-form-field">
<mat-button-toggle-group [formControl]="elementFormControl"
- [style.height.px]="elementModel.height"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.color]="elementModel.fontProps.fontColor"
- [style.font-family]="elementModel.fontProps.font"
- [style.font-size.px]="elementModel.fontProps.fontSize"
- [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
- [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
- [style.line-height.%]="elementModel.fontProps.lineHeight">
+ [style.height.px]="elementModel.height">
<mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
[value]="i"
[ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
elementFormControl.value !== null &&
- elementFormControl.value !== i }">
+ elementFormControl.value !== i }"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.background-color]="elementFormControl.value !== null &&
+ elementFormControl.value === i ?
+ elementModel.selectionColor :
+ elementModel.surfaceProps.backgroundColor"
+ [style.line-height.%]="elementModel.fontProps.lineHeight">
{{option}}
</mat-button-toggle>
</mat-button-toggle-group>
@@ -30,7 +33,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'mat-button-toggle-group {min-width: 70px; min-height: 20px}',
':host ::ng-deep .mat-button-toggle-button {height: 100%}',
':host ::ng-deep .mat-button-toggle-label-content {height: 100%; line-height: unset}',
- ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}',
+ ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}'
]
})
export class ToggleButtonComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/toggle-button/toggle-button.ts b/projects/common/ui-elements/toggle-button/toggle-button.ts
index 506f51eef..e950a0cdd 100644
--- a/projects/common/ui-elements/toggle-button/toggle-button.ts
+++ b/projects/common/ui-elements/toggle-button/toggle-button.ts
@@ -10,6 +10,7 @@ import { initFontElement, initSurfaceElement } from '../../util/unit-interface-i
export class ToggleButtonElement extends InputElement implements FontElement, SurfaceElement {
options: string[] = ['abc', 'def'];
strikeOtherOptions: boolean = false;
+ selectionColor: string = 'lightgreen';
fontProps: FontProperties;
surfaceProps: SurfaceProperties;
@@ -21,5 +22,8 @@ export class ToggleButtonElement extends InputElement implements FontElement, Su
this.surfaceProps = initSurfaceElement(serializedElement);
this.height = serializedElement.height as number || 25;
+ this.surfaceProps.backgroundColor =
+ serializedElement.surfaceProps?.backgroundColor as string ||
+ 'transparent';
}
}
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
index 8198d016f..f9f0b50f4 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-style-properties.component.ts
@@ -7,6 +7,18 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
selector: 'app-element-style-properties',
template: `
<div fxLayout="column">
+ <mat-form-field *ngIf="combinedProperties.selectionColor !== undefined"
+ appearance="fill" class="mdInput textsingleline">
+ <mat-label>{{'propertiesPanel.selectionColor' | translate }}</mat-label>
+ <input matInput type="color" [value]="combinedProperties.selectionColor"
+ (input)="updateModel.emit({ property: 'selectionColor', value: $any($event.target).value })">
+ </mat-form-field>
+ <mat-form-field *ngIf="combinedProperties.selectionColor !== undefined" appearance="fill">
+ <mat-label>{{'propertiesPanel.selectionColor' | translate }}</mat-label>
+ <input matInput type="text" [value]="combinedProperties.selectionColor"
+ (input)="updateModel.emit({ property: 'selectionColor', value: $any($event.target).value })">
+ </mat-form-field>
+
<mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
<mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
<input matInput type="number" [value]="combinedProperties.borderRadius"
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 56b73ee5a..80336f40b 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/projects/editor/src/assets/i18n/de.json
@@ -131,7 +131,8 @@
"spellCorrectButtonLabel": "Wort zum Korrigieren",
"borderColor": "Randfarbe",
"borderWidth": "Randstärke",
- "borderStyle": "Linienstil"
+ "borderStyle": "Linienstil",
+ "selectionColor": "Auswahlfarbe"
},
"player": {
"autoStart": "Autostart",
--
GitLab