Add itemBackgroundColor property to droplist and improve styling

projects/common/element-components/compound-elements/drop-list.component.ts

@@ -28,9 +28,12 @@ import { FormElementComponent } from '../../form-element-component.directive';
            [cdkDropListEnterPredicate]="onlyOneItemPredicate"
            (cdkDropListDropped)="drop($event)">
         <div class="item" *ngFor="let value of $any(elementModel.value)" cdkDrag
-             [ngClass]="{'vertical-item': elementModel.orientation === 'vertical',
-                         'horizontal-item': elementModel.orientation === 'horizontal'}">
-          <div *cdkDragPreview>{{value}}</div>
+             [style.background-color]="elementModel.itemBackgroundColor">
+          <div *cdkDragPreview
+               [style.font-size.px]="elementModel.fontSize"
+               [style.background-color]="elementModel.itemBackgroundColor">
+            {{value}}
+          </div>
           <div class="drag-placeholder" *cdkDragPlaceholder [style.min-height.px]="elementModel.fontSize"></div>
           {{value}}
         </div>
@@ -43,13 +46,10 @@ import { FormElementComponent } from '../../form-element-component.directive';
   `,
   styles: [
     '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
-    '.list {border: 1px solid; border-radius: 3px; width: calc(100% - 2px); height: calc(100% - 2px);}',
-    '.item {padding: 10px;}',
+    '.list {width: calc(100% - 2px); height: calc(100% - 2px);}',
+    '.item {background-color: lightblue; margin: 5px; border-radius: 10px; padding: 10px;}',
     '.error-message {font-size: 75%; margin-top: 10px;}',
-    '.vertical-item {border-bottom: 1px solid;}',
-    '.horizontal-item {border-right: 1px solid;}',
-    '.item:last-child {border: none;}',
-    '.cdk-drag-preview {background-color: lightgrey; padding: 8px 20px; border-radius: 3px}',
+    '.cdk-drag-preview {padding: 8px 20px; border-radius: 10px}',
     '.drag-placeholder {background-color: lightgrey; border: dotted 3px #999; padding: 10px;}',
     '.drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
     '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}'

projects/common/models/compound-elements/drop-list.ts

@@ -6,6 +6,7 @@ export class DropListElement extends InputElement implements FontElement, Surfac
   onlyOneItem: boolean = false;
   connectedTo: string[] = [];
   orientation: 'vertical' | 'horizontal' = 'vertical';
+  itemBackgroundColor: string = '#add8e6';
 
   fontColor: string = 'black';
   font: string = 'Roboto';
@@ -25,6 +26,6 @@ export class DropListElement extends InputElement implements FontElement, Surfac
 
     this.value = serializedElement.value as string[] || [];
     this.height = serializedElement.height || 100;
-    this.backgroundColor = serializedElement.backgroundColor as string || 'transparent';
+    this.backgroundColor = serializedElement.backgroundColor as string || '#eeeeec';
   }
 }

projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html

@@ -463,6 +463,19 @@
           {{'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('itemBackgroundColor', $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('itemBackgroundColor', $any($event.target).value)">
+        </mat-form-field>
+
         <mat-divider></mat-divider>
 
         <button mat-raised-button class="element-button"

projects/editor/src/assets/i18n/de.json

@@ -111,6 +111,7 @@
     "magnifierZoom": "Vergrößerungsfaktor",
     "connectedDropList": "Verbundene Ablegelisten",
     "onlyOneItem": "Nur ein erlaubtes Element",
+    "itemBackgroundColor": "Hintergrundfarbe der Elemente",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
     "noElementSelected": "Kein Element ausgewählt"