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

[AAE-14030] Custom header text color is not working on apa (#8592)

Browse Source 
* [AAE-14030] Custom header text color is not working on apa

* CR

* Fix for demo app
This commit is contained in:
Bartosz Sekula
2023-05-25 16:56:26 +02:00
committed by GitHub
parent 507c6498a1
commit 2429bb4266
6 changed files with 22 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -138,7 +138,7 @@ export class AppLayoutComponent implements OnInit, OnDestroy {
this.headerService.headerTextColor this.headerService.headerTextColor
.pipe(takeUntil(this.onDestroy$)) .pipe(takeUntil(this.onDestroy$))
.subscribe(headerTextColor => { .subscribe(headerTextColor => {
document.documentElement.style.setProperty('--theme-primary-color-default-contrast', headerTextColor); document.documentElement.style.setProperty('--theme-header-text-color', headerTextColor);
}); });
this.headerService.logo this.headerService.logo

6
lib/core/src/lib/app-config/app-config.service.ts
View File

@@ -18,7 +18,7 @@
import { HttpClient } from '@angular/common/http'; import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core'; import { Injectable } from '@angular/core';
import { ObjectUtils } from '../common/utils/object-utils'; import { ObjectUtils } from '../common/utils/object-utils';
import { Observable, Subject } from 'rxjs'; import { Observable, ReplaySubject } from 'rxjs';
import { map, distinctUntilChanged, take } from 'rxjs/operators'; import { map, distinctUntilChanged, take } from 'rxjs/operators';
import { ExtensionConfig, ExtensionService, mergeObjects } from '@alfresco/adf-extensions'; import { ExtensionConfig, ExtensionService, mergeObjects } from '@alfresco/adf-extensions';
import { OpenidConfiguration } from '../auth/interfaces/openid-configuration.interface'; import { OpenidConfiguration } from '../auth/interfaces/openid-configuration.interface';
@@ -70,11 +70,11 @@ export class AppConfigService {
}; };
status: Status = Status.INIT; status: Status = Status.INIT;
protected onLoadSubject: Subject<any>; protected onLoadSubject: ReplaySubject<any>;
onLoad: Observable<any>; onLoad: Observable<any>;
constructor(protected http: HttpClient, protected extensionService: ExtensionService) { constructor(protected http: HttpClient, protected extensionService: ExtensionService) {
this.onLoadSubject = new Subject(); this.onLoadSubject = new ReplaySubject();
this.onLoad = this.onLoadSubject.asObservable(); this.onLoad = this.onLoadSubject.asObservable();
extensionService.setup$.subscribe((config) => { extensionService.setup$.subscribe((config) => {

1
lib/core/src/lib/layout/components/header/header.component.html
View File

@@ -32,6 +32,7 @@
> >
{{ title }} {{ title }}
</h1> </h1>
<ng-content></ng-content> <ng-content></ng-content>
<button <button

2
lib/core/src/lib/layout/components/header/header.component.scss
View File

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

15
lib/core/src/lib/layout/components/header/header.component.ts
View File

@@ -17,6 +17,8 @@
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core'; import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
import { ThemePalette } from '@angular/material/core'; import { ThemePalette } from '@angular/material/core';
import { AppConfigService } from '../../../app-config/app-config.service';
import { filter, take } from 'rxjs/operators';
@Component({ @Component({
selector: 'adf-layout-header', selector: 'adf-layout-header',
@@ -59,6 +61,19 @@ export class HeaderLayoutComponent implements OnInit {
/** The side of the page that the drawer is attached to (can be 'start' or 'end') */ /** The side of the page that the drawer is attached to (can be 'start' or 'end') */
@Input() position = 'start'; @Input() position = 'start';
constructor(
private appConfigService: AppConfigService
) {
this.appConfigService.select('headerTextColor')
.pipe(
filter((textColor) => !!textColor),
take(1)
)
.subscribe((textColor) => {
document.documentElement.style.setProperty('--theme-header-text-color', textColor);
});
}
toggleMenu() { toggleMenu() {
this.clicked.emit(true); this.clicked.emit(true);
this.expandedSidenav = !this.expandedSidenav; this.expandedSidenav = !this.expandedSidenav;

1
lib/core/src/lib/styles/_index.scss
View File

@@ -29,6 +29,7 @@
// theme colors // theme colors
--theme-primary-color: mat.get-color-from-palette($primary), --theme-primary-color: mat.get-color-from-palette($primary),
--theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast), --theme-primary-color-default-contrast: mat.get-color-from-palette($primary, default-contrast),
--theme-header-text-color: mat.get-color-from-palette($primary, default-contrast),
--adf-theme-primary-50:mat.get-color-from-palette($primary, 50), --adf-theme-primary-50:mat.get-color-from-palette($primary, 50),
--adf-theme-primary-100:mat.get-color-from-palette($primary, 100), --adf-theme-primary-100:mat.get-color-from-palette($primary, 100),
--adf-theme-primary-300:mat.get-color-from-palette($primary, 300), --adf-theme-primary-300:mat.get-color-from-palette($primary, 300),