Add fixedSize styling to most elements

Elements are supposed to be centred when this setting is used. Since it 
is the same CSS for almost all element components it is put into global 
styles.

Missing components: video, spelling.

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)"

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;}'
   ]
 })

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"

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}',

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 {

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"

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">

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 {

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}',

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"

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"

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"

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"

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"

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%);
+}