From b5060f28b33b71d98e0fbeb935b9658624f1b186 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 15 Dec 2021 16:56:40 +0100
Subject: [PATCH] Make dropList reserve some space for outline
Outline may be shown when valid dropLists are highlighted. The bottom
patr of the outline is cut off when the whole width is used by the
dropList.
---
.../common/ui-elements/drop-list/drop-list.component.ts | 9 ++++-----
1 file changed, 4 insertions(+), 5 deletions(-)
diff --git a/projects/common/ui-elements/drop-list/drop-list.component.ts b/projects/common/ui-elements/drop-list/drop-list.component.ts
index e8ac18124..336df0d0f 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -20,8 +20,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
elementModel.positionProps.fixedSize"
[ngClass]="{ 'align-flex' : elementModel.orientation === 'flex' }"
[class.dropList-highlight]="elementModel.highlightReceivingDropList"
- [style.border-color]="elementModel.highlightReceivingDropListColor"
- [style.border-width.px]="elementModel.highlightReceivingDropList ? 2 : 0"
+ [style.outline-color]="elementModel.highlightReceivingDropListColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
[style.font-size.px]="elementModel.fontProps.fontSize"
@@ -71,7 +70,7 @@ import { DragNDropValueObject } from '../../models/uI-element';
`,
styles: [
'.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
- '.list {border-radius: 10px}',
+ '.list {border-radius: 10px; margin-bottom: 3px;}', // extra margin to reserve for outline
'.text-item {border-radius: 10px; padding: 10px;}',
'.item {cursor: grab}',
'.item:active {cursor: grabbing}',
@@ -83,8 +82,8 @@ import { DragNDropValueObject } from '../../models/uI-element';
'.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);}',
- '.dropList-highlight.cdk-drop-list-receiving {border: solid;}',
- '.dropList-highlight.cdk-drop-list-dragging {border: solid;}',
+ '.dropList-highlight.cdk-drop-list-receiving {outline: solid;}',
+ '.dropList-highlight.cdk-drop-list-dragging {outline: solid;}',
'.align-flex {flex: 1 1 auto; flex-flow: row wrap; display: flex; place-content: center space-around; gap: 10px}',
'.center-content {position: relative; top: 0; bottom: 0; left: 0;right: 0; margin: auto;}'
--
GitLab