From 58e8aaacc41ffa0cc920bdc64ab65ccdaed8c141 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 29 Nov 2021 16:26:03 +0100
Subject: [PATCH] Add proper label to textarea and reduce vertical space around
text
---
.../ui-elements/text-area/text-area.component.ts | 12 +++++++++---
.../ui-elements/text-field/text-field.component.ts | 2 +-
2 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/projects/common/ui-elements/text-area/text-area.component.ts b/projects/common/ui-elements/text-area/text-area.component.ts
index 8963f5cf4..6bd7037a8 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -5,7 +5,8 @@ import { TextAreaElement } from './text-area-element';
@Component({
selector: 'app-text-area',
template: `
- <mat-form-field [style.width.%]="100"
+ <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
+ [style.width.%]="100"
[style.min-height.%]="100"
appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
@@ -15,8 +16,9 @@ import { TextAreaElement } from './text-area-element';
[style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
[style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
[appearance]="$any(elementModel.appearance)">
+ <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
<textarea matInput #input
- autocomplete="off" rows="{{elementModel.rowCount}}" placeholder="{{elementModel.label}}"
+ autocomplete="off" rows="{{elementModel.rowCount}}"
[formControl]="elementFormControl"
[value]="elementModel.value"
[readonly]="elementModel.readOnly"
@@ -30,7 +32,11 @@ import { TextAreaElement } from './text-area-element';
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</mat-form-field>
- `
+ `,
+ styles: [
+ ':host ::ng-deep div.mat-form-field-infix {padding-top: 0.2em;}',
+ ':host ::ng-deep .no-label .mat-form-field-outline-gap {border-top-color: unset !important}'
+ ]
})
export class TextAreaComponent extends FormElementComponent {
@Input() elementModel!: TextAreaElement;
diff --git a/projects/common/ui-elements/text-field/text-field.component.ts b/projects/common/ui-elements/text-field/text-field.component.ts
index 006063073..6dc465ada 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -67,7 +67,7 @@ import { TextFieldElement } from './text-field-element';
</mat-form-field>
`,
styles: [
- '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}'
+ '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' // TODO
]
})
export class TextFieldComponent extends FormElementComponent {
--
GitLab