[editor] Properties: Move some styling properties to the style tab

Also add an additional direct input for font color.

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

@@ -42,12 +42,6 @@ import { FileService } from '../../../../../../../common/file.service';
         </button>
       </ng-container>
 
-      <mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
-        <mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
-        <input matInput type="number" [value]="combinedProperties.borderRadius"
-               (input)="updateModel.emit({ property: 'borderRadius', value: $any($event.target).value })">
-      </mat-form-field>
-
       <mat-form-field *ngIf="combinedProperties.interaction !== undefined" appearance="fill">
         <mat-label>{{'propertiesPanel.interaction' | translate }}</mat-label>
         <mat-select [value]="combinedProperties.interaction"
@@ -481,19 +475,6 @@ import { FileService } from '../../../../../../../common/file.service';
                     (change)="updateModel.emit({ property: 'onlyOneItem', value: $event.checked })">
         {{'propertiesPanel.onlyOneItem' | translate }}
       </mat-checkbox>
-
-      <mat-form-field *ngIf="combinedProperties.itemBackgroundColor !== undefined"
-                      appearance="fill" class="mdInput textsingleline">
-        <mat-label>{{'propertiesPanel.itemBackgroundColor' | translate }}</mat-label>
-        <input matInput type="color" [value]="combinedProperties.itemBackgroundColor"
-               (input)="updateModel.emit({ property: 'itemBackgroundColor', value: $any($event.target).value })">
-      </mat-form-field>
-      <mat-form-field *ngIf="combinedProperties.itemBackgroundColor !== undefined"
-                      appearance="fill" class="mdInput textsingleline">
-        <mat-label>{{'propertiesPanel.itemBackgroundColor' | translate }}</mat-label>
-        <input matInput type="text" [value]="combinedProperties.itemBackgroundColor"
-               (input)="updateModel.emit({ property: 'itemBackgroundColor', value: $any($event.target).value })">
-      </mat-form-field>
     </div>
     `,
   styleUrls: ['./element-model-properties.component.css']

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

@@ -7,6 +7,25 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
   selector: 'app-element-style-properties',
   template: `
     <div fxLayout="column">
+      <mat-form-field *ngIf="combinedProperties.borderRadius !== undefined" appearance="fill">
+        <mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
+        <input matInput type="number" [value]="combinedProperties.borderRadius"
+               (input)="updateModel.emit({ property: 'borderRadius', value: $any($event.target).value })">
+      </mat-form-field>
+
+      <mat-form-field *ngIf="combinedProperties.itemBackgroundColor !== undefined"
+                      appearance="fill" class="mdInput textsingleline">
+        <mat-label>{{'propertiesPanel.itemBackgroundColor' | translate }}</mat-label>
+        <input matInput type="color" [value]="combinedProperties.itemBackgroundColor"
+               (input)="updateModel.emit({ property: 'itemBackgroundColor', value: $any($event.target).value })">
+      </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.itemBackgroundColor !== undefined"
+                      appearance="fill" class="mdInput textsingleline">
+        <mat-label>{{'propertiesPanel.itemBackgroundColor' | translate }}</mat-label>
+        <input matInput type="text" [value]="combinedProperties.itemBackgroundColor"
+               (input)="updateModel.emit({ property: 'itemBackgroundColor', value: $any($event.target).value })">
+      </mat-form-field>
+
       <mat-form-field *ngIf="combinedProperties.backgroundColor !== undefined"
                       appearance="fill" class="mdInput textsingleline">
         <mat-label>{{'propertiesPanel.backgroundColor' | translate }}</mat-label>
@@ -19,12 +38,20 @@ import { UIElement } from '../../../../../../../common/models/uI-element';
         <input matInput type="text" [value]="combinedProperties.backgroundColor"
                (input)="updateModel.emit({ property: 'backgroundColor', value: $any($event.target).value })">
       </mat-form-field>
+
       <mat-form-field *ngIf="combinedProperties.fontColor !== undefined"
                       appearance="fill" class="mdInput textsingleline">
         <mat-label>{{'propertiesPanel.fontColor' | translate }}</mat-label>
         <input matInput type="color" [value]="combinedProperties.fontColor"
                (input)="updateModel.emit({ property: 'fontColor', value: $any($event.target).value })">
       </mat-form-field>
+      <mat-form-field *ngIf="combinedProperties.fontColor !== undefined"
+                      appearance="fill" class="mdInput textsingleline">
+        <mat-label>{{'propertiesPanel.fontColor' | translate }}</mat-label>
+        <input matInput type="text" [value]="combinedProperties.fontColor"
+               (input)="updateModel.emit({ property: 'fontColor', value: $any($event.target).value })">
+      </mat-form-field>
+
       <mat-form-field *ngIf="combinedProperties.font !== undefined"
                       appearance="fill" class="mdInput textsingleline">
         <mat-label>{{'propertiesPanel.font' | translate }}</mat-label>