From 2d34b8d73049ae45af6c7d17391970ae8f33c643 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 22 Sep 2021 11:57:46 +0200
Subject: [PATCH] Add appearance property to input elements
---
.../element-components/text-area.component.ts | 3 ++-
.../element-components/text-field.component.ts | 3 ++-
projects/common/unit.ts | 2 ++
projects/editor/src/app/UnitFactory.ts | 2 ++
.../properties/element-properties.component.html | 16 ++++++++++++++++
5 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 63c2bdb37..216ce06b1 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
[style.font-size.px]="elementModel.fontSize"
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ [appearance]="$any(elementModel.appearance)">
<textarea matInput [formControl]="elementFormControl" #input
(focus)="onFocus.emit(input)"
(blur)="onBlur.emit(input)"
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 6bebb6959..29a3c3aed 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -13,7 +13,8 @@ import { FormElementComponent } from '../form-element-component.directive';
[style.font-size.px]="elementModel.fontSize"
[style.font-weight]="elementModel.bold ? 'bold' : ''"
[style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ [appearance]="$any(elementModel.appearance)">
<input matInput type="text" [pattern]="elementModel.pattern" #input
(focus)="onFocus.emit(input)"
(blur)="onBlur.emit(input)"
diff --git a/projects/common/unit.ts b/projects/common/unit.ts
index 5dc73598c..4938384d6 100644
--- a/projects/common/unit.ts
+++ b/projects/common/unit.ts
@@ -82,6 +82,7 @@ export interface ButtonElement extends TextUIElement, SurfaceUIElement {
export interface TextFieldElement extends InputUIElement, TextUIElement, SurfaceUIElement {
value: string;
+ appearance: 'standard' | 'legacy' | 'fill' | 'outline';
minLength: number | undefined;
minLengthWarnMessage: string;
maxLength: number | undefined;
@@ -92,6 +93,7 @@ export interface TextFieldElement extends InputUIElement, TextUIElement, Surface
export interface TextAreaElement extends InputUIElement, TextUIElement, SurfaceUIElement {
value: string;
+ appearance: 'standard' | 'legacy' | 'fill' | 'outline';
resizeEnabled: boolean;
}
diff --git a/projects/editor/src/app/UnitFactory.ts b/projects/editor/src/app/UnitFactory.ts
index 2f8e043ed..cdc6c329d 100644
--- a/projects/editor/src/app/UnitFactory.ts
+++ b/projects/editor/src/app/UnitFactory.ts
@@ -112,6 +112,7 @@ export function createButtonElement(): ButtonElement {
export function createTextfieldElement(): TextFieldElement {
return <TextFieldElement>{
+ appearance: 'outline',
minLength: undefined,
minLengthWarnMessage: 'Eingabe zu kurz',
maxLength: undefined,
@@ -129,6 +130,7 @@ export function createTextfieldElement(): TextFieldElement {
export function createTextareaElement(): TextAreaElement {
return <TextAreaElement>{
resizeEnabled: false,
+ appearance: 'outline',
...createUnitUIElement('text-area'),
...createInputUIElement('Beispiel Beschriftung', ''),
...createTextUIElement(),
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 d57872262..45c7581a2 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
@@ -23,6 +23,22 @@
(click)="unitService.showDefaultEditDialog(selectedElements[0])">
</div>
+
+ <mat-form-field *ngIf="combinedProperties.hasOwnProperty('appearance')" appearance="fill">
+ <mat-label>Aussehen</mat-label>
+ <mat-select [value]="combinedProperties.appearance"
+ (selectionChange)="updateModel('appearance', $event.value)">
+ <mat-option *ngFor="let option of [{displayValue: 'standard', value: 'standard'},
+ {displayValue: 'legacy', value: 'legacy'},
+ {displayValue: 'fill', value: 'fill'},
+ {displayValue: 'outline', value: 'outline'}]"
+ [value]="option.value">
+ {{option.displayValue}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+
+
<mat-checkbox *ngIf="combinedProperties.hasOwnProperty('highlightable')"
[checked]="$any(combinedProperties.highlightable)"
(change)="updateModel('highlightable', $event.checked)">
--
GitLab