[ACS-6565] ADW - Document List View Header - UX Bugs (#9269)

2025-05-12 17:04:57 +00:00 · 2024-01-31 08:41:20 +01:00 · 2024-01-31 08:41:20 +01:00 · 81c17da099
commit 81c17da099
parent cb7f4ffda2
5 changed files with 54 additions and 21 deletions
--- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts
+++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.ts
@ -15,7 +15,18 @@
 * limitations under the License.
 */

-import { Component, Input, Output, OnInit, EventEmitter, ViewEncapsulation, ViewChild, Inject, OnDestroy, ElementRef } from '@angular/core';
+import {
+    Component,
+    Input,
+    Output,
+    OnInit,
+    EventEmitter,
+    ViewEncapsulation,
+    ViewChild,
+    Inject,
+    OnDestroy,
+    ElementRef
+} from '@angular/core';
 import { ConfigurableFocusTrapFactory, ConfigurableFocusTrap } from '@angular/cdk/a11y';
 import { DataColumn, TranslationService } from '@alfresco/adf-core';
 import { SearchWidgetContainerComponent } from '../search-widget-container/search-widget-container.component';
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@ -59,7 +59,7 @@
                    #resizableElement="adf-resizable"
                    [coverPadding]="10"
                    (resizing)="onResizing($event, columnIndex)"
-                    (resizeStart)="isResizing = true"
+                    (resizeStart)="resizingColumnIndex = columnIndex"
                    (resizeEnd)="onResizingEnd()"
                    [attr.data-automation-id]="'auto_header_content_id_' + col.key"
                    class="adf-datatable-cell-header-content"
@ -68,12 +68,6 @@
                        !isDraggingHeaderColumn &&
                        !isResizing && col.sortable}"
                >
-                    <span
-                        *ngIf="hoveredHeaderColumnIndex === columnIndex && col.draggable && !isResizing"
-                        class="adf-datatable-cell-header-drag-icon-placeholder"
-                        [attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-placeholder-'+col.key"
-                    ></span>
-
                    <ng-container *ngIf="!col.header">
                        <span *ngIf="col.title" matTooltip="{{col.title | translate}}" class="adf-datatable-cell-value">{{col.title | translate}}</span>

@ -88,15 +82,22 @@
                        <ng-template [ngTemplateOutlet]="col.header" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
                    </div>

-                    <ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
-
                    <span
                        [class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
                        [class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
                    </span>
+
+                    <ng-template *ngIf="allowFiltering" [ngTemplateOutlet]="headerFilterTemplate" [ngTemplateOutletContext]="{$implicit: col}"></ng-template>
+
+                    <span
+                        *ngIf="hoveredHeaderColumnIndex === columnIndex && col.draggable && !isResizing"
+                        class="adf-datatable-cell-header-drag-icon-placeholder"
+                        [attr.data-automation-id]="'adf-datatable-cell-header-drag-icon-placeholder-'+col.key"
+                    ></span>
                </div>
                <div
                    *ngIf="isResizingEnabled && col.resizable"
+                    [ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
                    adf-resize-handle
                    class="adf-datatable__resize-handle"
                    [resizableContainer]="resizableElement">
@ -126,13 +127,13 @@
                <ng-container *ngIf="mainActionTemplate">
                    <button
                        data-automation-id="adf-datatable-main-menu-button"
+                        matTooltip="{{ 'ADF-DATATABLE.CONTENT-ACTIONS.SELECT_COLUMNS' | translate }}"
                        mat-icon-button
                        #mainMenuTrigger="matMenuTrigger"
                        (keydown.enter)="mainMenuTrigger.openMenu()"
                        [matMenuTriggerFor]="mainMenu">
-                        <mat-icon>more_vert</mat-icon>
+                        <mat-icon>view_week</mat-icon>
                    </button>
-
                    <mat-menu #mainMenu>
                        <ng-container
                            [ngTemplateOutlet]="mainActionTemplate"
@ -210,7 +211,7 @@
                     class="adf-datatable-cell adf-datatable-cell--{{col.type || 'text'}} {{col.cssClass}}"
                     [attr.title]="col.title | translate"
                     [attr.data-automation-id]="getAutomationValue(row)"
-                     [attr.aria-selected]="row.isSelected ? true : false"
+                     [attr.aria-selected]="row.isSelected"
                     [attr.aria-label]="col.title ? (col.title | translate) : null"
                     (click)="onRowClick(row, $event)"
                     (keydown.enter)="onEnterKeyPressed(row, $any($event))"
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@ -10,9 +10,10 @@ $data-table-column-padding: 18px !default;
 $data-table-card-padding: var(--theme-headline-line-height) !default;
 $data-table-cell-top: calc($data-table-card-padding / 2);
 $data-table-thumbnail-width: 65px !default;
-$data-table-cell-min-width: 65px !default;
+$data-table-cell-min-width-1: 65px !default;
+$data-table-cell-min-width-2: 110px !default;
 $data-table-cell-min-width-no-grow: 100px !default;
-$data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
+$data-table-cell-min-width-file-size: $data-table-cell-min-width-1 !default;

 .adf-datatable {
    overflow-y: scroll;
@ -25,6 +26,14 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
    &__resize-handle {
        padding: 0 2px;

+        &-visible {
+            visibility: visible;
+        }
+
+        &-hidden {
+            visibility: hidden;
+        }
+
        &--divider {
            padding: 24px 0;
            border: 1px solid var(--adf-theme-foreground-text-color-007);
@ -316,7 +325,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
    .adf-datatable-cell-header {
        text-align: left;
        box-sizing: border-box;
-        min-width: $data-table-cell-min-width;
+        min-width: $data-table-cell-min-width-1;

        &--text {
            text-align: left;
@ -376,6 +385,11 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
        min-width: $data-table-cell-min-width-no-grow;
    }

+    .adf-datatable-cell-header.adf-min-width-cell,
+    .adf-datatable-cell.adf-min-width-cell {
+        min-width: $data-table-cell-min-width-2;
+    }
+
    /* stylelint-disable-next-line no-duplicate-selectors */
    .adf-datatable-cell,
    .adf-datatable-cell-header {
@ -421,6 +435,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;

    .adf-datatable-actions-menu {
        margin-left: auto;
+        justify-content: end;
    }

    .adf-cell-value {
@ -611,6 +626,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
    .adf-datatable__header--sorted-asc,
    .adf-datatable__header--sorted-desc {
        color: var(--adf-theme-foreground-text-color);
+        padding-right: 0.5rem;

        &::after {
            @include typo-icon;
@ -620,7 +636,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
            left: 5px;
            right: 5px;
            position: relative;
-            vertical-align: sub;
+            vertical-align: middle;
        }
    }

@ -661,7 +677,7 @@ $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
        position: absolute;
        top: 0;
        bottom: 0;
-        left: 3px;
+        right: 10px;
        margin: auto;
        color: #ccc;
        cursor: move;
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
@ -257,7 +257,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,

    isDraggingHeaderColumn = false;
    hoveredHeaderColumnIndex = -1;
-    isResizing = false;
+    resizingColumnIndex = -1;

    /** This array of fake rows fix the flex layout for the gallery view */
    fakeRows = [];
@ -966,7 +966,7 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
    }

    onResizingEnd(): void {
-        this.isResizing = false;
+        this.resizingColumnIndex = -1;

        this.updateColumnsWidths();
    }
@ -1009,6 +1009,10 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
        (sorting.key === col.key || sorting.key === col.sortingKey) &&
        sorting.direction?.toLocaleLowerCase() === direction;
    };
+
+    get isResizing(): boolean {
+        return this.resizingColumnIndex >= 0;
+    }
 }

 export interface DataTableDropEvent {
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@ -308,7 +308,8 @@
      }
    },
    "CONTENT-ACTIONS": {
-      "TOOLTIP": "Content actions"
+      "TOOLTIP": "Content actions",
+      "SELECT_COLUMNS": "Select columns"
    },
    "ACCESSIBILITY": {
      "ACTIONS": "Actions",