[ACS-5166] UI fixes (#3287)

* fix menu positioning * fix update version script * change the menu icon * clean implementation for toolbar buttons
Alfresco · Jun 20, 2023 · 05906b8 · 05906b8
1 parent 10935e9
commit 05906b8
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 26 deletions.
diff --git a/projects/aca-content/assets/app.extensions.json b/projects/aca-content/assets/app.extensions.json
@@ -273,7 +273,7 @@
         "title": "APP.HEADER.BUTTONS.CREATE",
         "description": "APP.HEADER.BUTTONS.CREATE_TOOLTIP",
         "data": {
-          "menuType": "button"
+          "menuType": "stroked-button"
         },
         "children": [
           {

diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
@@ -3,7 +3,7 @@
         mat-icon-button
         (click)="toggleClick()"
         title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
-        <mat-icon>menu</mat-icon>
+        <mat-icon>keyboard_double_arrow_right</mat-icon>
       </button>
       <ng-content select="aca-page-layout-header"></ng-content>
   </div>

diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
@@ -25,32 +25,13 @@
 
     .aca-toolbar-action {
       .app-toolbar-menu {
-        .mat-button {
+        .mat-button-base {
           display: flex;
           justify-content: center;
           align-items: center;
           border-radius: 6px;
           height: 32px;
-          background: var(--theme-grey-text-background-color);
-          color: var(--theme-selected-text-color);
           line-height: 32px;
-
-          .mat-button-wrapper {
-            display: flex;
-          }
-        }
-
-        .mat-flat-button {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          border-radius: 6px;
-          height: 32px;
-          line-height: 32px;
-
-          .mat-button-wrapper {
-            display: flex;
-          }
         }
       }
     }

diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html b/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html
@@ -12,6 +12,7 @@
       <adf-icon [value]="actionRef.icon"></adf-icon>
     </button>
   </ng-container>
+
   <ng-container *ngSwitchCase="'flat-button'">
     <button
       [id]="actionRef.id"
@@ -22,9 +23,24 @@
       [disabled]="actionRef.disabled"
       (click)="runAction()"
     >
-      <span *ngIf="actionRef.title" data-automation-id="flat-button-title">{{ actionRef.title | translate }}</span>
+      <span *ngIf="actionRef.title">{{ actionRef.title | translate }}</span>
     </button>
   </ng-container>
+
+  <ng-container *ngSwitchCase="'stroked-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-stroked-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [disabled]="actionRef.disabled"
+      (click)="runAction()"
+    >
+      <span *ngIf="actionRef.title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
   <ng-container *ngSwitchCase="'menu-item'">
     <app-toolbar-menu-item [actionRef]="actionRef"></app-toolbar-menu-item>
   </ng-container>

diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts b/projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts
@@ -30,6 +30,7 @@ import { ThemePalette } from '@angular/material/core';
 export enum ToolbarButtonType {
   ICON_BUTTON = 'icon-button',
   FLAT_BUTTON = 'flat-button',
+  STROKED_BUTTON = 'stroked-button',
   MENU_ITEM = 'menu-item'
 }
 

diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html b/projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
@@ -10,7 +10,7 @@
       [disabled]="actionRef.disabled"
       #matTrigger="matMenuTrigger"
     >
-      <span *ngIf="actionRef.title" data-automation-id="mat-button-menu-item-title">{{ actionRef.title | translate }}</span>
+      <span *ngIf="actionRef.title">{{ actionRef.title | translate }}</span>
     </button>
   </ng-container>
 
@@ -25,7 +25,22 @@
       [disabled]="actionRef.disabled"
       #matTrigger="matMenuTrigger"
     >
-      <span *ngIf="actionRef.title" data-automation-id="mat-flat-button-menu-item-title">{{ actionRef.title | translate }}</span>
+      <span *ngIf="actionRef.title">{{ actionRef.title | translate }}</span>
+    </button>
+  </ng-container>
+
+  <ng-container *ngSwitchCase="'stroked-button'">
+    <button
+      [id]="actionRef.id"
+      [color]="data?.color || color"
+      mat-stroked-button
+      [attr.aria-label]="actionRef.description || actionRef.title | translate"
+      [attr.title]="actionRef.description || actionRef.title | translate"
+      [matMenuTriggerFor]="menu"
+      [disabled]="actionRef.disabled"
+      #matTrigger="matMenuTrigger"
+    >
+      <span *ngIf="actionRef.title">{{ actionRef.title | translate }}</span>
     </button>
   </ng-container>
 
@@ -45,7 +60,7 @@
   </ng-container>
 </ng-container>
 
-<mat-menu #menu="matMenu" [overlapTrigger]="false">
+<mat-menu #menu="matMenu" [overlapTrigger]="false" [xPosition]="'before'">
   <ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">
     <ng-container [ngSwitch]="child.type">
       <ng-container *ngSwitchCase="'custom'">

diff --git a/scripts/update-version.sh b/scripts/update-version.sh
@@ -7,6 +7,7 @@ eval libs=( "@alfresco/adf-core"
     "@alfresco/adf-extensions"
     "@alfresco/adf-testing"
     "@alfresco/adf-cli"
+    "@alfresco/eslint-plugin-eslint-angular"
 )
 
 cd ${DIR}/..