inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACS-5166] UI fixes (#3287)

Browse Source 
* fix menu positioning

* fix update version script

* change the menu icon

* clean implementation for toolbar buttons
This commit is contained in:
Denys Vuika 2023-06-20 11:59:49 +01:00 committed by GitHub
parent 10935e9d54
commit 05906b878d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/aca-content/assets/app.extensions.json
View File

@ -273,7 +273,7 @@
"title": "APP.HEADER.BUTTONS.CREATE",
"description": "APP.HEADER.BUTTONS.CREATE_TOOLTIP",
"data": {
"menuType": "button"
"menuType": "stroked-button"
},
"children": [
{

2
projects/aca-shared/src/lib/components/page-layout/page-layout.component.html
View File

@ -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>

21
projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
View File

@ -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;
}
}
}
}

18
projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.html
View File

@ -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>

1
projects/aca-shared/src/lib/components/tool-bar/toolbar-button/toolbar-button.component.ts
View File

@ -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'
}

21
projects/aca-shared/src/lib/components/tool-bar/toolbar-menu/toolbar-menu.component.html
View File

@ -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'">

1
scripts/update-version.sh
View File

@ -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}/..