From c1d22c875eb7c59eddd0902c32b377c4b6bbeb66 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 29 Sep 2021 14:22:13 +0200
Subject: [PATCH] Fix background color of input fields
Since the material elements don't give a way of applying the background
color, a hack is needed to get the internal elements and apply the
style.
Directive to be able to do it for text field and text area.
---
projects/common/app.module.ts | 4 ++-
.../input-background-color.directive.ts | 30 +++++++++++++++++++
.../element-components/text-area.component.ts | 2 +-
.../text-field.component.ts | 2 +-
4 files changed, 35 insertions(+), 3 deletions(-)
create mode 100644 projects/common/element-components/directives/input-background-color.directive.ts
diff --git a/projects/common/app.module.ts b/projects/common/app.module.ts
index 1138073b7..f708af255 100644
--- a/projects/common/app.module.ts
+++ b/projects/common/app.module.ts
@@ -33,6 +33,7 @@ import { VideoComponent } from './element-components/video.component';
import { AudioComponent } from './element-components/audio.component';
import { CorrectionComponent } from './element-components/compound-components/correction.component';
import { SafeResourceUrlPipe } from './pipes/safe-resource-url.pipe';
+import { InputBackgroundColorDirective } from './element-components/directives/input-background-color.directive';
@NgModule({
imports: [
@@ -61,7 +62,8 @@ import { SafeResourceUrlPipe } from './pipes/safe-resource-url.pipe';
CheckboxComponent,
DropdownComponent,
CorrectionComponent,
- SafeResourceUrlPipe
+ SafeResourceUrlPipe,
+ InputBackgroundColorDirective
],
exports: [
CommonModule,
diff --git a/projects/common/element-components/directives/input-background-color.directive.ts b/projects/common/element-components/directives/input-background-color.directive.ts
new file mode 100644
index 000000000..eef0061c2
--- /dev/null
+++ b/projects/common/element-components/directives/input-background-color.directive.ts
@@ -0,0 +1,30 @@
+import {
+ Directive, ElementRef, Input, OnChanges
+} from '@angular/core';
+
+@Directive({
+ selector: '[appInputBackgroundColor]'
+})
+export class InputBackgroundColorDirective implements OnChanges {
+ @Input() backgroundColor!: string;
+
+ constructor(private elementRef: ElementRef) { }
+
+ ngAfterViewInit(): void {
+ this.setBackgroundColor();
+ }
+
+ ngOnChanges(): void {
+ this.setBackgroundColor();
+ }
+
+ private setBackgroundColor(): void {
+ const targetElements = this.elementRef.nativeElement.querySelector('div.mat-form-field-outline')?.children;
+ // This fails, when component is not set up yet, therefore the extra check
+ if (targetElements) {
+ for (const child of targetElements) {
+ child.style.setProperty('background-color', this.backgroundColor);
+ }
+ }
+ }
+}
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index f92f2f4aa..feb6bb231 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -7,7 +7,7 @@ import { FormElementComponent } from '../form-element-component.directive';
template: `
<mat-form-field [style.width.%]="100"
[style.min-height.%]="100"
- [style.background-color]="elementModel.backgroundColor"
+ appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
[style.font-size.px]="elementModel.fontSize"
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 29a3c3aed..9cc669da3 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -7,13 +7,13 @@ import { FormElementComponent } from '../form-element-component.directive';
template: `
<mat-form-field [style.width.%]="100"
[style.height.%]="100"
- [style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
[style.font-size.px]="elementModel.fontSize"
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
[appearance]="$any(elementModel.appearance)">
<input matInput type="text" [pattern]="elementModel.pattern" #input
(focus)="onFocus.emit(input)"
--
GitLab