From 9e3c0613e0823ad4d40dbefe6ed1a991d46de59d Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Tue, 3 Aug 2021 19:47:00 +0200
Subject: [PATCH] Set all elements width and heigth to 100%
This is in preparation for dynamic layouting.
The actual dimensions are set by the overlay component which differs but
is existent for both editor and player.
---
.../element-components/button.component.ts | 4 +--
.../element-components/checkbox.component.ts | 4 +--
.../element-components/dropdown.component.ts | 4 +--
.../number-field.component.ts | 4 +--
.../radio-button-group.component.ts | 4 +--
.../element-components/text-area.component.ts | 28 +++++++++----------
.../text-field.component.ts | 4 +--
.../element-components/text.component.ts | 24 ++++++++--------
8 files changed, 38 insertions(+), 38 deletions(-)
diff --git a/projects/common/element-components/button.component.ts b/projects/common/element-components/button.component.ts
index b02d161c3..5570d72c3 100644
--- a/projects/common/element-components/button.component.ts
+++ b/projects/common/element-components/button.component.ts
@@ -6,8 +6,8 @@ import { ButtonElement } from '../unit';
selector: 'app-button',
template: `
<button mat-button
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/checkbox.component.ts b/projects/common/element-components/checkbox.component.ts
index 4354ce876..1554408cd 100644
--- a/projects/common/element-components/checkbox.component.ts
+++ b/projects/common/element-components/checkbox.component.ts
@@ -7,8 +7,8 @@ import { FormElementComponent } from '../form-element-component.directive';
template: `
<mat-checkbox #checkbox class="example-margin"
[formControl]="elementFormControl"
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/dropdown.component.ts b/projects/common/element-components/dropdown.component.ts
index 349db5e9e..7774b74a0 100644
--- a/projects/common/element-components/dropdown.component.ts
+++ b/projects/common/element-components/dropdown.component.ts
@@ -6,8 +6,8 @@ import { FormElementComponent } from '../form-element-component.directive';
selector: 'app-dropdown',
template: `
<mat-form-field appearance="fill"
- [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor">
<mat-label [style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/number-field.component.ts b/projects/common/element-components/number-field.component.ts
index d9199ac18..a5f5cebd1 100644
--- a/projects/common/element-components/number-field.component.ts
+++ b/projects/common/element-components/number-field.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-number-field',
template: `
- <mat-form-field [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ <mat-form-field [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/radio-button-group.component.ts b/projects/common/element-components/radio-button-group.component.ts
index 43c9ef789..db537c866 100644
--- a/projects/common/element-components/radio-button-group.component.ts
+++ b/projects/common/element-components/radio-button-group.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-radio-button-group',
template: `
- <div [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ <div [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 95b7b9e54..08c0d7ed6 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -5,20 +5,20 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-text-area',
template: `
- <mat-form-field [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
- [style.background-color]="elementModel.backgroundColor"
- [style.color]="elementModel.fontColor"
- [style.font-family]="elementModel.font"
- [style.font-size.px]="elementModel.fontSize"
- [style.font-weight]="elementModel.bold ? 'bold' : ''"
- [style.font-style]="elementModel.italic ? 'italic' : ''"
- [style.text-decoration]="elementModel.underline ? 'underline' : ''">
- <textarea matInput [formControl]="elementFormControl"
- placeholder="{{elementModel.label}}"
- [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
- </textarea>
- </mat-form-field>
+ <mat-form-field [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"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''">
+ <textarea matInput [formControl]="elementFormControl"
+ placeholder="{{elementModel.label}}"
+ [style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
+ </textarea>
+ </mat-form-field>
`
})
export class TextAreaComponent extends FormElementComponent {
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 5fc6eee6b..8ddf56219 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -5,8 +5,8 @@ import { FormElementComponent } from '../form-element-component.directive';
@Component({
selector: 'app-text-field',
template: `
- <mat-form-field [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
+ <mat-form-field [style.width.%]="100"
+ [style.height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
diff --git a/projects/common/element-components/text.component.ts b/projects/common/element-components/text.component.ts
index d39283edd..510198361 100644
--- a/projects/common/element-components/text.component.ts
+++ b/projects/common/element-components/text.component.ts
@@ -5,18 +5,18 @@ import { ElementComponent } from '../element-component.directive';
@Component({
selector: 'app-text',
template: `
- <div [style.width.px]="elementModel.width"
- [style.height.px]="elementModel.height"
- [style.background-color]="elementModel.backgroundColor"
- [style.color]="elementModel.fontColor"
- [style.font-family]="elementModel.font"
- [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.white-space]="'pre-wrap'">
- {{elementModel.text}}
- </div>
+ <div [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"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ [style.white-space]="'pre-wrap'">
+ {{elementModel.text}}
+ </div>
`
})
export class TextComponent extends ElementComponent {
--
GitLab