inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-09-10 14:11:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleanup header actions

Browse Source
This commit is contained in:
Denys Vuika
2023-02-14 13:50:00 -05:00
committed by Yasa-Nataliya
parent b94b4afce8
commit 3e63dda3dc
4 changed files with 31 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
projects/aca-content/src/lib/components/header-actions/header-actions.component.html
View File

@@ -1,31 +1,22 @@
<div>
<div class="adf-toolbar--spacer adf-toolbar-divider"></div>
<span class="action-bar">
<button class="aca-mat-button aca-create-button" mat-button data-automation-id="create-button"
*ngIf="canShowCreateButton()"
[matMenuTriggerFor]="createMenu">
{{ 'APP.HEADER.BUTTONS.CREATE' | translate }}
</button>
<mat-menu #createMenu="matMenu" role="menu" class="app-create-menu__root-menu app-create-menu__sub-menu"
[overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of createActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<adf-toolbar class="adf-toolbar--inline">
<button mat-flat-button data-automation-id="create-button" *ngIf="canShowCreateButton()" [matMenuTriggerFor]="createMenu">
{{ 'APP.HEADER.BUTTONS.CREATE' | translate }}
</button>
<mat-menu #createMenu="matMenu" role="menu" class="app-create-menu__root-menu app-create-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of createActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<button class="aca-mat-button aca-upload-button" mat-button data-automation-id="upload-button"
*ngIf="canShowUploadButton()" [matMenuTriggerFor]="uploadMenu">
{{ 'APP.HEADER.BUTTONS.UPLOAD' | translate }}
</button>
<mat-menu #uploadMenu="matMenu" role="menu" class="app-upload-menu__root-menu app-upload-menu__sub-menu"
[overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of uploadActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<button mat-flat-button color="primary" data-automation-id="upload-button" *ngIf="canShowUploadButton()" [matMenuTriggerFor]="uploadMenu">
{{ 'APP.HEADER.BUTTONS.UPLOAD' | translate }}
</button>
<mat-menu #uploadMenu="matMenu" role="menu" class="app-upload-menu__root-menu app-upload-menu__sub-menu" [overlapTrigger]="false" yPosition="below">
<div *ngFor="let action of uploadActions; trackBy: trackByActionId">
<app-toolbar-menu-item [actionRef]="action"></app-toolbar-menu-item>
</div>
</mat-menu>
<adf-toolbar-divider *ngIf="canShowSearchSeparator()">
</adf-toolbar-divider>
<aca-search-input class="app-search-input"></aca-search-input>
</span>
</div>
<adf-toolbar-divider *ngIf="canShowSearchSeparator()"></adf-toolbar-divider>
<aca-search-input class="app-search-input"></aca-search-input>
</adf-toolbar>

47
projects/aca-content/src/lib/components/header-actions/header-actions.component.scss
View File

@@ -1,47 +1,18 @@
.aca-page-layout-header {
.app-search-input {
background: none;
}
.action-bar {
display: flex;
flex: auto;
height: 32px;
margin-left: 24px;
.mat-flat-button {
min-width: auto;
margin-left: 4px;
}
adf-toolbar-divider {
width: 24px;
height: 32px;
margin: 4px 0 0 12px;
.app-search-input {
padding-bottom: 0 !important;
.app-search-container {
padding-top: 0;
}
& > button {
margin-left: 12px;
}
}
.aca-mat-button {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
letter-spacing: 0.25px;
font-weight: 500;
font-size: 14px;
font-style: normal;
border-radius: 6px;
border: none;
height: 32px;
}
.aca-create-button {
background-color: var(--theme-create-button-background-color);
color: var(--theme-create-button-text-color);
}
.aca-upload-button {
background-color: var(--theme-upload-button-background-color);
color: var(--theme-upload-button-text-color);
}
}

4
projects/aca-content/src/lib/components/header-actions/header-actions.component.spec.ts
View File

@@ -78,7 +78,7 @@ describe('HeaderActionsComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const buttons = fixture.debugElement.queryAll(By.css('.action-bar > .aca-mat-button'));
const buttons = fixture.debugElement.queryAll(By.css('.mat-flat-button'));
expect(buttons.length).toBe(2);
expect(getCreateButton()).toBeTruthy();
@@ -91,7 +91,7 @@ describe('HeaderActionsComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const buttons = fixture.debugElement.queryAll(By.css('.action-bar > .aca-mat-button'));
const buttons = fixture.debugElement.queryAll(By.css('.mat-flat-button'));
expect(buttons.length).toBe(1);
expect(getCreateButton()).toBeTruthy();

8
projects/aca-content/src/lib/ui/variables/variables.scss
View File

@@ -50,9 +50,6 @@ $sidenav-background-color: #f8f8f8;
$selected-text-color: #212121;
$selected-background-color: rgba(31, 116, 219, 0.24);
$action-button-text-color: rgba(33, 35, 40, 0.7);
$tooltip-background-color: #ffffff;
$create-button-text-color: #212121;
$upload-button-background-color: #2A7DE1;
$page-layout-header-background-color: #ffffff;
$defaults: (
@@ -96,12 +93,7 @@ $defaults: (
--theme-hover-background-color: $grey-text-background,
--theme-action-button-text-color: $action-button-text-color,
--theme-header-border-color: $grey-background,
--theme-tooltip-background-color: $tooltip-background-color,
--theme-page-layout-header-background-color: $page-layout-header-background-color,
--theme-create-button-background-color: $grey-text-background,
--theme-create-button-text-color: $create-button-text-color,
--theme-upload-button-background-color: $upload-button-background-color,
--theme-upload-button-text-color: $pagination-background-color,
);
// propagates SCSS variables into the CSS variables scope