inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-6057] Customize text color in the header (#7325)

Browse Source 
* [AAE-6057] Customize text color in the header

* [AAE-6057] Updates documents

* [AAE-6057] Use css variables to update header colors

* Revert "[AAE-6057] Updates documents"

This reverts commit 1915535c01b77c58d9a6d87bb242e04715bcbc6f.

* [AAE-6057] Fix for css name change

* [AAE-6057] Removing has-mat-color

* [AAE-6057] Removing redundant tests
This commit is contained in:
Bartosz Sekuła
2021-10-29 08:49:05 +02:00
committed by GitHub
parent 08b9cd144f
commit b3140b626c
8 changed files with 57 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -4,9 +4,17 @@
<adf-sidenav-layout-header>
<ng-template let-toggleMenu="toggleMenu" let-isMenuMinimized="isMenuMinimized">
<adf-layout-header id="adf-header" [title]="title | translate" [redirectUrl]="redirectUrl" [logo]="logo"
[tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="!isMenuMinimized()"
[color]="color" [position]="position" (clicked)=toggleMenu($event)>
<adf-layout-header
id="adf-header"
[title]="title | translate"
[redirectUrl]="redirectUrl"
[logo]="logo"
[tooltip]="tooltip | translate"
[showSidenavToggle]="showMenu"
[expandedSidenav]="!isMenuMinimized()"
[color]="color"
[position]="position"
(clicked)=toggleMenu($event)>
<div class="app-layout-menu-spacer"></div>

15
demo-shell/src/app/components/app-layout/app-layout.component.ts
View File

@@ -121,12 +121,25 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
this.headerService.color
.pipe(takeUntil(this.onDestroy$))
.subscribe(color => this.color = color);
.subscribe(color => {
if (['primary', 'accent', 'warn'].includes(color)) {
this.color = color;
} else {
this.color = undefined;
document.documentElement.style.setProperty('--adf-header-background-color', color);
}
});
this.headerService.title
.pipe(takeUntil(this.onDestroy$))
.subscribe(title => this.title = title);
this.headerService.headerTextColor
.pipe(takeUntil(this.onDestroy$))
.subscribe(headerTextColor => {
document.documentElement.style.setProperty('--adf-header-text-color', headerTextColor);
});
this.headerService.logo
.pipe(takeUntil(this.onDestroy$))
.subscribe(path => this.logo = path);