inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1244] Toolbar theme (#257)

Browse Source
This commit is contained in:
Cilibiu Bogdan
2018-03-24 10:34:21 +02:00
committed by Denys Vuika
parent d69a18127b
commit 107c44665b
7 changed files with 84 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,6 +7,7 @@
<button <button
mat-icon-button mat-icon-button
color="primary"
*ngIf="canPreviewFile(documentList.selection)" *ngIf="canPreviewFile(documentList.selection)"
title="{{ 'APP.ACTIONS.VIEW' | translate }}" title="{{ 'APP.ACTIONS.VIEW' | translate }}"
(click)="onNodeDoubleClick(documentList.selection[0]?.entry)"> (click)="onNodeDoubleClick(documentList.selection[0]?.entry)">
@@ -15,6 +16,7 @@
<button <button
mat-icon-button mat-icon-button
color="primary"
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}" title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
[adfNodeDownload]="documentList.selection"> [adfNodeDownload]="documentList.selection">
@@ -23,6 +25,7 @@
<button <button
mat-icon-button mat-icon-button
color="primary"
*ngIf="showEditOption(documentList.selection)" *ngIf="showEditOption(documentList.selection)"
title="{{ 'APP.ACTIONS.EDIT' | translate }}" title="{{ 'APP.ACTIONS.EDIT' | translate }}"
[adf-edit-folder]="documentList.selection[0]?.entry"> [adf-edit-folder]="documentList.selection[0]?.entry">
@@ -30,7 +33,7 @@
</button> </button>
<button mat-icon-button <button mat-icon-button
[color]="infoDrawerOpened ? 'primary' : 'accent'" [color]="infoDrawerOpened ? 'accent' : 'primary'"
*ngIf="documentList.selection.length" *ngIf="documentList.selection.length"
title="{{ 'APP.ACTIONS.DETAILS' | translate }}" title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
(click)="toggleSidebar()"> (click)="toggleSidebar()">
@@ -38,6 +41,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.MORE' | translate }}" title="{{ 'APP.ACTIONS.MORE' | translate }}"
@@ -52,7 +56,10 @@
#selection="adfFavorite" #selection="adfFavorite"
(toggle)="refresh()" (toggle)="refresh()"
[adf-node-favorite]="documentList.selection"> [adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }"> <mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }} {{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon> </mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span> <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -61,21 +68,21 @@
<button <button
mat-menu-item mat-menu-item
[app-copy-node]="documentList.selection"> [app-copy-node]="documentList.selection">
<mat-icon>content_copy</mat-icon> <mat-icon color="primary">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
[app-move-node]="documentList.selection"> [app-move-node]="documentList.selection">
<mat-icon>library_books</mat-icon> <mat-icon color="primary">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
[app-delete-node]="documentList.selection"> [app-delete-node]="documentList.selection">
<mat-icon>delete</mat-icon> <mat-icon color="primary">delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span> <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button> </button>
@@ -83,7 +90,7 @@
mat-menu-item mat-menu-item
*ngIf="isFileSelected(documentList.selection)" *ngIf="isFileSelected(documentList.selection)"
[app-node-versions]="documentList.selection"> [app-node-versions]="documentList.selection">
<mat-icon>storage</mat-icon> <mat-icon color="primary">storage</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

@@ -8,6 +8,7 @@
<adf-toolbar class="inline"> <adf-toolbar class="inline">
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="canPreviewFile(documentList.selection)" *ngIf="canPreviewFile(documentList.selection)"
title="{{ 'APP.ACTIONS.VIEW' | translate }}" title="{{ 'APP.ACTIONS.VIEW' | translate }}"
@@ -16,6 +17,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}" title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
@@ -24,6 +26,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="canEditFolder(documentList.selection)" *ngIf="canEditFolder(documentList.selection)"
title="{{ 'APP.ACTIONS.EDIT' | translate }}" title="{{ 'APP.ACTIONS.EDIT' | translate }}"
@@ -32,7 +35,7 @@
</button> </button>
<button mat-icon-button <button mat-icon-button
[color]="infoDrawerOpened ? 'primary' : 'accent'" [color]="infoDrawerOpened ? 'accent' : 'primary'"
*ngIf="documentList.selection.length" *ngIf="documentList.selection.length"
title="{{ 'APP.ACTIONS.DETAILS' | translate }}" title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
(click)="toggleSidebar()"> (click)="toggleSidebar()">
@@ -40,6 +43,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.MORE' | translate }}" title="{{ 'APP.ACTIONS.MORE' | translate }}"
@@ -54,7 +58,10 @@
mat-menu-item mat-menu-item
#selection="adfFavorite" #selection="adfFavorite"
[adf-node-favorite]="documentList.selection"> [adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }"> <mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }} {{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon> </mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span> <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -63,7 +70,7 @@
<button <button
mat-menu-item mat-menu-item
[app-copy-node]="documentList.selection"> [app-copy-node]="documentList.selection">
<mat-icon>content_copy</mat-icon> <mat-icon color="primary">content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span> <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button> </button>
@@ -71,7 +78,7 @@
mat-menu-item mat-menu-item
*ngIf="canMove(documentList.selection)" *ngIf="canMove(documentList.selection)"
[app-move-node]="documentList.selection"> [app-move-node]="documentList.selection">
<mat-icon>library_books</mat-icon> <mat-icon color="primary">library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span> <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button> </button>
@@ -79,7 +86,7 @@
mat-menu-item mat-menu-item
*ngIf="canDelete(documentList.selection)" *ngIf="canDelete(documentList.selection)"
[app-delete-node]="documentList.selection"> [app-delete-node]="documentList.selection">
<mat-icon>delete</mat-icon> <mat-icon color="primary">delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span> <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button> </button>
@@ -87,7 +94,7 @@
mat-menu-item mat-menu-item
*ngIf="canManageVersions(documentList.selection)" *ngIf="canManageVersions(documentList.selection)"
[app-node-versions]="documentList.selection"> [app-node-versions]="documentList.selection">
<mat-icon>storage</mat-icon> <mat-icon color="primary">storage</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span> <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button> </button>
</mat-menu> </mat-menu>

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

@@ -7,6 +7,7 @@
<button <button
mat-icon-button mat-icon-button
color="primary"
*ngIf="canPreviewFile(documentList.selection)" *ngIf="canPreviewFile(documentList.selection)"
title="{{ 'APP.ACTIONS.VIEW' | translate }}" title="{{ 'APP.ACTIONS.VIEW' | translate }}"
(click)="onNodeDoubleClick(documentList.selection[0]?.entry)"> (click)="onNodeDoubleClick(documentList.selection[0]?.entry)">
@@ -15,6 +16,7 @@
<button <button
mat-icon-button mat-icon-button
color="primary"
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}" title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
[adfNodeDownload]="documentList.selection"> [adfNodeDownload]="documentList.selection">
@@ -22,7 +24,7 @@
</button> </button>
<button mat-icon-button <button mat-icon-button
[color]="infoDrawerOpened ? 'primary' : 'accent'" [color]="infoDrawerOpened ? 'accent' : 'primary'"
*ngIf="documentList.selection.length" *ngIf="documentList.selection.length"
title="{{ 'APP.ACTIONS.DETAILS' | translate }}" title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
(click)="toggleSidebar()"> (click)="toggleSidebar()">
@@ -30,12 +32,14 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.MORE' | translate }}" title="{{ 'APP.ACTIONS.MORE' | translate }}"
[matMenuTriggerFor]="actionsMenu"> [matMenuTriggerFor]="actionsMenu">
<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"> class="secondary-options">
@@ -43,7 +47,10 @@
mat-menu-item mat-menu-item
#selection="adfFavorite" #selection="adfFavorite"
[adf-node-favorite]="documentList.selection"> [adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }"> <mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }} {{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon> </mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span> <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -52,7 +59,7 @@
<button <button
mat-menu-item mat-menu-item
[app-copy-node]="documentList.selection"> [app-copy-node]="documentList.selection">
<mat-icon>content_copy</mat-icon> <mat-icon color="primary">content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span> <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button> </button>
@@ -60,7 +67,7 @@
mat-menu-item mat-menu-item
*ngIf="canMove(documentList.selection)" *ngIf="canMove(documentList.selection)"
[app-move-node]="documentList.selection"> [app-move-node]="documentList.selection">
<mat-icon>library_books</mat-icon> <mat-icon color="primary">library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span> <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button> </button>
@@ -68,7 +75,7 @@
mat-menu-item mat-menu-item
*ngIf="canDelete(documentList.selection)" *ngIf="canDelete(documentList.selection)"
[app-delete-node]="documentList.selection"> [app-delete-node]="documentList.selection">
<mat-icon>delete</mat-icon> <mat-icon color="primary">delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span> <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button> </button>
@@ -76,7 +83,7 @@
mat-menu-item mat-menu-item
*ngIf="canManageVersions(documentList.selection)" *ngIf="canManageVersions(documentList.selection)"
[app-node-versions]="documentList.selection"> [app-node-versions]="documentList.selection">
<mat-icon>storage</mat-icon> <mat-icon color="primary">storage</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span> <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button> </button>
</mat-menu> </mat-menu>

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

@@ -4,8 +4,8 @@
</adf-breadcrumb> </adf-breadcrumb>
<adf-toolbar class="inline"> <adf-toolbar class="inline">
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="canPreviewFile(documentList.selection)" *ngIf="canPreviewFile(documentList.selection)"
title="{{ 'APP.ACTIONS.VIEW' | translate }}" title="{{ 'APP.ACTIONS.VIEW' | translate }}"
@@ -14,6 +14,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}" title="{{ 'APP.ACTIONS.DOWNLOAD' | translate }}"
@@ -22,7 +23,7 @@
</button> </button>
<button mat-icon-button <button mat-icon-button
[color]="infoDrawerOpened ? 'primary' : 'accent'" [color]="infoDrawerOpened ? 'accent' : 'primary'"
*ngIf="documentList.selection.length" *ngIf="documentList.selection.length"
title="{{ 'APP.ACTIONS.DETAILS' | translate }}" title="{{ 'APP.ACTIONS.DETAILS' | translate }}"
(click)="toggleSidebar()"> (click)="toggleSidebar()">
@@ -30,12 +31,14 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
*ngIf="hasSelection(documentList.selection)" *ngIf="hasSelection(documentList.selection)"
title="{{ 'APP.ACTIONS.MORE' | translate }}" title="{{ 'APP.ACTIONS.MORE' | translate }}"
[matMenuTriggerFor]="actionsMenu"> [matMenuTriggerFor]="actionsMenu">
<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"> class="secondary-options">
@@ -43,7 +46,10 @@
mat-menu-item mat-menu-item
#selection="adfFavorite" #selection="adfFavorite"
[adf-node-favorite]="documentList.selection"> [adf-node-favorite]="documentList.selection">
<mat-icon [ngClass]="{ 'icon-highlight': selection.hasFavorites() }"> <mat-icon [ngClass]="{
'toolbar__option--active': selection.hasFavorites(),
'toolbar__option--default': !selection.hasFavorites()
}">
{{ selection.hasFavorites() ? 'star' :'star_border' }} {{ selection.hasFavorites() ? 'star' :'star_border' }}
</mat-icon> </mat-icon>
<span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span> <span>{{ 'APP.ACTIONS.FAVORITE' | translate }}</span>
@@ -52,7 +58,7 @@
<button <button
mat-menu-item mat-menu-item
[app-copy-node]="documentList.selection"> [app-copy-node]="documentList.selection">
<mat-icon>content_copy</mat-icon> <mat-icon color="primary">content_copy</mat-icon>
<span>{{ 'APP.ACTIONS.COPY' | translate }}</span> <span>{{ 'APP.ACTIONS.COPY' | translate }}</span>
</button> </button>
@@ -60,7 +66,7 @@
mat-menu-item mat-menu-item
*ngIf="canMoveShared(documentList.selection)" *ngIf="canMoveShared(documentList.selection)"
[app-move-node]="documentList.selection"> [app-move-node]="documentList.selection">
<mat-icon>library_books</mat-icon> <mat-icon color="primary">library_books</mat-icon>
<span>{{ 'APP.ACTIONS.MOVE' | translate }}</span> <span>{{ 'APP.ACTIONS.MOVE' | translate }}</span>
</button> </button>
@@ -69,7 +75,7 @@
*ngIf="canDelete(documentList.selection)" *ngIf="canDelete(documentList.selection)"
[appUnshareNode]="documentList.selection" [appUnshareNode]="documentList.selection"
(links-unshared)="refresh()"> (links-unshared)="refresh()">
<mat-icon>stop_screen_share</mat-icon> <mat-icon color="primary">stop_screen_share</mat-icon>
<span>{{ 'APP.ACTIONS.UNSHARE' | translate }}</span> <span>{{ 'APP.ACTIONS.UNSHARE' | translate }}</span>
</button> </button>
@@ -77,7 +83,7 @@
mat-menu-item mat-menu-item
*ngIf="canDeleteShared(documentList.selection)" *ngIf="canDeleteShared(documentList.selection)"
[app-delete-node]="documentList.selection"> [app-delete-node]="documentList.selection">
<mat-icon>delete</mat-icon> <mat-icon color="primary">delete</mat-icon>
<span>{{ 'APP.ACTIONS.DELETE' | translate }}</span> <span>{{ 'APP.ACTIONS.DELETE' | translate }}</span>
</button> </button>
@@ -85,7 +91,7 @@
mat-menu-item mat-menu-item
*ngIf="canManageVersionsOfShared(documentList.selection)" *ngIf="canManageVersionsOfShared(documentList.selection)"
[app-node-versions]="documentList.selection"> [app-node-versions]="documentList.selection">
<mat-icon>storage</mat-icon> <mat-icon color="primary">storage</mat-icon>
<span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span> <span>{{ 'APP.ACTIONS.VERSIONS' | translate }}</span>
</button> </button>
</mat-menu> </mat-menu>

2
src/app/components/trashcan/trashcan.component.html
View File

@@ -5,6 +5,7 @@
<adf-toolbar class="inline"> <adf-toolbar class="inline">
<button <button
color="primary"
mat-icon-button mat-icon-button
[app-permanent-delete-node]="documentList.selection" [app-permanent-delete-node]="documentList.selection"
(selection-node-deleted)="refresh()" (selection-node-deleted)="refresh()"
@@ -14,6 +15,7 @@
</button> </button>
<button <button
color="primary"
mat-icon-button mat-icon-button
(selection-node-restored)="refresh()" (selection-node-restored)="refresh()"
[app-restore-node]="documentList.selection" [app-restore-node]="documentList.selection"

2
src/app/ui/custom-theme.scss
View File

@@ -2,6 +2,7 @@
@import '~@alfresco/adf-content-services/theming'; @import '~@alfresco/adf-content-services/theming';
@import '../components/sidenav/sidenav.component.theme'; @import '../components/sidenav/sidenav.component.theme';
@import './overrides/toolbar';
$grey-scale: ( $grey-scale: (
50 : #e0e0e0, 50 : #e0e0e0,
@@ -45,4 +46,5 @@ $custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent);
@mixin custom-theme($theme) { @mixin custom-theme($theme) {
@include sidenav-component-theme($custom-theme); @include sidenav-component-theme($custom-theme);
@include toolbar-component-theme($custom-theme);
} }

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

@@ -1,39 +1,47 @@
@import 'variables.scss'; @import 'variables';
.adf-toolbar { .adf-toolbar {
.mat-toolbar-single-row { .mat-toolbar-single-row {
padding: 0 14px; padding: 0 14px;
height: 48px;
} }
// TODO: review and remove once ADF 2.0.0 is out
&.inline { &.inline {
.mat-toolbar { .mat-toolbar {
border: none !important; border: none !important;
background: $alfresco-gray-background;
padding: 0; padding: 0;
height: 48px;
} }
}
}
// TODO remove once it gets to ADF @mixin toolbar-component-theme($theme) {
.mat-icon { $primary: map-get($theme, primary);
color: $alfresco-secondary-text-color; $accent: map-get($theme, accent);
} $background: map-get($theme, background);
&-row { .adf-toolbar {
& > button { @include angular-material-theme($theme);
color: $alfresco-secondary-text-color;
&.inline {
.mat-toolbar {
background-color: mat-color($background, background);
} }
} }
} }
}
.secondary-options { .secondary-options {
// TODO remove once it gets to ADF @include angular-material-theme($theme);
button {
color: $alfresco-secondary-text-color;
}
.icon-highlight { .toolbar__option--active {
color: $alfresco-primary-accent--default; color: mat-color($accent) !important;
}
.toolbar__option--default {
color: mat-color($primary, .87) !important;
}
button span {
color: mat-color($primary, .87);
}
} }
} }