Refactor fixed size of dynamically positioned elements

Move required styles and classes to the overlays of player and editor

projects/common/assets/styles.css

@@ -57,6 +57,6 @@ blockquote p {
   height: 100%;
 }
 
-.fixed-size-element {
+.fixed-size-content {
   overflow: auto;
 }

projects/common/ui-elements/audio/audio.component.ts

@@ -5,12 +5,8 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
 @Component({
   selector: 'aspect-audio',
   template: `
-    <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 [style.width.%]="100"
+         [style.height.%]="100">
       <audio #player
              (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
              (pause)="onMediaPlayStatusChanged.emit(null)"

projects/common/ui-elements/button/button.component.ts

@@ -7,12 +7,8 @@ import { ButtonElement } from './button-element';
 @Component({
   selector: 'aspect-button',
   template: `
-    <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 [style.width.%]="100"
+         [style.height.%]="100">
       <button *ngIf="!elementModel.imageSrc" mat-button
               type='button'
               class="fill-container"

projects/common/ui-elements/checkbox/checkbox.component.ts

@@ -7,12 +7,8 @@ import { CheckboxElement } from './checkbox-element';
   selector: 'aspect-checkbox',
   template: `
     <div class="mat-form-field"
-         [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.width.%]="100"
+         [style.height.%]="100"
          [style.background-color]="elementModel.surfaceProps.backgroundColor">
       <mat-checkbox #checkbox class="example-margin"
                     [formControl]="elementFormControl"

projects/common/ui-elements/cloze/cloze.component.ts

@@ -13,12 +13,8 @@ import { ElementComponent } from '../../directives/element-component.directive';
     <ng-container *ngIf="elementModel.document.content.length == 0">
       Kein Dokument vorhanden
     </ng-container>
-    <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' : 'auto'">
+    <div [style.width.%]="100"
+         [style.height]="'auto'">
       <ng-container *ngFor="let part of elementModel.document.content">
         <ul *ngIf="part.type === 'bulletList'"
             [style.font-size]="part.attrs.fontSize"

projects/common/ui-elements/drop-list/drop-list.component.ts

@@ -14,12 +14,8 @@ 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"
-           [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.width.%]="100"
+           [style.height.%]="100"
            [ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
            [class.dropList-highlight]="elementModel.highlightReceivingDropList"
            [style.outline-color]="elementModel.highlightReceivingDropListColor"

projects/common/ui-elements/dropdown/dropdown.component.ts

@@ -7,12 +7,8 @@ import { DropdownElement } from './dropdown-element';
   template: `
     <mat-form-field
         appearance="fill"
-        [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.width.%]="100"
+        [style.height.%]="100"
         aspectInputBackgroundColor [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,8 @@ import { ElementComponent } from '../../directives/element-component.directive';
 @Component({
   selector: 'aspect-frame',
   template: `
-    <div [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
-                                   elementModel.positionProps.fixedSize"
-         [style.width]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
-              elementModel.width + 'px' :
-              'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
-         [style.height]="elementModel.positionProps.dynamicPositioning && elementModel.positionProps.fixedSize ?
-              elementModel.height + 'px' :
-              'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+    <div [style.width]="'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
+         [style.height]="'calc(100% - ' + (elementModel.borderWidth * 2) + 'px)'"
          [style.border-style]="elementModel.borderStyle"
          [style.border-width.px]="elementModel.borderWidth"
          [style.border-color]="elementModel.borderColor"

projects/common/ui-elements/image/image.component.ts

@@ -8,10 +8,8 @@ import { ValueChangeElement } from '../../models/uI-element';
 @Component({
   selector: 'aspect-image',
   template: `
-    <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%'"
+    <div [style.width.%]="100"
+         [style.height.%]="100"
          class="image-container"
          (mouseover)="magnifierVisible = true"
          (mouseenter)="magnifierVisible = true"

projects/common/ui-elements/likert/likert.component.ts

@@ -13,12 +13,8 @@ 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.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 [style.width.%]="100"
+         [style.height.%]="100">
       <div class="mat-typography"
            [style.display]="'grid'"
            [style.grid-template-columns]="elementModel.firstColumnSizeRatio + 'fr ' +

projects/common/ui-elements/radio-with-images/radio-group-images.component.ts

@@ -5,12 +5,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
 @Component({
   selector: 'aspect-radio-group-images',
   template: `
-    <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 [style.width.%]="100"
+         [style.height.%]="100"
          [style.display]="'grid !important'"
          [style.grid-template-columns]="'1fr '.repeat(elementModel.columns.length)"
          [style.background-color]="elementModel.surfaceProps.backgroundColor"

projects/common/ui-elements/radio/radio-button-group.component.ts

@@ -6,12 +6,8 @@ import { RadioButtonGroupElement } from './radio-button-group-element';
   selector: 'aspect-radio-button-group',
   template: `
     <div class="mat-form-field"
-         [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.width.%]="100"
+         [style.height.%]="100"
          [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

@@ -8,12 +8,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
   selector: 'aspect-slider',
   template: `
     <div fxLayout="column"
-         [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.width.%]="100"
+         [style.height.%]="100"
          [style.background-color]="elementModel.surfaceProps.backgroundColor">
       <div *ngIf="elementModel.label"
            [style.color]="elementModel.fontProps.fontColor"

projects/common/ui-elements/spell-correct/spell-correct.component.ts

@@ -6,12 +6,8 @@ import { SpellCorrectElement } from './spell-correct-element';
 @Component({
   selector: 'aspect-spell-correct',
   template: `
-    <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 [style.width.%]="100"
+         [style.height.%]="100">
       <div fxFlex
            fxLayout="column"
            aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"

projects/common/ui-elements/text-area/text-area.component.ts

@@ -9,14 +9,9 @@ import { TextAreaElement } from './text-area-element';
   template: `
     <mat-form-field
         [ngClass]="{ 'no-label' : !elementModel.label}"
-        [class.fixed-size-element]="elementModel.positionProps.dynamicPositioning &&
-                                    elementModel.positionProps.fixedSize"
-        [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%'"
+        [style.width.%]="100"
+        [style.height.%]="100"
+        [style.min-height.%]="100"
         aspectInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor"
         [style.color]="elementModel.fontProps.fontColor"
         [style.font-family]="elementModel.fontProps.font"

projects/common/ui-elements/text-field/text-field.component.ts

@@ -10,12 +10,8 @@ import { TextFieldElement } from './text-field-element';
   template: `
     <mat-form-field
         *ngIf="elementModel.label !== ''"
-        [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.width.%]="100"
+        [style.height.%]="100"
         [style.color]="elementModel.fontProps.fontColor"
         [style.font-family]="elementModel.fontProps.font"
         [style.font-size.px]="elementModel.fontProps.fontSize"
@@ -44,12 +40,8 @@ import { TextFieldElement } from './text-field-element';
     </mat-form-field>
     <mat-form-field
         *ngIf="elementModel.label === ''" class="small-input"
-        [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.width.%]="100"
+        [style.height.%]="100"
         [style.color]="elementModel.fontProps.fontColor"
         [style.font-family]="elementModel.fontProps.font"
         [style.font-size.px]="elementModel.fontProps.fontSize"
@@ -90,13 +82,13 @@ export class TextFieldComponent extends FormElementComponent {
       validators.push(Validators.required);
     }
     if (this.elementModel.minLength) {
-      validators.push(Validators.minLength(<number>this.elementModel.minLength));
+      validators.push(Validators.minLength(<number> this.elementModel.minLength));
     }
     if (this.elementModel.maxLength) {
-      validators.push(Validators.maxLength(<number>this.elementModel.maxLength));
+      validators.push(Validators.maxLength(<number> this.elementModel.maxLength));
     }
     if (this.elementModel.pattern) {
-      validators.push(Validators.pattern(<string>this.elementModel.pattern));
+      validators.push(Validators.pattern(<string> this.elementModel.pattern));
     }
     return validators;
   }

projects/common/ui-elements/text/text.component.ts

@@ -8,12 +8,8 @@ import { ValueChangeElement } from '../../models/uI-element';
 @Component({
   selector: 'aspect-text',
   template: `
-    <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' : 'auto'">
+    <div [style.width.%]="100"
+         [style.height.%]="100">
       <aspect-marking-bar
           *ngIf="elementModel.highlightableYellow ||
               elementModel.highlightableTurquoise ||

projects/common/ui-elements/video/video.component.ts

@@ -6,12 +6,8 @@ import { MediaPlayerElementComponent } from '../../directives/media-player-eleme
   selector: 'aspect-video',
   template: `
     <div [class]="elementModel.scale ? 'fit-video' : 'max-size-video'"
-         [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.width.%]="100"
+         [style.height.%]="100">
       <video #player
              (playing)="onMediaPlayStatusChanged.emit(this.elementModel.id)"
              (pause)="onMediaPlayStatusChanged.emit(null)"

projects/editor/src/app/components/unit-view/page-view/canvas/overlays/dynamic-canvas-overlay.component.ts

@@ -34,7 +34,14 @@ import { UIElement } from '../../../../../../../../common/models/uI-element';
           <div *cdkDragPlaceholder></div>
         </div>
       </div>
-      <ng-template #elementContainer></ng-template>
+      <div [class.fixed-size-content]="element.positionProps?.dynamicPositioning &&
+            element.positionProps?.fixedSize"
+           [style.width]="element.positionProps?.dynamicPositioning && element.positionProps?.fixedSize ?
+                      element.width + 'px' : '100%'"
+           [style.height]="element.positionProps?.dynamicPositioning && element.positionProps?.fixedSize ?
+                      element.height + 'px' : '100%'">
+        <ng-template #elementContainer></ng-template>
+      </div>
     </div>
     <div class="resize-preview"
          [style.position]="'relative'"

projects/player/src/app/components/element-container/element-container.component.html

 <div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
-         'fixed-size-content-wrapper' : 'element-container'"
-     cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
-  <ng-template #elementComponentContainer></ng-template>
+         'fixed-size-content-wrapper' : 'element-container'">
+  <div [class]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+            'fixed-size-content' : 'element-container'"
+       [style.width]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+                      elementModel.width + 'px' : '100%'"
+       [style.height]="elementModel.positionProps?.dynamicPositioning && elementModel.positionProps?.fixedSize ?
+                      elementModel.height + 'px' : '100%'"
+       cdkOverlayOrigin #overlayOrigin="cdkOverlayOrigin">
+    <ng-template #elementComponentContainer></ng-template>
+  </div>
 </div>
 
 <aspect-floating-keyboard