From f82f86d99a803292233e1fecb1acb1a298a43f5b Mon Sep 17 00:00:00 2001 From: Aleksander Sklorz Date: Wed, 9 Sep 2026 08:43:37 +0200 Subject: [PATCH] [ACS-12728] Allowed to hide drag indicator, keep node in original position until dopped --- .../src/lib/breadcrumb/breadcrumb.component.scss | 4 ++++ .../src/lib/breadcrumb/breadcrumb.component.ts | 13 ++++++++----- .../components/document-list.component.html | 3 ++- .../components/document-list.component.ts | 3 +++ lib/content-services/src/lib/mat-selectors.scss | 1 + .../components/datatable/datatable.component.html | 7 ++++--- .../components/datatable/datatable.component.scss | 14 ++++++++++++++ .../components/datatable/datatable.component.ts | 5 +++++ lib/core/src/lib/styles/_mat-selectors.scss | 2 ++ 9 files changed, 43 insertions(+), 9 deletions(-) diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss index a7b506e269..f6e5d0c1b7 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss +++ b/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 { diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts index e5af0b0e88..fcd18a62ae 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.ts +++ b/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(); + @Output() + dropped = new EventEmitter>(); + ngOnInit() { this.transform = this.transform ? this.transform : null; @@ -228,9 +231,9 @@ export class BreadcrumbComponent implements OnInit, OnChanges { } } - onDrop(event: CdkDragDrop) { - if (!event.isPointerOverContainer) { - return; + onDrop(event: CdkDragDrop): void { + if (event.isPointerOverContainer) { + this.dropped.emit(event); } } } diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.html b/lib/content-services/src/lib/document-list/components/document-list.component.html index ef4a31df6a..7c5c4984e0 100644 --- a/lib/content-services/src/lib/document-list/components/document-list.component.html +++ b/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">
- @if (enableDragRows) { + @if (enableDragRows && showDragIndicator) {
{{ 'ADF-DATATABLE.ACCESSIBILITY.DRAG' | translate }}
@@ -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 @@ " > - @if (enableDragRows) { + @if (enableDragRows && showDragIndicator) {
@@ -663,7 +665,6 @@ } }
- @if (isEmpty()) {
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss index add4a292a0..6d02ac0854 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss +++ b/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; +} diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts index 0086a70abc..08406c0231 100644 --- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts +++ b/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(); @@ -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 { diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss index 31fa2b1208..76b60cc8f6 100644 --- a/lib/core/src/lib/styles/_mat-selectors.scss +++ b/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';