Add highlightReceivingDropList feature to dropList

This shows a outline on potential dropLists when dragging an item.

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

@@ -10,7 +10,12 @@ import { FormElementComponent } from '../../form-element-component.directive';
   selector: 'app-drop-list',
   template: `
     <div class="list-container">
+      <!-- Border width is a workaround to enable/disable the Material cdk-drop-list-receiving-->
+      <!-- class style.-->
       <div class="list"
+           [class.dropList-highlight]="elementModel.highlightReceivingDropList"
+           [style.border-color]="elementModel.highlightReceivingDropListColor"
+           [style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
            [style.color]="elementModel.fontColor"
            [style.font-family]="elementModel.font"
            [style.font-size.px]="elementModel.fontSize"
@@ -46,13 +51,16 @@ import { FormElementComponent } from '../../form-element-component.directive';
   `,
   styles: [
     '.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
-    '.list {width: calc(100% - 2px); height: calc(100% - 2px);}',
+    '.list {width: calc(100% - 4px); height: calc(100% - 4px);}',
     '.item {background-color: lightblue; margin: 5px; border-radius: 10px; padding: 10px;}',
     '.error-message {font-size: 75%; margin-top: 10px;}',
     '.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);}'
+    '.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
+
+    '.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
+    '.dropList-highlight.cdk-drop-list-dragging {border: solid;}'
   ]
 })
 export class DropListComponent extends FormElementComponent {

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

@@ -7,6 +7,8 @@ export class DropListElement extends InputElement implements FontElement, Surfac
   connectedTo: string[] = [];
   orientation: 'vertical' | 'horizontal' = 'vertical';
   itemBackgroundColor: string = '#add8e6';
+  highlightReceivingDropList: boolean = false;
+  highlightReceivingDropListColor: string = '#add8e6';
 
   fontColor: string = 'black';
   font: string = 'Roboto';

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

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

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

@@ -112,6 +112,8 @@
     "connectedDropList": "Verbundene Ablegelisten",
     "onlyOneItem": "Nur ein erlaubtes Element",
     "itemBackgroundColor": "Hintergrundfarbe der Elemente",
+    "highlightReceivingDropList": "Potentielle Ablagen hervorheben",
+    "highlightReceivingDropListColor": "Farbe der Hervorhebung",
     "duplicateElement": "Element duplizieren",
     "deleteElement": "Element löschen",
     "noElementSelected": "Kein Element ausgewählt"