From 42b09cc052689d49146e7229eeb925e5502862a6 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Mon, 29 Nov 2021 15:56:42 +0100
Subject: [PATCH] Fix drag and drop element cursor style (in player)
This is the same hack used in the editor for overlay elements. Here
applied to the actual dnd elements seen in the player.
Explanation: The cursor can not be applied to the dragged elements as it
is not positioned (at least that is my understanding). The workaround is
to style the body (cursor) while anything is being dragged.
---
.../drop-list/drop-list.component.ts | 17 ++++++++++++++++-
projects/player/src/styles.css | 4 ++++
2 files changed, 20 insertions(+), 1 deletion(-)
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 5f711567d..9fe6c7fb9 100644
--- a/projects/common/ui-elements/drop-list/drop-list.component.ts
+++ b/projects/common/ui-elements/drop-list/drop-list.component.ts
@@ -33,7 +33,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
[cdkDropListEnterPredicate]="onlyOneItemPredicate"
(cdkDropListDropped)="drop($event)">
<div class="item" *ngFor="let value of $any(elementModel.value)" cdkDrag
- [style.background-color]="elementModel.itemBackgroundColor">
+ [style.background-color]="elementModel.itemBackgroundColor"
+ (cdkDragStarted)=dragStart() (cdkDragEnded)="dragEnd()">
<div *cdkDragPreview
[style.font-size.px]="elementModel.fontProps.fontSize"
[style.background-color]="elementModel.itemBackgroundColor">
@@ -54,6 +55,8 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.list-container {display: flex; flex-direction: column; width: 100%; height: 100%;}',
'.list {width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 10px}',
'.item {border-radius: 10px; padding: 10px;}',
+ '.item {cursor: grab}',
+ '.item:active {cursor: grabbing}',
'.item:not(:last-child) {margin-bottom: 5px;}',
'.error-message {font-size: 75%; margin-top: 10px;}',
'.cdk-drag-preview {padding: 8px 20px; border-radius: 10px}',
@@ -68,6 +71,18 @@ import { FormElementComponent } from '../../directives/form-element-component.di
export class DropListComponent extends FormElementComponent {
@Input() elementModel!: DropListElement;
+ bodyElement: HTMLElement = document.body;
+
+ dragStart() {
+ this.bodyElement.classList.add('inheritCursors');
+ this.bodyElement.style.cursor = 'grabbing';
+ }
+
+ dragEnd(): void {
+ this.bodyElement.classList.remove('inheritCursors');
+ this.bodyElement.style.cursor = 'unset';
+ }
+
drop(event: CdkDragDrop<DropListComponent>): void {
if (!this.elementModel.readOnly) {
if (event.previousContainer === event.container) {
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index df5bded20..d49d51e30 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -3,3 +3,7 @@ body {
margin: 0 !important;
font-family: 'Roboto', sans-serif
}
+
+body.inheritCursors * {
+ cursor: inherit !important;
+}
--
GitLab