[ACS-3742] Layout changes for workspace (#2980)

* Layout changes for workspace sidemenu

* added header and search layout changes

* implemented review comments and removed process related code

* Added expand and collapse functionality

* Modified the paths

* linting fixes

* use standard material settings icon

* use only specific modules needed for page layout

* use standard "menu" icon for now

* use standard avatar icon for now

* cleanup user profile menu item

* cleanup About component layout

* remove hardcoded settings route

* deprecate "headerImagePath"

* deprecate "headerTextColor" customisation

* deprecate "headerColor" customisation

* proper toggle of the side menu

* proper sidebar header implementation

* user profile basic cleanup

* minor fixes

* cleanup buttons

* remove old app layout and use ADF one

* remove old header component

* cleanup old layout module

* fix unit tests

* cleanup unit tests

* cleanup header actions module

* deprecate unused main-action component

* cleanup styles

* restore removed method

* cleanup search results toolbar

* restore expand menu functionality

* cleanup code, back buttons for about and profile

* restore original code

* proper collapse button

* remove unused i18n key

* styles cleanup

* cleanup sidebar

* cleanup user profile

* add safety checks for focus after close

* layout fixes

* update view profile unit tests

* code cleanup after reviews

* cleanup header actions

* fix menu population, user info

* improved upload and create actions

* remove useless tests

* fix folder rules tests

* search button workaround

* e2e: remove wait

* add create/upload tooltips

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* e2e fix

* try fix e2e

* update e2e extension configs

* try fix e2e

* try fix e2e

* fix eslint config

* try fix e2e

* move search button to extensions

* move upload and create to extensions

* remove header actions as no longer needed

* cleanup

* e2e fixes and cleanup for unwanted files

* linting fixes

* linting fixes

* added button type to support text buttons

* linting fixes

* added more unit tests to achieve code coverage requirement

* fixing code covergae for aca-content

* fixed code coverage for aca-shared

* linting fixes

* linting fixes

* cleanup

* version fix

---------

Co-authored-by: SheenaMalhotra182 <sheena.malhotra@globallogic.com>
Co-authored-by: Denys Vuika <denys.vuika@gmail.com>
Co-authored-by: SheenaMalhotra182 <sheena.malhotra@contractors.onbase.com>
This commit is contained in:
Yasa-Nataliya
2023-04-20 16:48:24 +05:30
committed by GitHub
parent d042b80386
commit 6fac964d94
140 changed files with 1663 additions and 2177 deletions

View File

@@ -4,13 +4,13 @@
</ng-container>
<ng-container *ngSwitchCase="'button'">
<app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color"> </app-toolbar-button>
<app-toolbar-button [type]="data?.buttonType || type" [actionRef]="actionRef" [color]="color" [data]="actionRef.data"> </app-toolbar-button>
</ng-container>
<adf-toolbar-divider *ngSwitchCase="'separator'" [id]="actionRef.id"></adf-toolbar-divider>
<ng-container *ngSwitchCase="'menu'">
<app-toolbar-menu [actionRef]="actionRef" [color]="color"> </app-toolbar-menu>
<app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
</ng-container>
<ng-container *ngSwitchCase="'custom'">

View File

@@ -36,6 +36,12 @@ import { ThemePalette } from '@angular/material/core';
host: { class: 'aca-toolbar-action' }
})
export class ToolbarActionComponent implements DoCheck {
@Input()
data: {
buttonType?: ToolbarButtonType;
color?: string;
};
@Input()
type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;

View File

@@ -1,4 +1,4 @@
<ng-container [ngSwitch]="type">
<ng-container [ngSwitch]="data?.buttonType || type">
<ng-container *ngSwitchCase="'icon-button'">
<button
[id]="actionRef.id"
@@ -12,6 +12,19 @@
<adf-icon [value]="actionRef.icon"></adf-icon>
</button>
</ng-container>
<ng-container *ngSwitchCase="'flat-button'">
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-flat-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" data-automation-id="flat-button-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>

View File

@@ -29,6 +29,7 @@ import { ThemePalette } from '@angular/material/core';
export enum ToolbarButtonType {
ICON_BUTTON = 'icon-button',
FLAT_BUTTON = 'flat-button',
MENU_ITEM = 'menu-item'
}
@@ -39,6 +40,12 @@ export enum ToolbarButtonType {
host: { class: 'app-toolbar-button' }
})
export class ToolbarButtonComponent {
@Input()
data: {
buttonType?: ToolbarButtonType;
color?: string;
};
@Input()
type: ToolbarButtonType = ToolbarButtonType.ICON_BUTTON;

View File

@@ -1,15 +1,49 @@
<button
[id]="actionRef.id"
[color]="color"
mat-icon-button
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
[matMenuTriggerFor]="menu"
[disabled]="actionRef.disabled"
#matTrigger="matMenuTrigger"
>
<adf-icon [value]="actionRef.icon"></adf-icon>
</button>
<ng-container [ngSwitch]="type">
<ng-container *ngSwitchCase="'button'">
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-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" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
</button>
</ng-container>
<ng-container *ngSwitchCase="'flat-button'">
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-flat-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" data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
</button>
</ng-container>
<ng-container *ngSwitchDefault>
<button
[id]="actionRef.id"
[color]="data?.color || color"
mat-icon-button
[attr.aria-label]="actionRef.description || actionRef.title | translate"
[attr.title]="actionRef.description || actionRef.title | translate"
[matMenuTriggerFor]="menu"
[disabled]="actionRef.disabled"
#matTrigger="matMenuTrigger"
>
<adf-icon *ngIf="actionRef.icon" [value]="actionRef.icon"></adf-icon>
</button>
</ng-container>
</ng-container>
<mat-menu #menu="matMenu" [overlapTrigger]="false">
<ng-container *ngFor="let child of actionRef.children; trackBy: trackByActionId">

View File

@@ -50,6 +50,16 @@ export class ToolbarMenuComponent implements AfterViewInit {
@ViewChildren(ToolbarMenuItemComponent)
toolbarMenuItems: QueryList<ToolbarMenuItemComponent>;
@Input()
data: {
menuType?: string;
color?: string;
};
get type(): string {
return this.data?.menuType || 'default';
}
@HostListener('document:keydown.Escape')
handleKeydownEscape() {
this.matTrigger.closeMenu();