[ACS-6565] ADW - Document List View Header - UX Bugs

Alfresco · Jan 26, 2024 · 13cbcdc · 13cbcdc
1 parent 3b2da78
commit 13cbcdc
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 17 deletions.
diff --git a/.../src/lib/search/components/search-filter-container/search-filter-container.component.scss b/.../src/lib/search/components/search-filter-container/search-filter-container.component.scss
@@ -65,3 +65,7 @@
     min-width: 260px;
     padding: 0;
 }
+
+.margin-left-auto {
+   margin-left: auto;
+}
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,19 @@
  * 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,
+    HostBinding
+} 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';
@@ -51,6 +63,8 @@ export class SearchFilterContainerComponent implements OnInit, OnDestroy {
     @ViewChild('filterContainer')
     filterContainer: ElementRef;
 
+    @HostBinding('class') class = 'margin-left-auto';
+
     category: SearchCategory;
     focusTrap: ConfigurableFocusTrap;
     initialValue: any;

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>
 
@@ -94,9 +88,16 @@
                         [class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
                         [class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')">
                     </span>
+
+                    <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">
@@ -125,14 +126,15 @@
             >
                 <ng-container *ngIf="mainActionTemplate">
                     <button
+                        class="adf-datatable__actions-cell-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 +212,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
@@ -11,7 +11,7 @@ $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-no-grow: 100px !default;
+$data-table-cell-min-width-no-grow: 120px !default;
 $data-table-cell-min-width-file-size: $data-table-cell-min-width !default;
 
 .adf-datatable {
@@ -25,6 +25,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);
@@ -421,6 +429,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 {
@@ -620,7 +629,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 +670,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() {
+        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",