From 6b2cfb413794e240cf7ff0a5ca9771121f975aaf Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 15 Oct 2021 12:31:53 +0200
Subject: [PATCH] Add clearable property to textfields
This makes a small (suffix) button appear which clears all the input of
that field.
---
projects/common/classes/textFieldElement.ts | 2 ++
projects/common/element-components/text-field.component.ts | 4 ++++
.../page-view/properties/element-properties.component.html | 6 ++++++
3 files changed, 12 insertions(+)
diff --git a/projects/common/classes/textFieldElement.ts b/projects/common/classes/textFieldElement.ts
index 7181f15c5..989b3ec6d 100644
--- a/projects/common/classes/textFieldElement.ts
+++ b/projects/common/classes/textFieldElement.ts
@@ -14,6 +14,8 @@ export class TextFieldElement extends InputElement implements FontElement, Surfa
inputAssistance: boolean = false;
inputAssistancePreset: 'french' | 'numbers' | 'numbersAndOperators' | null = null;
+ clearable: boolean = false;
+
fontColor: string = 'black';
font: string = 'Roboto';
fontSize: number = 18;
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 452211b95..b6a2046b1 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -23,6 +23,10 @@ import { TextFieldElement } from '../classes/textFieldElement';
autocomplete="off"
[formControl]="elementFormControl"
placeholder="{{elementModel.label}}">
+ <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
+ (click)="elementFormControl.setValue('')">
+ <mat-icon>close</mat-icon>
+ </button>
<mat-error *ngIf="elementFormControl.errors">
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
diff --git a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
index 70a36c4f5..5bfa5e3ad 100644
--- a/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
+++ b/projects/editor/src/app/components/unit-view/page-view/properties/element-properties.component.html
@@ -206,6 +206,12 @@
(input)="updateModel('patternWarnMessage', $any($event.target).value)">
</mat-form-field>
+ <mat-checkbox *ngIf="combinedProperties.clearable !== undefined"
+ [checked]="$any(combinedProperties.clearable)"
+ (change)="updateModel('clearable', $event.checked)">
+ Knopf zum Leeren anzeigen
+ </mat-checkbox>
+
<mat-checkbox *ngIf="combinedProperties.inputAssistance !== undefined"
[checked]="$any(combinedProperties.inputAssistance)"
(change)="updateModel('inputAssistance', $event.checked)">
--
GitLab