mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-31 17:38:28 +00:00
[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:
@@ -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'">
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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;
|
||||
|
||||
|
@@ -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">
|
||||
|
@@ -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();
|
||||
|
Reference in New Issue
Block a user