[ACS-12728] Allowed to hide drag indicator, keep node in original position until dopped

lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss

@@ -108,6 +108,10 @@
                 text-decoration: underline;
                 text-underline-offset: 4px;
             }
+
+            #{ms.$cdk-drag-placeholder} {
+                display: none;
+            }
         }
 
         &-current {

lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts

@@ -33,9 +33,9 @@ import { Node, PathElement } from '@alfresco/js-api';
 import { DocumentListComponent } from '../document-list/components/document-list.component';
 import { TranslatePipe, TranslateService } from '@ngx-translate/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { IconModule } from '@alfresco/adf-core';
+import { DataRow, IconModule } from '@alfresco/adf-core';
 import { LiveAnnouncer } from '@angular/cdk/a11y';
-import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop';
 
 @Component({
     selector: 'adf-breadcrumb',
@@ -116,6 +116,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
     @Output()
     breadcrumbPathElementsChange = new EventEmitter<string[]>();
 
+    @Output()
+    dropped = new EventEmitter<CdkDragDrop<PathElement, PathElement, DataRow>>();
+
     ngOnInit() {
         this.transform = this.transform ? this.transform : null;
 
@@ -228,9 +231,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges {
         }
     }
 
-    onDrop(event: CdkDragDrop<CdkDrag>) {
+    onDrop(event: CdkDragDrop<PathElement, PathElement, DataRow>): void {
-        if (!event.isPointerOverContainer) {
+        if (event.isPointerOverContainer) {
-            return;
+            this.dropped.emit(event);
         }
     }
 }

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -32,7 +32,8 @@
     [class.adf-datatable-gallery-thumbnails]="data.thumbnails"
     [enableDragRows]="enableDragRows"
     [dropListConnectedTo]="dropListConnectedTo"
-    [dragBoundary]="dragBoundary">
+    [dragBoundary]="dragBoundary"
+    [showDragIndicator]="showDragIndicator">
 
     <div *ngIf="headerFilters">
         <adf-filter-header

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -396,6 +396,9 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     dragBoundary = '.adf-datatable-body';
 
+    @Input()
+    showDragIndicator = true;
+
     /**
      * Indicates if the data is provided externally.
      * If true the component won't fetch data itself

lib/content-services/src/lib/mat-selectors.scss

@@ -41,5 +41,6 @@ $mat-select-arrow: '.mat-mdc-select-arrow';
 $mat-evolution-chip-set: '.mdc-evolution-chip-set';
 $cdk-overlay-pane: '.cdk-overlay-pane';
 $cdk-drop-list-dragging: '.cdk-drop-list-dragging';
+$cdk-drag-placeholder: '.cdk-drag-placeholder';
 $mat-list-item-disabled: '.mdc-list-item--disabled';
 $mat-switch: '.mdc-switch';

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -17,7 +17,7 @@
                     role="row"
                 >
                     <!-- Drag -->
-                    @if (enableDragRows) {
+                    @if (enableDragRows && showDragIndicator) {
                         <div class="adf-datatable-cell-header adf-drag-column">
                             <span class="adf-sr-only">{{ 'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate }}</span>
                         </div>
@@ -241,6 +241,7 @@
                 cdkDropList
                 [cdkDropListConnectedTo]="dropListConnectedTo"
                 [cdkDropListDisabled]="!enableDragRows"
+                cdkDropListHasAnchor
                 role="rowgroup"
             >
                 @if (!noPermission) {
@@ -252,6 +253,7 @@
                         (cdkDragStarted)="onDragStart()"
                         (cdkDragEnded)="onDragEnd()"
                         [cdkDragBoundary]="dragBoundary"
+                        [cdkDragData]="row"
                         [row]="row"
                         (select)="onEnterKeyPressed(row, $event)"
                         (keyup)="onRowKeyUp(row, $event)"
@@ -271,7 +273,7 @@
                         "
                     >
                         <!-- Drag button -->
-                        @if (enableDragRows) {
+                        @if (enableDragRows && showDragIndicator) {
                             <div role="gridcell" class="adf-datatable-cell adf-datatable__actions-cell adf-datatable-hover-only">
                                 <mat-icon adf-icon="drag_indicator" aria-hidden="true" />
                             </div>
@@ -663,7 +665,6 @@
                                 }
                             }
                         </div>
-                        <ng-container *cdkDragPlaceholder />
                     </adf-datatable-row>
                     @if (isEmpty()) {
                         <div role="row" class="adf-datatable-row">

lib/core/src/lib/datatable/components/datatable/datatable.component.scss

@@ -299,6 +299,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     .adf-datatable-cell {
         color: var(--mat-sys-on-surface);
         min-height: inherit;
+
+        [role='link'],
+        a {
+            cursor: pointer;
+        }
     }
 
     /* stylelint-disable-next-line no-duplicate-selectors */
@@ -672,6 +677,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     }
 }
 
+#{ms.$cdk-drag-placeholder},
+#{ms.$cdk-drag-anchor} {
+    opacity: 0.4;
+}
+
 /* [Accessibility] Material checkbox labels */
 .adf-checkbox-sr-only #{ms.$mat-checkbox-label} {
     position: absolute;
@@ -776,3 +786,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;
     background-color: color-mix(in srgb, var(--mat-sys-surface) 87%, transparent);
     box-shadow: var(--mat-sys-level2);
 }
+
+.adf-is-dragging * {
+    cursor: grabbing;
+}

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -236,6 +236,9 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
     @Input()
     dragBoundary = '.adf-datatable-body';
 
+    @Input()
+    showDragIndicator = true;
+
     /** Emitted when the user clicks a row. */
     @Output()
     rowClick = new EventEmitter<DataRowEvent>();
@@ -1103,10 +1106,12 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
     onDragStart(): void {
         this.isDraggingRow = true;
+        document.body.classList.add('adf-is-dragging');
     }
 
     onDragEnd(): void {
         this.isDraggingRow = false;
+        document.body.classList.remove('adf-is-dragging');
     }
 
     private updateColumnsWidths(): void {

lib/core/src/lib/styles/_mat-selectors.scss

@@ -61,6 +61,8 @@ $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-button-base: '.mat-mdc-button-base';
 $cdk-drag-preview: '.cdk-drag-preview';
+$cdk-drag-placeholder: '.cdk-drag-placeholder';
+$cdk-drag-anchor: '.cdk-drag-anchor';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';