From 7a3c8be29f2900a4a5b65a9cc65e817afbcfb39b Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 9 Dec 2021 15:54:16 +0100
Subject: [PATCH] Remove text field and area appearance variants and fix
remaining
The other variants are basically the same as filled. The only
difference is the background color, which we are manilupating anyway.
So there is no reason to keep them.
Also for the background color directive different target elements are
needed for the different appearance variants. This is now possible.
As stylings of the old appearance are kept when changing the appearance
the styles need to be removed first.
In the moment the appearance value is changed the component is not
actually changed yet and there we need to wait for another Angular
change detection cycle, via timeout.
---
.../input-background-color.directive.ts | 39 ++++++++++++-------
.../text-area/text-area-element.ts | 2 +-
.../text-field/text-field-element.ts | 2 +-
.../element-model-properties.component.html | 6 +--
4 files changed, 29 insertions(+), 20 deletions(-)
diff --git a/projects/common/directives/input-background-color.directive.ts b/projects/common/directives/input-background-color.directive.ts
index 7bf48d945..a13ae77a4 100644
--- a/projects/common/directives/input-background-color.directive.ts
+++ b/projects/common/directives/input-background-color.directive.ts
@@ -1,32 +1,43 @@
import {
- AfterViewInit,
- Directive, ElementRef, Input, OnChanges
+ Directive, ElementRef, Input, OnChanges, SimpleChanges
} from '@angular/core';
@Directive({
selector: '[appInputBackgroundColor]'
})
-export class InputBackgroundColorDirective implements AfterViewInit, OnChanges {
+export class InputBackgroundColorDirective implements OnChanges {
@Input() backgroundColor!: string;
- private targetElements!: HTMLElement[];
+ @Input() appearance!: string;
constructor(private elementRef: ElementRef) { }
- ngAfterViewInit(): void {
- this.targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
- this.setBackgroundColor();
- }
-
- ngOnChanges(): void {
- this.setBackgroundColor();
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes.appearance && !changes.appearance.firstChange) {
+ this.clearFilledBackgroundColor();
+ }
+ setTimeout(() => { // wait for Angular to set up the component before manipulating it
+ this.setBackgroundColor();
+ });
}
private setBackgroundColor(): void {
+ let targetElements: HTMLElement[] = [];
+ if (this.appearance === 'outline') {
+ targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
+ } else {
+ targetElements = [this.elementRef.nativeElement.querySelector('div.mat-form-field-flex')];
+ }
// This fails, when component is not set up yet, therefore the extra check
- if (this.targetElements) {
- for (const element of this.targetElements) {
+ if (targetElements) {
+ Array.from(targetElements).forEach((element: HTMLElement) => {
element.style.setProperty('background-color', this.backgroundColor);
- }
+ });
}
}
+
+ /* Clear styling of old appearance before switching */
+ private clearFilledBackgroundColor(): void {
+ const targetElement: HTMLElement = this.elementRef.nativeElement.querySelector('div.mat-form-field-flex');
+ targetElement?.style.removeProperty('background-color');
+ }
}
diff --git a/projects/common/ui-elements/text-area/text-area-element.ts b/projects/common/ui-elements/text-area/text-area-element.ts
index f08c649d2..58aecc2ce 100644
--- a/projects/common/ui-elements/text-area/text-area-element.ts
+++ b/projects/common/ui-elements/text-area/text-area-element.ts
@@ -10,7 +10,7 @@ import {
import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
export class TextAreaElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
- appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+ appearance: 'fill' | 'outline' = 'outline';
resizeEnabled: boolean = false;
rowCount: number = 3;
inputAssistancePreset: 'none' | 'french' | 'numbers' | 'numbersAndOperators' | 'comparisonOperators' = 'none';
diff --git a/projects/common/ui-elements/text-field/text-field-element.ts b/projects/common/ui-elements/text-field/text-field-element.ts
index 890a55379..022016508 100644
--- a/projects/common/ui-elements/text-field/text-field-element.ts
+++ b/projects/common/ui-elements/text-field/text-field-element.ts
@@ -10,7 +10,7 @@ import {
import { initFontElement, initPositionedElement, initSurfaceElement } from '../../util/unit-interface-initializer';
export class TextFieldElement extends InputElement implements PositionedElement, FontElement, SurfaceElement {
- appearance: 'standard' | 'legacy' | 'fill' | 'outline' = 'outline';
+ appearance: 'fill' | 'outline' = 'outline';
minLength: number = 0;
minLengthWarnMessage: string = 'Eingabe zu kurz';
maxLength: number = 0;
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
index 6c85a6a3a..cb2394f99 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties-panel/element-model-properties.component.html
@@ -275,10 +275,8 @@
<mat-label>{{'propertiesPanel.appearance' | translate }}</mat-label>
<mat-select [value]="combinedProperties.appearance"
(selectionChange)="updateModel.emit({ property: 'appearance', value: $event.value })">
- <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
- {displayValue: 'legacy', value: 'legacy'},
- {displayValue: 'fill', value: 'fill'},
- {displayValue: 'outline', value: 'outline'}]"
+ <mat-option *ngFor="let option of [{displayValue: 'fill', value: 'fill'},
+ {displayValue: 'outline', value: 'outline'}]"
[value]="option.value">
{{option.displayValue}}
</mat-option>
--
GitLab