From dabe6950bc7008aded9c9428b151037d4bbc113b Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Sat, 25 Sep 2021 10:46:31 +0200
Subject: [PATCH] [player] Make textarea resizeable
Refactor styles for elements and element overlays to achieve stretching
of dynamic sections when text areas are resized
---
projects/common/element-components/text-area.component.ts | 5 +++--
.../components/element-overlay/element-overlay.component.ts | 2 +-
.../player/src/app/components/element/element.component.html | 4 ++--
projects/player/src/app/components/page/page.component.html | 2 +-
.../player/src/app/components/section/section.component.html | 3 +--
5 files changed, 8 insertions(+), 8 deletions(-)
diff --git a/projects/common/element-components/text-area.component.ts b/projects/common/element-components/text-area.component.ts
index 216ce06b1..f92f2f4aa 100644
--- a/projects/common/element-components/text-area.component.ts
+++ b/projects/common/element-components/text-area.component.ts
@@ -6,7 +6,7 @@ import { FormElementComponent } from '../form-element-component.directive';
selector: 'app-text-area',
template: `
<mat-form-field [style.width.%]="100"
- [style.height.%]="100"
+ [style.min-height.%]="100"
[style.background-color]="elementModel.backgroundColor"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
@@ -19,8 +19,9 @@ import { FormElementComponent } from '../form-element-component.directive';
(focus)="onFocus.emit(input)"
(blur)="onBlur.emit(input)"
placeholder="{{elementModel.label}}"
+ [style.min-width.%]="100"
[style.resize]="elementModel.resizeEnabled ? 'both' : 'none'">
- </textarea>
+ </textarea>
</mat-form-field>
`
})
diff --git a/projects/player/src/app/components/element-overlay/element-overlay.component.ts b/projects/player/src/app/components/element-overlay/element-overlay.component.ts
index b29192c46..da16bd367 100644
--- a/projects/player/src/app/components/element-overlay/element-overlay.component.ts
+++ b/projects/player/src/app/components/element-overlay/element-overlay.component.ts
@@ -38,7 +38,7 @@ export class ElementOverlayComponent implements OnInit {
const elementComponentRef = this.elementComponentContainer.createComponent(elementComponentFactory);
elementComponentRef.location.nativeElement.style.display = 'block';
- elementComponentRef.location.nativeElement.style.height = this.elementModel.type === 'text' ? 'auto' : '100%';
+ elementComponentRef.location.nativeElement.style.height = '100%';
const elementComponent = elementComponentRef.instance;
elementComponent.elementModel = this.elementModel;
diff --git a/projects/player/src/app/components/element/element.component.html b/projects/player/src/app/components/element/element.component.html
index 2be6d60e0..1c371fed2 100644
--- a/projects/player/src/app/components/element/element.component.html
+++ b/projects/player/src/app/components/element/element.component.html
@@ -1,7 +1,7 @@
<app-element-overlay
[style.overflow]="'auto'"
- [style.display]="'block'"
- [style.width]="elementModel.dynamicPositioning ? '100%': elementModel.width + 'px'"
+ [style.display]="elementModel.dynamicPositioning ?'contents' : 'block'"
+ [style.width]="elementModel.dynamicPositioning ? '100%': elementModel.width + 'px'"
[style.height]="elementModel.dynamicPositioning ? '100%' : elementModel.height + 'px'"
[elementModel]="elementModel"
[parentForm]="elementForm"
diff --git a/projects/player/src/app/components/page/page.component.html b/projects/player/src/app/components/page/page.component.html
index ad3c29be7..8f4f1daed 100644
--- a/projects/player/src/app/components/page/page.component.html
+++ b/projects/player/src/app/components/page/page.component.html
@@ -8,7 +8,7 @@
[section]="section"
[ngStyle]="{
position: 'relative',
- display: 'block',
+ display: section.dynamicPositioning ? 'contents' : 'block',
overflow: 'auto',
width: '100%',
'background-color': section.backgroundColor,
diff --git a/projects/player/src/app/components/section/section.component.html b/projects/player/src/app/components/section/section.component.html
index d3ca802be..aede4daf3 100644
--- a/projects/player/src/app/components/section/section.component.html
+++ b/projects/player/src/app/components/section/section.component.html
@@ -30,8 +30,7 @@
[style.grid-column-end]="element.gridColumnEnd"
[style.grid-row-start]="element.gridRowStart"
[style.grid-row-end]="element.gridRowEnd"
- [style.display]=" element.type === 'radio' ? 'inherit' : 'block'"
- [style.height.%]="100"
+ [style.display]="element.dynamicPositioning ? (element.type === 'radio') ? 'contents' : 'inline' : 'block'"
[elementModel]="element"
[parentForm]="sectionForm"
[parentArrayIndex]="i">
--
GitLab