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

cleanup toolbar styles (#369)

Browse Source 
* 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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 66 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/components/favorites/favorites.component.html
View File

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

19
src/app/components/files/files.component.html
View File

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

7
src/app/components/header/header.component.html
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> <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> <mat-icon>menu</mat-icon>
</button> </button>

9
src/app/components/header/header.component.spec.ts
View File

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

19
src/app/components/recent-files/recent-files.component.html
View File

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

21
src/app/components/shared-files/shared-files.component.html
View File

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

3
src/app/components/sidenav/sidenav.component.html
View File

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

4
src/app/ui/application.scss
View File

@ -8,6 +8,10 @@ html, body {
font-family: "Muli", sans-serif; font-family: "Muli", sans-serif;
color: $alfresco-primary-text-color; color: $alfresco-primary-text-color;
margin: 0; margin: 0;
& > main {
@include flex-column;
}
} }
app-root, app-root,

44
src/app/ui/overrides/_toolbar.scss
View File

@ -1,47 +1,19 @@
@import 'variables';
.adf-toolbar {
.mat-toolbar-single-row {
padding: 0 14px;
height: 48px;
}
&.inline {
.mat-toolbar {
border: none !important;
padding: 0;
}
}
}
@mixin toolbar-component-theme($theme) { @mixin toolbar-component-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
.adf-toolbar { .adf-toolbar {
@include angular-material-theme($theme); @include angular-material-theme($theme);
.mat-toolbar-single-row {
padding: 0 14px;
height: 48px;
}
&.inline { &.inline {
.mat-toolbar { .mat-toolbar {
background-color: mat-color($background, background); background-color: inherit;
border: none !important;
padding: 0;
} }
} }
} }
.secondary-options {
@include angular-material-theme($theme);
.toolbar__option--active {
color: mat-color($accent) !important;
}
.toolbar__option--default {
color: mat-color($primary, .87) !important;
}
button span {
color: mat-color($primary, .87);
}
}
} }

3
src/assets/i18n/en.json
View File

@ -111,7 +111,8 @@
"FAVORITE": "Favorite", "FAVORITE": "Favorite",
"UNSHARE": "Unshare", "UNSHARE": "Unshare",
"DETAILS": "View details", "DETAILS": "View details",
"VERSIONS": "Manage Versions" "VERSIONS": "Manage Versions",
"TOGGLE-SIDENAV": "Toggle side navigation bar"
}, },
"DIALOGS": { "DIALOGS": {
"CONFIRM_PURGE": { "CONFIRM_PURGE": {

18
src/index.html
View File

@ -57,13 +57,15 @@
</style> </style>
</head> </head>
<body> <body>
<app-root> <main>
<div class="loading"> <app-root>
<div class="loading-bar"></div> <div class="loading">
<div class="loading-bar"></div> <div class="loading-bar"></div>
<div class="loading-bar"></div> <div class="loading-bar"></div>
<div class="loading-bar"></div> <div class="loading-bar"></div>
</div> <div class="loading-bar"></div>
</app-root> </div>
</app-root>
</main>
</body> </body>
</html> </html>