From 2714953e4ba078fe5e0d7b1b6d42e29591a27550 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 10 Nov 2021 19:45:47 +0100
Subject: [PATCH] Add itemBackgroundColor property to droplist and improve
styling
---
.../compound-elements/drop-list.component.ts | 18 +++++++++---------
.../models/compound-elements/drop-list.ts | 3 ++-
.../element-properties.component.html | 13 +++++++++++++
projects/editor/src/assets/i18n/de.json | 1 +
4 files changed, 25 insertions(+), 10 deletions(-)
diff --git a/projects/common/element-components/compound-elements/drop-list.component.ts b/projects/common/element-components/compound-elements/drop-list.component.ts
index 5fc6709f5..397f22526 100644
--- a/projects/common/element-components/compound-elements/drop-list.component.ts
+++ b/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);}'
diff --git a/projects/common/models/compound-elements/drop-list.ts b/projects/common/models/compound-elements/drop-list.ts
index a242a7e7c..f796db602 100644
--- a/projects/common/models/compound-elements/drop-list.ts
+++ b/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';
}
}
diff --git a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html b/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
index 89bfc8e3c..e7db51cb4 100644
--- a/projects/editor/src/app/unit-view/page-view/properties-panel/element-properties.component.html
+++ b/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"
diff --git a/projects/editor/src/assets/i18n/de.json b/projects/editor/src/assets/i18n/de.json
index 32fb47e22..2a73fa838 100644
--- a/projects/editor/src/assets/i18n/de.json
+++ b/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"
--
GitLab