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 5f711567d3a1bfd4ee8be3f0dc5b9d439b012ef6..9fe6c7fb97df4220bb2c9bec63be977223c217ad 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 df5bded206ba07bd6b0c300e5b87df5b4d8d1ac3..d49d51e30bc37dfb35c5e62cf20c334b6bee4897 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; +}