[editor] Fix and improve sizing props panel

- Fix reading values from combinedProperties object. This object has the
needed property in its root.
- Don't show alignment buttons in dynamic mode
- Make the small input fields a little wider so the placeholder text
does not overflow, when there is no valid value to show. This may happen
when multiple elements are selected, which have differing values.

projects/editor/src/app/components/unit-view/page-view/properties-panel/element-sizing-properties.component.ts

@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { UnitService } from '../../../../services/unit.service';
 import { SelectionService } from '../../../../services/selection.service';
-import { UIElement } from '../../../../../../../common/models/uI-element';
+import { PositionedElement, UIElement } from '../../../../../../../common/models/uI-element';
 
 @Component({
   selector: 'app-element-sizing-properties',
@@ -42,9 +42,25 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
                  (ngModelChange)="updateModel.emit(
                     { property: 'yPosition', value: $event, isInputValid: yPosition.valid && $event !== null })">
         </mat-form-field>
+        <ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1">
+          {{'propertiesPanel.alignment' | translate }}
+          <div class="alignment-button-group" fxLayout="row" fxLayoutAlign="center center">
+            <button (click)="alignElements('left')">
+              <mat-icon>align_horizontal_left</mat-icon>
+            </button>
+            <button (click)="alignElements('right')">
+              <mat-icon>align_horizontal_right</mat-icon>
+            </button>
+            <button (click)="alignElements('top')">
+              <mat-icon>align_vertical_top</mat-icon>
+            </button>
+            <button (click)="alignElements('bottom')">
+              <mat-icon>align_vertical_bottom</mat-icon>
+            </button>
+          </div>
+        </ng-container>
       </ng-container>
       <ng-template #elseBlock>
-
         <mat-checkbox *ngIf="combinedProperties.positionProps !== undefined"
                       matTooltip="Element ist nicht mehr dynamisch. Die eingestellte Größe wird benutzt."
                       [checked]="$any(combinedProperties.fixedSize)"
@@ -53,10 +69,10 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
         </mat-checkbox>
 
         <mat-form-field appearance="fill" *ngIf="combinedProperties.positionProps !== undefined">
-          <mat-label *ngIf="!combinedProperties.positionProps.fixedSize">
+          <mat-label *ngIf="!combinedProperties.fixedSize">
             {{'propertiesPanel.minWidth' | translate }}
           </mat-label>
-          <mat-label *ngIf="combinedProperties.positionProps.fixedSize">
+          <mat-label *ngIf="combinedProperties.fixedSize">
             {{'propertiesPanel.width' | translate }}
           </mat-label>
           <input matInput type="number" #width="ngModel" min="0"
@@ -66,20 +82,20 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
                                                      isInputValid: width.valid && $event !== null })">
         </mat-form-field>
 
-        <mat-checkbox *ngIf="combinedProperties.positionProps && !combinedProperties.positionProps.fixedSize"
+        <mat-checkbox *ngIf="combinedProperties.positionProps && !combinedProperties.fixedSize"
                       [checked]="$any(combinedProperties.useMinHeight)"
                       (change)="updateModel.emit({ property: 'useMinHeight', value: $event.checked })">
           {{'propertiesPanel.useMinHeight' | translate }}
         </mat-checkbox>
 
         <mat-form-field *ngIf="combinedProperties.positionProps &&
-                               combinedProperties.positionProps.useMinHeight ||
+                               combinedProperties.useMinHeight ||
                                combinedProperties.positionProps &&
-                               combinedProperties.positionProps.fixedSize" appearance="fill">
-          <mat-label *ngIf="!combinedProperties.positionProps.fixedSize">
+                               combinedProperties.fixedSize" appearance="fill">
+          <mat-label *ngIf="!combinedProperties.fixedSize">
             {{'propertiesPanel.minHeight' | translate }}
           </mat-label>
-          <mat-label *ngIf="combinedProperties.positionProps.fixedSize">
+          <mat-label *ngIf="combinedProperties.fixedSize">
             {{'propertiesPanel.height' | translate }}
           </mat-label>
           <input matInput type="number" #height="ngModel" min="0"
@@ -156,7 +172,7 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
         </div>
       </ng-template>
 
-      <mat-form-field *ngIf="combinedProperties.positionProps" appearance="fill">
+      <mat-form-field *ngIf="combinedProperties.zIndex !== undefined" appearance="fill">
         <mat-label>{{'propertiesPanel.zIndex' | translate }}</mat-label>
         <input matInput type="number" #zIndex="ngModel"
                [ngModel]="combinedProperties.zIndex"
@@ -166,30 +182,13 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
                matTooltip="Priorität beim Stapeln von Elementen. Der höhere Index erscheint vorne.">
 <!--        TODO translate-->
       </mat-form-field>
-      <ng-container *ngIf="(selectionService.selectedElements | async)!.length > 1">
-        {{'propertiesPanel.alignment' | translate }}
-        <div class="alignment-button-group" fxLayout="row" fxLayoutAlign="center center">
-          <button (click)="alignElements('left')">
-            <mat-icon>align_horizontal_left</mat-icon>
-          </button>
-          <button (click)="alignElements('right')">
-            <mat-icon>align_horizontal_right</mat-icon>
-          </button>
-          <button (click)="alignElements('top')">
-            <mat-icon>align_vertical_top</mat-icon>
-          </button>
-          <button (click)="alignElements('bottom')">
-            <mat-icon>align_vertical_bottom</mat-icon>
-          </button>
-        </div>
-      </ng-container>
     </div>
   `,
   styles: [
     '.centered-form-field {margin-left: 25%}',
     '.right-form-field {margin-left: 15%}',
     '.input-group {background-color: rgba(0,0,0,.04); margin-bottom: 10px;}',
-    '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 95px; margin: 0 5px;}'
+    '::ng-deep app-element-properties .small-input .mat-form-field-infix {width: 100px; margin: 0 5px;}'
   ]
 })
 export class ElementSizingPropertiesComponent {