diff --git a/projects/common/ui-elements/audio/audio.component.ts b/projects/common/ui-elements/audio/audio.component.ts
index 39d7f65b867c5fcb97fa8f1f9a52de3e10232ef2..c9fc692b196b6f8448b5df898b51a1ee5ca5a6f3 100644
--- a/projects/common/ui-elements/audio/audio.component.ts
+++ b/projects/common/ui-elements/audio/audio.component.ts
@@ -5,8 +5,10 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
@Component({
selector: 'app-audio',
template: `
- <div [style.width.%]="100"
- [style.height.%]="100">
+ <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">
<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 42e7824bed3b13e4951ce5212a80f347782650ab..4b83584e47202960991b001632b8b0c05811ee33 100644
--- a/projects/common/ui-elements/button/button.component.ts
+++ b/projects/common/ui-elements/button/button.component.ts
@@ -39,7 +39,6 @@ import { ButtonElement } from './button-element';
styles: [
'.dynamic-image {width: 100%; height: fit-content;}',
'.static-image {max-width: 100%; max-height: 100%; display: grid;}', // grid: to prevent scrollbars
- '.center-content {display: block; margin: auto; top: 50%; transform: translateY(-50%);}',
'.fixed-size-dynamic-image {position: relative; object-fit: scale-down;}'
]
})
diff --git a/projects/common/ui-elements/checkbox/checkbox.component.ts b/projects/common/ui-elements/checkbox/checkbox.component.ts
index 0a2035fa670c66b112cbce287b4bc066b3747255..f35e11b8565dd5e2a089634930327d0d8dfce4ec 100644
--- a/projects/common/ui-elements/checkbox/checkbox.component.ts
+++ b/projects/common/ui-elements/checkbox/checkbox.component.ts
@@ -7,8 +7,10 @@ import { CheckboxElement } from './checkbox-element';
selector: 'app-checkbox',
template: `
<div class="mat-form-field"
- [style.width.%]="100"
- [style.height.%]="100"
+ [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"
[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 427cc4d94326fe87d3778aac7abdc6477e837023..1348395a1db27ca5629c01a8d80f059150fe7ab2 100644
--- a/projects/common/ui-elements/cloze/cloze.component.ts
+++ b/projects/common/ui-elements/cloze/cloze.component.ts
@@ -9,81 +9,86 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'app-cloze',
template: `
- <p *ngFor="let paragraph of elementModel.parts; let i = index"
- [style.line-height.%]="elementModel.fontProps.lineHeight"
- [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' : ''">
- <ng-container *ngFor="let part of paragraph; let j = index">
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
+ <p *ngFor="let paragraph of elementModel.parts; let i = index"
+ [style.line-height.%]="elementModel.fontProps.lineHeight"
+ [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' : ''">
+ <ng-container *ngFor="let part of paragraph; let j = index">
- <span *ngIf="part.type === 'p'"
- [innerHTML]="part.value"
- [style]="part.style">
- </span>
+ <span *ngIf="part.type === 'p'"
+ [innerHTML]="part.value"
+ [style]="part.style">
+ </span>
- <h1 *ngIf="part.type === 'h1'"
- [innerHTML]="part.value"
- [style.display]="'inline'"
- [style]="part.style">
- </h1>
- <h2 *ngIf="part.type === 'h2'"
- [innerHTML]="part.value"
- [style.display]="'inline'"
- [style]="part.style">
- </h2>
- <h3 *ngIf="part.type === 'h3'"
- [innerHTML]="part.value"
- [style.display]="'inline'"
- [style]="part.style">
- </h3>
- <h4 *ngIf="part.type === 'h4'"
- [innerHTML]="part.value"
- [style.display]="'inline'"
- [style]="part.style">
- </h4>
+ <h1 *ngIf="part.type === 'h1'"
+ [innerHTML]="part.value"
+ [style.display]="'inline'"
+ [style]="part.style">
+ </h1>
+ <h2 *ngIf="part.type === 'h2'"
+ [innerHTML]="part.value"
+ [style.display]="'inline'"
+ [style]="part.style">
+ </h2>
+ <h3 *ngIf="part.type === 'h3'"
+ [innerHTML]="part.value"
+ [style.display]="'inline'"
+ [style]="part.style">
+ </h3>
+ <h4 *ngIf="part.type === 'h4'"
+ [innerHTML]="part.value"
+ [style.display]="'inline'"
+ [style]="part.style">
+ </h4>
- <span (click)="allowClickThrough || selectElement($any(part.value), $event)">
- <app-dropdown *ngIf="part.type === 'dropdown'" #drowdownComponent
- [parentForm]="parentForm"
- [style.display]="'inline-block'"
- [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
- [elementModel]="$any(part.value)"
- (elementValueChanged)="elementValueChanged.emit($event)">
- </app-dropdown>
- <app-text-field-simple *ngIf="part.type === 'text-field'" #textfieldComponent
+ <span (click)="allowClickThrough || selectElement($any(part.value), $event)">
+ <app-dropdown *ngIf="part.type === 'dropdown'" #drowdownComponent
[parentForm]="parentForm"
[style.display]="'inline-block'"
[style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
[elementModel]="$any(part.value)"
(elementValueChanged)="elementValueChanged.emit($event)">
- </app-text-field-simple>
+ </app-dropdown>
+ <app-text-field-simple *ngIf="part.type === 'text-field'" #textfieldComponent
+ [parentForm]="parentForm"
+ [style.display]="'inline-block'"
+ [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+ [elementModel]="$any(part.value)"
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </app-text-field-simple>
- <app-toggle-button *ngIf="part.type === 'toggle-button'" #radioComponent
- [parentForm]="parentForm"
- [style.display]="'inline-block'"
- [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
- [elementModel]="$any(part.value)"
- (elementValueChanged)="elementValueChanged.emit($event)">
- </app-toggle-button>
+ <app-toggle-button *ngIf="part.type === 'toggle-button'" #radioComponent
+ [parentForm]="parentForm"
+ [style.display]="'inline-block'"
+ [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+ [elementModel]="$any(part.value)"
+ (elementValueChanged)="elementValueChanged.emit($event)">
+ </app-toggle-button>
- <div *ngIf="part.type === 'drop-list'"
- [style.display]="'inline-block'"
- [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
- [style.vertical-align]="'middle'"
- [style.width.px]="$any(part.value).width"
- [style.height.px]="$any(part.value).height">
- <app-drop-list-simple #droplistComponent
- [parentForm]="parentForm"
- (elementValueChanged)="elementValueChanged.emit($event)"
- [elementModel]="$any(part.value)">
- </app-drop-list-simple>
- </div>
- </span>
- </ng-container>
- </p>
+ <div *ngIf="part.type === 'drop-list'"
+ [style.display]="'inline-block'"
+ [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+ [style.vertical-align]="'middle'"
+ [style.width.px]="$any(part.value).width"
+ [style.height.px]="$any(part.value).height">
+ <app-drop-list-simple #droplistComponent
+ [parentForm]="parentForm"
+ (elementValueChanged)="elementValueChanged.emit($event)"
+ [elementModel]="$any(part.value)">
+ </app-drop-list-simple>
+ </div>
+ </span>
+ </ng-container>
+ </p>
+ </div>
`,
styles: [
':host ::ng-deep app-text-field {vertical-align: middle}',
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 336df0d0f85426d5916ff622f83c270f14cd7c56..09ff44a66e163348a399aacaab6250bb1f3f9ae1 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -86,7 +86,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
'.dropList-highlight.cdk-drop-list-dragging {outline: solid;}',
'.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}',
- '.center-content {position: relative; top: 0; bottom: 0; left: 0;right: 0; margin: auto;}'
+ '.center-content {top: unset; transform: unset;}'
]
})
export class DropListComponent extends FormElementComponent {
diff --git a/projects/common/ui-elements/dropdown/dropdown.component.ts b/projects/common/ui-elements/dropdown/dropdown.component.ts
index fa480e36b9e1c4d3544166565073d0536325a7fe..f53e886d987d2e38664dc7797a9e9bbce5f40b15 100644
--- a/projects/common/ui-elements/dropdown/dropdown.component.ts
+++ b/projects/common/ui-elements/dropdown/dropdown.component.ts
@@ -6,8 +6,10 @@ import { DropdownElement } from './dropdown-element';
selector: 'app-dropdown',
template: `
<mat-form-field appearance="fill"
- [style.width.%]="100"
- [style.height.%]="100"
+ [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"
appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor">
<mat-label [style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/frame/frame.component.ts b/projects/common/ui-elements/frame/frame.component.ts
index 06945d71bc0069d26b3133ce71f18c62f7714746..4a63a99c0bbe2dc1c982c058c92d50103860d27c 100644
--- a/projects/common/ui-elements/frame/frame.component.ts
+++ b/projects/common/ui-elements/frame/frame.component.ts
@@ -5,14 +5,16 @@ import { ElementComponent } from '../../directives/element-component.directive';
@Component({
selector: 'app-frame',
template: `
- <div [style.width]="elementModel.borderStyle !== 'hidden' ?
- 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)' :
- '100%'"
- [style.height]="elementModel.borderStyle !== 'hidden' ?
- 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)' :
- '100%'"
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ?
+ elementModel.width + 'px' :
+ 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+ [style.height]="elementModel.positionProps.fixedSize ?
+ elementModel.height + 'px' :
+ 'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
[style.border-style]="elementModel.borderStyle"
- [style.border-width.px]="elementModel.borderStyle !== 'hidden' ? elementModel.borderWidth : ''"
+ [style.border-width.px]="elementModel.borderWidth"
[style.border-color]="elementModel.borderColor"
[style.border-radius.px]="elementModel.borderRadius"
[style.background-color]="elementModel.surfaceProps.backgroundColor">
diff --git a/projects/common/ui-elements/image/image.component.ts b/projects/common/ui-elements/image/image.component.ts
index abe6b90e62427271fcea6ecf9582e17d40ffaf22..07034d5ef5ab62959cbbf2b04fe895d15734adc1 100644
--- a/projects/common/ui-elements/image/image.component.ts
+++ b/projects/common/ui-elements/image/image.component.ts
@@ -10,7 +10,10 @@ import { ValueChangeElement } from '../../models/uI-element';
template: `
<!-- Display Flex ensures that the image container is centered and
that image and magnifier are displayed properly.-->
- <div [style.width.%]="100"
+ <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"
class="image-container"
(mouseover)="magnifierVisible = true"
(mouseenter)="magnifierVisible = true"
@@ -30,9 +33,10 @@ import { ValueChangeElement } from '../../models/uI-element';
</div>
`,
styles: [
- '.image-container{ position: relative }',
- '.max-size-image{ max-width: 100%; max-height: 100% }',
- '.fit-image{ width: 100%; height: 100%; object-fit: contain}'
+ '.image-container {position: relative}',
+ '.max-size-image {max-width: 100%; max-height: 100%}',
+ '.center-content .max-size-image { width: 100%; height: 100%}',
+ '.fit-image {width: 100%; height: 100%; object-fit: contain}'
]
})
export class ImageComponent extends ElementComponent {
diff --git a/projects/common/ui-elements/likert/likert.component.ts b/projects/common/ui-elements/likert/likert.component.ts
index 7ed8be0968eb90820cf11388d8029a525852a859..98237581c4af705f48b0219eadbd8e6648a74ea0 100644
--- a/projects/common/ui-elements/likert/likert.component.ts
+++ b/projects/common/ui-elements/likert/likert.component.ts
@@ -9,6 +9,10 @@ import { CompoundElementComponent } from '../../directives/compound-element.dire
@Component({
selector: 'app-likert',
template: `
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : '100%'">
<div class="mat-typography"
[style.display]="'grid'"
[style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +
@@ -51,6 +55,7 @@ import { CompoundElementComponent } from '../../directives/compound-element.dire
</app-likert-radio-button-group>
</ng-container>
</div>
+ </div>
`,
styles: [
'img {object-fit: contain; max-height: 100%; max-width: 100%; margin: 10px}',
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 7bc4d3250f827feb535d20c7486a8b2202712591..d70370313d693c5131032a1c1b40f4401c0cf606 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,9 +5,11 @@ import { FormElementComponent } from '../../directives/form-element-component.di
@Component({
selector: 'app-radio-group-images',
template: `
- <div [style.width.%]="100"
- [style.height.%]="100"
- [style.display]="'grid'"
+ <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"
+ [style.display]="'grid !important'"
[style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
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 6a8ffc79d119df6ed8a7d71a096515982f10ec1b..ed5db71aecef2d6d891a9944c3bb225abd6ad816 100644
--- a/projects/common/ui-elements/radio/radio-button-group.component.ts
+++ b/projects/common/ui-elements/radio/radio-button-group.component.ts
@@ -6,8 +6,10 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
selector: 'app-radio-button-group',
template: `
<div class="mat-form-field"
- [style.width.%]="100"
- [style.height.%]="100"
+ [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"
[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 5fc323cdd42aece95cfd3e31ced9851bbe076675..305288216f3e8a117c20938f81c1cbd503b8e31d 100644
--- a/projects/common/ui-elements/slider/slider.component.ts
+++ b/projects/common/ui-elements/slider/slider.component.ts
@@ -9,8 +9,10 @@ import { FormElementComponent } from '../../directives/form-element-component.di
template: `
<div fxLayout="column"
[style.background-color]="elementModel.surfaceProps.backgroundColor"
- [style.width.%]="100"
- [style.height.%]="100">
+ [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 *ngIf="elementModel.label"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
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 5f298a259067d066ddfa2150f10e34928375401e..e5145471bb77dcda88fea894d4c99cfe6b89fb63 100644
--- a/projects/common/ui-elements/text-area/text-area.component.ts
+++ b/projects/common/ui-elements/text-area/text-area.component.ts
@@ -6,8 +6,10 @@ import { TextAreaElement } from './text-area-element';
selector: 'app-text-area',
template: `
<mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}"
- [style.width.%]="100"
- [style.min-height.%]="100"
+ [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 &&
+ elementModel.positionProps.fixedSize"
appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index ce445248483fe79648ac4ac2af78aa921a1f707b..9e887078b55fbfba8a4092b21f439f10acd8807c 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -8,8 +8,10 @@ import { ValueChangeElement } from '../../models/uI-element';
@Component({
selector: 'app-text',
template: `
- <div [style.width.%]="100"
- [style.height]="'auto'">
+ <div [class.center-content]="elementModel.positionProps.dynamicPositioning &&
+ elementModel.positionProps.fixedSize"
+ [style.width]="elementModel.positionProps.fixedSize ? elementModel.width + 'px' : '100%'"
+ [style.height]="elementModel.positionProps.fixedSize ? elementModel.height + 'px' : 'auto'">
<div *ngIf="elementModel.highlightableYellow ||
elementModel.highlightableTurquoise ||
elementModel.highlightableOrange"
diff --git a/projects/editor/src/styles.css b/projects/editor/src/styles.css
index 4e417b5488027739c717179a30e15cb51bf18fcd..d0c4011dc2b6de1e4dbe416c92788af7ce0325f0 100644
--- a/projects/editor/src/styles.css
+++ b/projects/editor/src/styles.css
@@ -63,3 +63,11 @@ blockquote:after {
blockquote p {
display: inline;
}
+
+.center-content {
+ position: relative;
+ display: block !important;
+ margin: auto !important;
+ top: 50%;
+ transform: translateY(-50%);
+}