From b1674ac2950bebf12236fca4ad3b8d10990129b9 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Fri, 1 Oct 2021 12:13:35 +0200
Subject: [PATCH] [player] Add styles for checkbox and radio button on error
* Adapts their appearance to mat-form-fields
* Fix coloring of background for checkboxes
---
.../common/element-components/checkbox.component.ts | 11 +++++++----
.../radio-button-group.component.ts | 8 +++++---
projects/editor/src/app/UnitFactory.ts | 2 +-
3 files changed, 13 insertions(+), 8 deletions(-)
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 1c0b32fa9..dd417ab5f 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -6,12 +6,12 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-checkbox',
template: `
- <div class="mat-form-field">
+ <div class="mat-form-field"
+ [style.width.%]="100"
+ [style.height.%]="100"
+ [style.background-color]="elementModel.backgroundColor">
<mat-checkbox #checkbox class="example-margin"
[formControl]="elementFormControl"
- [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"
@@ -21,6 +21,9 @@ import { FormElementComponent } from '../form-element-component.directive';
<div [innerHTML]="elementModel.label"></div>
</mat-checkbox>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
+ [style.margin-top.px]="5"
+ [style.position]="'absolute'"
+ [style.display]="'block'"
[style.font-size.%]="75">
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index ca91b333c..335a77570 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -5,7 +5,7 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-radio-button-group',
template: `
- <div class="mat-form-field"
+ <div class="mmatd"
[style.width.%]="100"
[style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
@@ -17,14 +17,16 @@ import { FormElementComponent } from '../form-element-component.directive';
[style.text-decoration]="elementModel.underline ? 'underline' : ''">
<label [innerHTML]="elementModel.label" id="radio-group-label"></label>
<mat-radio-group aria-labelledby="radio-group-label"
- [style.margin-bottom.px]="20"
+ [style.margin-bottom.px]="25"
[fxLayout]="elementModel.alignment"
[formControl]="elementFormControl">
<mat-radio-button *ngFor="let option of elementModel.options" [value]="option">
{{option}}
</mat-radio-button>
<mat-error *ngIf="elementFormControl.errors && elementFormControl.touched"
- [style.font-size.%]="75">
+ [style.font-size.%]="75"
+ [style.margin-top.px]="25"
+ [style.position]="'absolute'">
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</mat-radio-group>
diff --git a/projects/editor/src/app/UnitFactory.ts b/projects/editor/src/app/UnitFactory.ts
index e3ef2806c..e5df2ab2f 100644
--- a/projects/editor/src/app/UnitFactory.ts
+++ b/projects/editor/src/app/UnitFactory.ts
@@ -176,7 +176,7 @@ export function createRadioButtonGroupElement(): RadioButtonGroupElement {
...createInputUIElement('Beschriftung Optionsfeld', undefined),
...createTextUIElement(),
...createSurfaceUIElement(),
- height: 75,
+ height: 85,
backgroundColor: 'transparent'
};
}
--
GitLab