From 05906b878d825837b5fce1a32b8202fec737cd3a Mon Sep 17 00:00:00 2001
From: Denys Vuika <denys.vuika@hyland.com>
Date: Tue, 20 Jun 2023 11:59:49 +0100
Subject: [PATCH] [ACS-5166] UI fixes (#3287)

* fix menu positioning

* fix update version script

* change the menu icon

* clean implementation for toolbar buttons
---
 .../aca-content/assets/app.extensions.json    |  2 +-
 .../page-layout/page-layout.component.html    |  2 +-
 .../page-layout/page-layout.component.scss    | 21 +------------------
 .../toolbar-button.component.html             | 18 +++++++++++++++-
 .../toolbar-button.component.ts               |  1 +
 .../toolbar-menu/toolbar-menu.component.html  | 21 ++++++++++++++++---
 scripts/update-version.sh                     |  1 +
 7 files changed, 40 insertions(+), 26 deletions(-)

diff --git a/projects/aca-content/assets/app.extensions.json b/projects/aca-content/assets/app.extensions.json
index a766884ad..7d8419393 100644
--- 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
index 9a22692ec..03c5ec86a 100644
--- 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
index a5c31058f..eb00a2197 100644
--- 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 {
-          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 {
+        .mat-button-base {
           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
index 879dbeacc..d41c20181 100644
--- 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
index 925c585ae..abad286d8 100644
--- 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
index 6c4f1960d..e399e0f8f 100644
--- 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
index f723d1a97..bb6b124ef 100755
--- 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}/..