From 9a9844259d860250f7009fed249942be2f466633 Mon Sep 17 00:00:00 2001
From: jojohoch <joachim.hoch@iqb.hu-berlin.de>
Date: Thu, 17 Feb 2022 14:23:15 +0100
Subject: [PATCH] Fix height of elements with dynamic positioning and fixed
size
- Use fixedSize always together with dynamicPositioning!
- Rename css class 'center-content' to 'fixed-size-element'
'fixed-size-element' ensures that the content does not overflow.
---
docs/release-notes-editor.txt | 4 ++
docs/release-notes-player.txt | 3 +-
projects/common/assets/styles.css | 4 +-
.../ui-elements/audio/audio.component.ts | 10 ++--
.../ui-elements/button/button.component.ts | 56 +++++++++----------
.../checkbox/checkbox.component.ts | 8 ++-
.../ui-elements/cloze/cloze.component.ts | 8 ++-
.../drop-list/drop-list.component.ts | 8 ++-
.../dropdown/dropdown.component.ts | 13 +++--
.../ui-elements/frame/frame.component.ts | 6 +-
.../ui-elements/image/image.component.ts | 9 ++-
.../ui-elements/likert/likert.component.ts | 8 ++-
.../radio-group-images.component.ts | 8 ++-
.../radio/radio-button-group.component.ts | 8 ++-
.../ui-elements/slider/slider.component.ts | 12 ++--
.../spell-correct/spell-correct.component.ts | 10 ++--
.../text-area/text-area.component.ts | 29 ++++++----
.../text-field/text-field.component.ts | 54 ++++++++++--------
.../common/ui-elements/text/text.component.ts | 8 ++-
.../ui-elements/video/video.component.ts | 10 ++--
20 files changed, 157 insertions(+), 119 deletions(-)
diff --git a/docs/release-notes-editor.txt b/docs/release-notes-editor.txt
index 7ecf9edd8..d91656937 100644
--- a/docs/release-notes-editor.txt
+++ b/docs/release-notes-editor.txt
@@ -1,5 +1,9 @@
Editor
======
+1.26.0
+- Fix height of elements with dynamic positioning and fixed size
+- Fix dimensions of image elements with dynamic positioning and fixed size
+
1.25.0
- Remove border of slider rectangle in number line mode at position 0
- Fix coloring of the slider rectangle in number line mode at position 0
diff --git a/docs/release-notes-player.txt b/docs/release-notes-player.txt
index 7df24784e..6132d2a40 100644
--- a/docs/release-notes-player.txt
+++ b/docs/release-notes-player.txt
@@ -1,7 +1,8 @@
Player
======
1.20.0
-- Fix dimensions of images with dynamicPositioning and fixedSize
+- Fix height of elements with dynamic positioning and fixed size
+- Fix dimensions of image elements with dynamic positioning and fixed size
- Fix display of fixed size dynamic elements on iPad
- Fix selecting and marking of text on iPad
diff --git a/projects/common/assets/styles.css b/projects/common/assets/styles.css
index 83b0c8ca4..90dcb03be 100644
--- a/projects/common/assets/styles.css
+++ b/projects/common/assets/styles.css
@@ -57,6 +57,6 @@ blockquote p {
height: 100%;
}
-.center-content {
- margin: auto
+.fixed-size-element {
+ overflow: auto;
}
diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 353657bf4..6f3964ada 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,10 +5,12 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-audio',
template: `
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize">
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'">
<audio #player
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
diff --git a/projects/common/ui-elements/button/button.component.ts b/projects/common/ui-elements/button/button.component.ts
index da904596e..0c7694952 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -7,40 +7,38 @@ import { ButtonElement } from './button-element';
@Component({
selector: 'aspect-button',
template: `
- <button *ngIf="!elementModel.imageSrc" mat-button
- type='button'
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [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' : ''"
- [style.border-radius.px]="elementModel.borderRadius"
- (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
- {{elementModel.label}}
- </button>
- <input *ngIf="elementModel.imageSrc" type="image"
- [src]="elementModel.imageSrc | safeResourceUrl"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [class.fixed-size-dynamic-image]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
- [class]="elementModel.positionProps.dynamicPositioning ? 'dynamic-image' : 'static-image'"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : null"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : null"
- [alt]="'imageNotFound' | translate"
- (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'">
+ <button *ngIf="!elementModel.imageSrc" mat-button
+ type='button'
+ class="fill-container"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor"
+ [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' : ''"
+ [style.border-radius.px]="elementModel.borderRadius"
+ (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+ {{elementModel.label}}
+ </button>
+ <input *ngIf="elementModel.imageSrc" type="image"
+ [src]="elementModel.imageSrc | safeResourceUrl"
+ [class]="elementModel.positionProps.dynamicPositioning &&
+ !elementModel.positionProps.fixedSize ? 'dynamic-image' : 'static-image'"
+ [alt]="'imageNotFound' | translate"
+ (click)="elementModel.action ? navigationRequested.emit(elementModel.action) : false">
+ </div>
`,
styles: [
'.dynamic-image {width: 100%; height: fit-content;}',
'.static-image {max-width: 100%; max-height: 100%; display: grid;}', // grid: to prevent scrollbars
- '.fixed-size-dynamic-image {position: relative; object-fit: scale-down;}',
- '.center-content {margin: auto !important;}' // overwrite: margin of mat-button
+ '.fill-container {width: 100%; height: 100%;}'
]
})
export class ButtonComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index 0c609cce6..567930d7c 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -7,10 +7,12 @@ import { CheckboxElement } from './checkbox-element';
selector: 'aspect-checkbox',
template: `
<div class="mat-form-field"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
[style.background-color]="elementModel.surfaceProps.backgroundColor">
<mat-checkbox #checkbox class="example-margin"
[formControl]="elementFormControl"
diff --git a/projects/common/ui-elements/cloze/cloze.component.ts b/projects/common/ui-elements/cloze/cloze.component.ts
index 861e78d28..b15c9dd00 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -13,10 +13,12 @@ import { ElementComponent } from '../../directives/element-component.directive';
<ng-container *ngIf="elementModel.document.content.length == 0">
Kein Dokument vorhanden
</ng-container>
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : 'auto'">
<ng-container *ngFor="let part of elementModel.document.content">
<ul *ngIf="part.type === 'bulletList'"
[style.font-size]="part.attrs.fontSize"
diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index 065db3716..3475edfb6 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -14,10 +14,12 @@ import { DragNDropValueObject } from '../../models/uI-element';
<!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
<!-- class style.-->
<div class="list"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
[ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
[style.outline-color]="elementModel.highlightReceivingDropListColor"
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index ec3b4e38b..6541f0cc4 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -5,12 +5,15 @@ import { DropdownElement } from './dropdown-element';
@Component({
selector: 'aspect-dropdown',
template: `
- <mat-form-field appearance="fill"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field
+ appearance="fill"
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
<mat-label [style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
[style.font-size.px]="elementModel.fontProps.fontSize"
diff --git a/projects/common/ui-elements/frame/frame.component.ts b/projects/common/ui-elements/frame/frame.component.ts
index 2fc18b10b..075c1c582 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,12 +5,12 @@ import { ElementComponent } from '../../directives/element-component.directive';
@Component({
selector: 'aspect-frame',
template: `
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ?
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
elementModel.width + 'px' :
'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
- [style.height]="elementModel.positionProps.fixedSize ?
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
elementModel.height + 'px' :
'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
[style.border-style]="elementModel.borderStyle"
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index 7de353f1d..04e498c85 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -8,10 +8,10 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-image',
template: `
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize"
+ <div [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
class="image-container"
(mouseover)="magnifierVisible = true"
(mouseenter)="magnifierVisible = true"
@@ -33,7 +33,6 @@ import { ValueChangeElement } from '../../models/uI-element';
styles: [
'.image-container {position: relative}',
'.max-size-image {max-width: 100%; max-height: 100%}',
- '.center-content .max-size-image { object-fit: contain; width: 100%; height: 100%}',
'.fit-image {width: 100%; height: 100%; object-fit: contain}'
]
})
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index 06656d878..d122db116 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -13,10 +13,12 @@ import { ElementComponent } from '../../directives/element-component.directive';
<div *ngIf="elementModel.rows.length === 0 && elementModel.columns.length === 0">
Keine Zeilen oder Spalten vorhanden
</div>
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'">
<div class="mat-typography"
[style.display]="'grid'"
[style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
diff --git a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
index e7da1b453..2e207b71f 100644
--- a/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
+++ b/projects/common/ui-elements/radio-with-images/radio-group-images.component.ts
@@ -5,10 +5,12 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'aspect-radio-group-images',
template: `
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
[style.display]="'grid !important'"
[style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
diff --git a/projects/common/ui-elements/radio/radio-button-group.component.ts b/projects/common/ui-elements/radio/radio-button-group.component.ts
index 9ec65927e..c50854e4c 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -6,10 +6,12 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
selector: 'aspect-radio-button-group',
template: `
<div class="mat-form-field"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/slider/slider.component.ts b/projects/common/ui-elements/slider/slider.component.ts
index 44cbded71..d0ecee6c1 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -8,11 +8,13 @@ import { FormElementComponent } from '../../directives/form-element-component.di
selector: 'aspect-slider',
template: `
<div fxLayout="column"
- [style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize">
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ [style.background-color]="elementModel.surfaceProps.backgroundColor">
<div *ngIf="elementModel.label"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/spell-correct/spell-correct.component.ts b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
index 046635e17..1f2e946f4 100644
--- a/projects/common/ui-elements/spell-correct/spell-correct.component.ts
+++ b/projects/common/ui-elements/spell-correct/spell-correct.component.ts
@@ -6,10 +6,12 @@ import { SpellCorrectElement } from './spell-correct-element';
@Component({
selector: 'aspect-spell-correct',
template: `
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
- elementModel.positionProps.fixedSize">
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'">
<div fxFlex
fxLayout="column"
aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
diff --git a/projects/common/ui-elements/text-area/text-area.component.ts b/projects/common/ui-elements/text-area/text-area.component.ts
index 30c1f17e5..86d7fb170 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -7,19 +7,24 @@ import { TextAreaElement } from './text-area-element';
@Component({
selector: 'aspect-text-area',
template: `
- <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.min-height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field
+ [ngClass]="{ 'no-label' : !elementModel.label}"
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [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' : ''"
- [appearance]="$any(elementModel.appearance)">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.min-height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [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' : ''"
+ [appearance]="$any(elementModel.appearance)">
<mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label>
<textarea matInput #input
autocomplete="off" rows="{{elementModel.rowCount}}"
diff --git a/projects/common/ui-elements/text-field/text-field.component.ts b/projects/common/ui-elements/text-field/text-field.component.ts
index 7b1f78045..d9a3aa149 100644
--- a/projects/common/ui-elements/text-field/text-field.component.ts
+++ b/projects/common/ui-elements/text-field/text-field.component.ts
@@ -8,19 +8,22 @@ import { TextFieldElement } from './text-field-element';
@Component({
selector: 'aspect-text-field',
template: `
- <mat-form-field *ngIf="elementModel.label !== ''"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field
+ *ngIf="elementModel.label !== ''"
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [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' : ''"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [appearance]="$any(elementModel.appearance)">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ [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' : ''"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [appearance]="$any(elementModel.appearance)">
<mat-label>{{elementModel.label}}</mat-label>
<input matInput type="text" #input autocomplete="off"
[formControl]="elementFormControl"
@@ -39,19 +42,22 @@ import { TextFieldElement } from './text-field-element';
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</mat-form-field>
- <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <mat-form-field
+ *ngIf="elementModel.label === ''" class="small-input"
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [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' : ''"
- aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
- [appearance]="$any(elementModel.appearance)">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'"
+ [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' : ''"
+ aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
+ [appearance]="$any(elementModel.appearance)">
<input matInput type="text" #input autocomplete="off"
[formControl]="elementFormControl"
[value]="$any(elementModel.value)"
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index 131dca7bf..fddc54dc8 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,10 +8,12 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'aspect-text',
template: `
- <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : 'auto'">
<aspect-marking-bar
*ngIf="elementModel.highlightableYellow ||
elementModel.highlightableTurquoise ||
diff --git a/projects/common/ui-elements/video/video.component.ts b/projects/common/ui-elements/video/video.component.ts
index f6a9502fd..9f645f898 100644
--- a/projects/common/ui-elements/video/video.component.ts
+++ b/projects/common/ui-elements/video/video.component.ts
@@ -5,11 +5,13 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'aspect-video',
template: `
- <div [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
- [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'"
- [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ <div [class]="elementModel.scale ? 'fit-video' : 'max-size-video'"
+ [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
elementModel.positionProps.fixedSize"
- [class]="elementModel.scale ? 'fit-video' : 'max-size-video'">
+ [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' : '100%'">
<video #player
(playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
(pause)="onMediaPlayStatusChanged.emit(null)"
--
GitLab