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

Alfresco · Jan 22, 2024 · 49bb25f · 49bb25f
1 parent 2922f8f
commit 49bb25f
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 10 deletions.
diff --git a/...ib/permission-manager/components/permission-container/permission-container.component.html b/...ib/permission-manager/components/permission-container/permission-container.component.html
@@ -11,15 +11,15 @@
             </ng-template>
         </data-column>
 
-        <data-column class="adf-ellipsis-cell adf-expand-cell-5 adf-authorityId-column"
+        <data-column class="adf-ellipsis-cell adf-expand-cell-4 adf-authorityId-column"
                      [title]="'PERMISSION_MANAGER.COLUMN.NAME' | translate:{count:permissions.length}"
                      key="authorityId">
             <ng-template let-context>
                 <adf-user-name-column [context]="context"></adf-user-name-column>
             </ng-template>
         </data-column>d
 
-        <data-column class="adf-ellipsis-cell adf-expand-cell-5 adf-authorityId-column"
+        <data-column class="adf-ellipsis-cell adf-expand-cell-4 adf-authorityId-column"
                      title="PERMISSION_MANAGER.COLUMN.LOCATION"
                      key="location"
                      *ngIf="node && showLocation">

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
@@ -69,7 +69,7 @@
                         !isResizing && col.sortable}"
                 >
                     <span
-                        *ngIf="hoveredHeaderColumnIndex === columnIndex && col.draggable && !isResizing"
+                        *ngIf="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>
@@ -97,6 +97,7 @@
                 </div>
                 <div
                     *ngIf="isResizingEnabled"
+                    [ngClass]="hoveredHeaderColumnIndex === 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;
         }
     }
 

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