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

* [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

demo-shell/resources/i18n/en.json

@@ -55,6 +55,7 @@
   },
   "APP_LAYOUT": {
     "APP": "App",
+    "HEADER_TEXT_COLOR": "Header text color",
     "APP_NAME": "ADF Demo Application",
     "FILTERED_SEARCH": "Filter Header",
     "HOME": "Home",

demo-shell/src/app/components/app-layout/app-layout.component.html

@@ -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"
+            <adf-layout-header
-                [tooltip]="tooltip | translate" [showSidenavToggle]="showMenu" [expandedSidenav]="!isMenuMinimized()"
+                id="adf-header"
-                [color]="color" [position]="position" (clicked)=toggleMenu($event)>
+                [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>
 

demo-shell/src/app/components/app-layout/app-layout.component.ts

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

demo-shell/src/app/components/header-data/header-data.component.html

@@ -26,6 +26,14 @@
             <p>*press enter for submitting new title</p>
         </div>
 
+        <div>
+            <label>Change header text color</label>
+            <input type="text" name="headerColor" (keyup.enter)="submitHeaderTextColor($any($event).target.value)"
+                   placeholder="{{ 'APP_LAYOUT.HEADER_TEXT_COLOR' | translate}}">
+            <p>*press enter for submitting new color text</p>
+            <p>*hex color</p>
+        </div>
+
         <div>
             <label>Change logo</label>
             <input type="text" placeholder="URL path" (keyup.enter)="submitLogo($any($event).target.value)">

demo-shell/src/app/components/header-data/header-data.component.ts

@@ -27,6 +27,11 @@ export class HeaderDataComponent {
     checkbox = true;
     position: 'start' | 'end' = 'start';
     hideSidenavToggle = false;
+    colorsHashesTests = [
+        /#[a-z0-9]{3}/i,
+        /#[a-z0-9]{4}/i,
+        /#[a-z0-9]{6}/i
+    ];
 
     constructor(private headerService: HeaderDataService) {
     }
@@ -45,6 +50,14 @@ export class HeaderDataComponent {
         }
     }
 
+    submitHeaderTextColor(color: string): void {
+        const isColorHashValid = this.colorsHashesTests.some(colorTest => colorTest.test(color));
+
+        if (isColorHashValid || !color) {
+            this.headerService.changeHeaderTextColor(color);
+        }
+    }
+
     submitLogo(logoPath: string) {
         if (logoPath) {
             this.headerService.changeLogo(logoPath);

demo-shell/src/app/components/header-data/header-data.service.ts

@@ -28,6 +28,7 @@ export class HeaderDataService {
 
     @Output() hideMenu = new EventEmitter<boolean>();
     @Output() color = new EventEmitter<ThemePalette>();
+    @Output() headerTextColor = new EventEmitter<string>();
     @Output() title = new EventEmitter<string>();
     @Output() logo = new EventEmitter<string>();
     @Output() redirectUrl = new EventEmitter<string | any[]>();
@@ -46,13 +47,16 @@ export class HeaderDataService {
 
     changeTitle(title: string) {
         this.title.emit(title);
-
     }
 
     changeLogo(logoPath: string) {
         this.logo.emit(logoPath);
     }
 
+    changeHeaderTextColor(color: string): void {
+        this.headerTextColor.emit(color);
+    }
+
     changeRedirectUrl(redirectUrl: string | any[]) {
         this.redirectUrl.emit(redirectUrl);
     }

lib/core/layout/components/header/header.component.scss

@@ -1,6 +1,7 @@
-adf-layout-header .mat-toolbar-single-row {
 
-    color: var(--theme-primary-color-default-contrast) !important;
+adf-layout-header .mat-toolbar-single-row {
+    color: var(--adf-header-text-color) !important;
+    background-color: var(--adf-header-background-color);
     position: relative;
     padding: 0 24px;
 

lib/core/styles/_index.scss

@@ -48,6 +48,8 @@
         --adf-card-view-label-color: mat-color($foreground, text, 0.4),
         --adf-card-view-datetime-border-color: mat-color($foreground, text, 0.42),
         --adf-upload-border-color: mat-color($foreground, text, 0.14),
+        --adf-header-background-color: mat-color($primary),
+        --adf-header-text-color: mat-color($primary, default-contrast),
 
         --theme-hover-bg-color: mat-color($background, hover),
         --theme-text-color: mat-color($foreground, text, 0.54),