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

Alfresco · Jan 31, 2024 · 81c17da · 81c17da
1 parent cb7f4ff
commit 81c17da
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 21 deletions.
diff --git a/...es/src/lib/search/components/search-filter-container/search-filter-container.component.ts b/...es/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';

diff --git 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))"

diff --git 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;

diff --git 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 {

diff --git 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",