From 91b797bfb5e254101a12df261813715147578929 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 29 Nov 2021 12:28:24 +0100
Subject: [PATCH] Add styling props to simple text field
---
.../text-field-simple-element.ts | 17 +++++++++++++++--
.../text-field-simple.component.ts | 12 +++++++++++-
2 files changed, 26 insertions(+), 3 deletions(-)
diff --git a/projects/common/ui-elements/textfield-simple/text-field-simple-element.ts b/projects/common/ui-elements/textfield-simple/text-field-simple-element.ts
index 4a5f8966b..96e0ecf4a 100644
--- a/projects/common/ui-elements/textfield-simple/text-field-simple-element.ts
+++ b/projects/common/ui-elements/textfield-simple/text-field-simple-element.ts
@@ -1,9 +1,22 @@
-import { InputElement, UIElement } from '../../models/uI-element';
+import {
+ FontElement,
+ FontProperties,
+ InputElement,
+ SurfaceElement,
+ SurfaceProperties,
+ UIElement
+} from '../../models/uI-element';
+import { initFontElement, initSurfaceElement } from '../../util/unit-interface-initializer';
+
+export class TextFieldSimpleElement extends InputElement implements FontElement, SurfaceElement{
+ fontProps: FontProperties;
+ surfaceProps: SurfaceProperties;
-export class TextFieldSimpleElement extends InputElement {
constructor(serializedElement: UIElement) {
super(serializedElement);
Object.assign(this, serializedElement);
+ this.fontProps = initFontElement(serializedElement);
+ this.surfaceProps = initSurfaceElement(serializedElement);
this.height = serializedElement.height || 25;
}
diff --git a/projects/common/ui-elements/textfield-simple/text-field-simple.component.ts b/projects/common/ui-elements/textfield-simple/text-field-simple.component.ts
index 6443e9138..e227ea698 100644
--- a/projects/common/ui-elements/textfield-simple/text-field-simple.component.ts
+++ b/projects/common/ui-elements/textfield-simple/text-field-simple.component.ts
@@ -8,9 +8,19 @@ import { TextFieldSimpleElement } from './text-field-simple-element';
<input type="text" form="parentForm"
[style.width.px]="elementModel.width"
[style.height.px]="elementModel.height"
+ [style.line-height.px]="elementModel.fontProps.fontSize"
+ [style.color]="elementModel.fontProps.fontColor"
+ [style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
+ [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
value="{{elementModel.value}}"
(input)="setFormValue($any($event.target).value)">
- `
+ `,
+ styles: [
+ 'input {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}'
+ ]
})
export class TextFieldSimpleComponent extends FormElementComponent {
@Input() elementModel!: TextFieldSimpleElement;
--
GitLab