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 ()

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

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

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

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

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

7
src/app/components/header/header.component.html

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

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

@ -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 ]
})

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

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

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

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

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

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

4
src/app/ui/application.scss

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

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

@ -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) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$background: map-get($theme, background);
.adf-toolbar {
@include angular-material-theme($theme);
.mat-toolbar-single-row {
padding: 0 14px;
height: 48px;
}
&.inline {
.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

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

18
src/index.html

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