cleanup toolbar styles (#369)

* cleanup toolbar styles

* a11y fixes, add missing tooltip

* fix tests
This commit is contained in:
Denys Vuika
2018-05-25 22:00:50 +01:00
committed by GitHub
parent 8c3fed1066
commit 58a71ad12a
11 changed files with 66 additions and 100 deletions

View File

@@ -50,40 +50,35 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu"
[overlapTrigger]="false"
class="secondary-options">
[overlapTrigger]="false">
<button
mat-menu-item
#selection="adfFavorite"
(toggle)="refresh()"
[adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
<mat-icon color="primary" *ngIf="selection.hasFavorites()">star</mat-icon>
<mat-icon *ngIf="!selection.hasFavorites()">star_border</mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
</button>
<button
mat-menu-item
[acaCopyNode]="documentList.selection">
<mat-icon color="primary">content_copy</mat-icon>
<mat-icon>content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button>
<button
mat-menu-item
[acaMoveNode]="documentList.selection">
<mat-icon color="primary">library_books</mat-icon>
<mat-icon>library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button>
<button
mat-menu-item
[acaDeleteNode]="documentList.selection">
<mat-icon color="primary">delete</mat-icon>
<mat-icon>delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button>
@@ -91,7 +86,7 @@
mat-menu-item
*ngIf="isFileSelected(documentList.selection)"
[acaNodeVersions]="documentList.selection">
<mat-icon color="primary">history</mat-icon>
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button>
</mat-menu>

View File

@@ -54,25 +54,20 @@
</button>
<mat-menu #actionsMenu="matMenu"
[overlapTrigger]="false"
class="secondary-options">
[overlapTrigger]="false">
<button
mat-menu-item
#selection="adfFavorite"
[adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
<mat-icon color="primary" *ngIf="selection.hasFavorites()">star</mat-icon>
<mat-icon *ngIf="!selection.hasFavorites()">star_border</mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
</button>
<button
mat-menu-item
[acaCopyNode]="documentList.selection">
<mat-icon color="primary">content_copy</mat-icon>
<mat-icon>content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button>
@@ -80,7 +75,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaMoveNode]="documentList.selection">
<mat-icon color="primary">library_books</mat-icon>
<mat-icon>library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button>
@@ -88,7 +83,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaDeleteNode]="documentList.selection">
<mat-icon color="primary">delete</mat-icon>
<mat-icon>delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button>
@@ -96,7 +91,7 @@
mat-menu-item
*ngIf="isFileSelected(documentList.selection)"
[acaNodeVersions]="documentList.selection">
<mat-icon color="primary">history</mat-icon>
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button>
</mat-menu>

View File

@@ -1,6 +1,9 @@
<adf-toolbar class="app-menu" [style.background-color]="backgroundColor">
<adf-toolbar class="app-menu" [style.background-color]="backgroundColor" role="heading" aria-level="1">
<adf-toolbar-title>
<button mat-icon-button (click)="toggleMenu()">
<button
title="{{ 'APP.ACTIONS.TOGGLE-SIDENAV' | translate }}"
mat-icon-button
(click)="toggleMenu()">
<mat-icon>menu</mat-icon>
</button>

View File

@@ -26,11 +26,12 @@
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppConfigService, PeopleContentService } from '@alfresco/adf-core';
import { AppConfigService, PeopleContentService, TranslationService, TranslationMock } from '@alfresco/adf-core';
import { HttpClientModule } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { HeaderComponent } from './header.component';
import { TranslateModule } from '@ngx-translate/core';
describe('HeaderComponent', () => {
let fixture;
@@ -41,14 +42,16 @@ describe('HeaderComponent', () => {
TestBed.configureTestingModule({
imports: [
HttpClientModule,
RouterTestingModule
RouterTestingModule,
TranslateModule.forRoot(),
],
declarations: [
HeaderComponent
],
providers: [
AppConfigService,
PeopleContentService
PeopleContentService,
{ provide: TranslationService, useClass: TranslationMock },
],
schemas: [ NO_ERRORS_SCHEMA ]
})

View File

@@ -41,25 +41,20 @@
</button>
<mat-menu #actionsMenu="matMenu"
[overlapTrigger]="false"
class="secondary-options">
[overlapTrigger]="false">
<button
mat-menu-item
#selection="adfFavorite"
[adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
<mat-icon color="primary" *ngIf="selection.hasFavorites()">star</mat-icon>
<mat-icon *ngIf="!selection.hasFavorites()">star_border</mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
</button>
<button
mat-menu-item
[acaCopyNode]="documentList.selection">
<mat-icon color="primary">content_copy</mat-icon>
<mat-icon>content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button>
@@ -67,7 +62,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaMoveNode]="documentList.selection">
<mat-icon color="primary">library_books</mat-icon>
<mat-icon>library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button>
@@ -75,7 +70,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaDeleteNode]="documentList.selection">
<mat-icon color="primary">delete</mat-icon>
<mat-icon>delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button>
@@ -83,7 +78,7 @@
mat-menu-item
*ngIf="isFileSelected(documentList.selection)"
[acaNodeVersions]="documentList.selection">
<mat-icon color="primary">history</mat-icon>
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button>
</mat-menu>

View File

@@ -40,25 +40,20 @@
</button>
<mat-menu #actionsMenu="matMenu"
[overlapTrigger]="false"
class="secondary-options">
[overlapTrigger]="false">
<button
mat-menu-item
#selection="adfFavorite"
[adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon>
<mat-icon color="primary" *ngIf="selection.hasFavorites()">star</mat-icon>
<mat-icon *ngIf="!selection.hasFavorites()">star_border</mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
</button>
<button
mat-menu-item
[acaCopyNode]="documentList.selection">
<mat-icon color="primary">content_copy</mat-icon>
<mat-icon>content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button>
@@ -66,7 +61,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'], { target: 'allowableOperationsOnTarget' })"
[acaMoveNode]="documentList.selection">
<mat-icon color="primary">library_books</mat-icon>
<mat-icon>library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button>
@@ -75,7 +70,7 @@
*ngIf="permission.check(documentList.selection, ['delete'])"
[acaUnshareNode]="documentList.selection"
(links-unshared)="refresh()">
<mat-icon color="primary">stop_screen_share</mat-icon>
<mat-icon>stop_screen_share</mat-icon>
<span>{{ 'APP.ACTIONS.UNSHARE' | translate }}</span>
</button>
@@ -83,7 +78,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection, ['delete'], { target: 'allowableOperationsOnTarget' })"
[acaDeleteNode]="documentList.selection">
<mat-icon color="primary">delete</mat-icon>
<mat-icon>delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button>
@@ -91,7 +86,7 @@
mat-menu-item
*ngIf="permission.check(documentList.selection[0], ['update'], { target: 'allowableOperationsOnTarget' })"
[acaNodeVersions]="documentList.selection">
<mat-icon color="primary">history</mat-icon>
<mat-icon>history</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button>
</mat-menu>

View File

@@ -3,7 +3,7 @@
<adf-sidebar-action-menu [expanded]="showLabel" title="{{'APP.NEW_MENU.LABEL' | translate }}">
<mat-icon sidebar-menu-title-icon >arrow_drop_down</mat-icon>
<div sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
<mat-icon>queue</mat-icon>
</div>
<div sidebar-menu-options>
<button
@@ -74,6 +74,7 @@
<button [routerLink]="item.route.url"
[color]="rla.isActive ? 'accent': 'primary'"
[attr.aria-label]="item.label | translate"
mat-icon-button
mat-ripple
matRippleColor="primary"