From bc626798d537e2bc8adcda171de6e0f906fa9bb2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bartosz=20Seku=C5=82a?= Date: Fri, 29 Oct 2021 16:24:43 +0200 Subject: [PATCH] [AAE-6057] Customize text color in the header (#2326) * [AAE-6057] Customize text color in the header * [AAE-6057] use css vars * [AAE-6057] added tests * [AAE-6057] clear code * [AAE-6057] quick fix * [AAE-6057] update css so they wark nicly with new --adf-header-text-color --- .../toolbar-action/toolbar-action.component.scss | 5 ++++- .../aca-shared/store/src/selectors/app.selectors.ts | 1 + projects/aca-shared/store/src/states/app.state.ts | 1 + src/app.config.json | 1 + src/app/app.component.ts | 1 + src/app/components/header/header.component.scss | 12 ------------ src/app/components/header/header.component.spec.ts | 4 +++- src/app/components/header/header.component.ts | 8 +++++++- src/app/store/initial-state.ts | 1 + 9 files changed, 19 insertions(+), 15 deletions(-) diff --git a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss index 94a968faf..bfe061df7 100644 --- a/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss +++ b/projects/aca-shared/src/lib/components/tool-bar/toolbar-action/toolbar-action.component.scss @@ -1,4 +1,7 @@ .aca-toolbar-action { - color: var(--theme-foreground-text-color); margin: 0 5px; + + adf-userinfo { + color: var(--theme-foreground-text-color); + } } diff --git a/projects/aca-shared/store/src/selectors/app.selectors.ts b/projects/aca-shared/store/src/selectors/app.selectors.ts index 6b57b7113..de81621d0 100644 --- a/projects/aca-shared/store/src/selectors/app.selectors.ts +++ b/projects/aca-shared/store/src/selectors/app.selectors.ts @@ -29,6 +29,7 @@ import { createSelector } from '@ngrx/store'; export const selectApp = (state: AppStore) => state.app; export const getHeaderColor = createSelector(selectApp, (state) => state.headerColor); +export const getHeaderTextColor = createSelector(selectApp, (state) => state.headerTextColor); export const getAppName = createSelector(selectApp, (state) => state.appName); export const getLogoPath = createSelector(selectApp, (state) => state.logoPath); export const getHeaderImagePath = createSelector(selectApp, (state) => state.headerImagePath); diff --git a/projects/aca-shared/store/src/states/app.state.ts b/projects/aca-shared/store/src/states/app.state.ts index 984c8570b..093257e92 100644 --- a/projects/aca-shared/store/src/states/app.state.ts +++ b/projects/aca-shared/store/src/states/app.state.ts @@ -29,6 +29,7 @@ import { RepositoryInfo, VersionEntry } from '@alfresco/js-api'; export interface AppState { appName: string; headerColor: string; + headerTextColor: string; logoPath: string; headerImagePath: string; sharedUrl: string; diff --git a/src/app.config.json b/src/app.config.json index 9079f750c..b5600e6b8 100644 --- a/src/app.config.json +++ b/src/app.config.json @@ -29,6 +29,7 @@ "viewer.maxRetries": 1, "sharedLinkDateTimePickerType": "date", "headerColor": "#ffffff", + "headerTextColor": "#000000", "pagination": { "size": 25, "supportedPageSizes": [25, 50, 100] diff --git a/src/app/app.component.ts b/src/app/app.component.ts index f9b261723..f1b30533a 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -161,6 +161,7 @@ export class AppComponent implements OnInit, OnDestroy { ...INITIAL_APP_STATE, appName: this.config.get('application.name'), headerColor: this.config.get('headerColor'), + headerTextColor: this.config.get('headerTextColor', '#000000'), logoPath: this.config.get('application.logo'), headerImagePath: this.config.get('application.headerImagePath'), sharedUrl: baseShareUrl diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index 8a247d6d5..9f7036af8 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -6,14 +6,6 @@ background-image: var(--header-background-image) !important; background-repeat: no-repeat !important; - .adf-app-title { - color: var(--theme-foreground-text-color); - } - - .adf-menu-icon { - color: var(--theme-foreground-text-color) !important; - } - .aca-current-user { color: var(--theme-foreground-text-color) !important; } @@ -21,9 +13,5 @@ .adf-toolbar-divider div { background-color: var(--theme-foreground-text-color) !important; } - - .app-toolbar-menu { - color: var(--theme-foreground-text-color) !important; - } } } diff --git a/src/app/components/header/header.component.spec.ts b/src/app/components/header/header.component.spec.ts index d16723ca2..457b4ebe1 100644 --- a/src/app/components/header/header.component.spec.ts +++ b/src/app/components/header/header.component.spec.ts @@ -54,6 +54,7 @@ describe('AppHeaderComponent', () => { const app = { headerColor: 'some-color', + headerTextColor: 'text-color', appName: 'name', logoPath: 'some/path' } as AppState; @@ -82,10 +83,11 @@ describe('AppHeaderComponent', () => { component = fixture.componentInstance; }); - it('should set header color, name and logo', fakeAsync(() => { + it('should set header color, header text color, name and logo', fakeAsync(() => { component.appName$.subscribe((val) => expect(val).toBe(app.appName)); component.logo$.subscribe((val) => expect(val).toBe(app.logoPath)); component.headerColor$.subscribe((val) => expect(val).toBe(app.headerColor)); + component.headerTextColor$.subscribe((val) => expect(val).toBe(app.headerTextColor)); })); it('should get header actions', fakeAsync(() => { diff --git a/src/app/components/header/header.component.ts b/src/app/components/header/header.component.ts index 492a14843..12485fd8a 100644 --- a/src/app/components/header/header.component.ts +++ b/src/app/components/header/header.component.ts @@ -27,7 +27,7 @@ import { Component, ViewEncapsulation, Output, EventEmitter, OnInit, Input, OnDe import { Store } from '@ngrx/store'; import { Observable, Subject } from 'rxjs'; import { ContentActionRef } from '@alfresco/adf-extensions'; -import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath } from '@alfresco/aca-shared/store'; +import { AppStore, getHeaderColor, getAppName, getLogoPath, getHeaderImagePath, getHeaderTextColor } from '@alfresco/aca-shared/store'; import { AppExtensionService } from '@alfresco/aca-shared'; import { takeUntil } from 'rxjs/operators'; @@ -47,12 +47,14 @@ export class AppHeaderComponent implements OnInit, OnDestroy { appName$: Observable; headerColor$: Observable; + headerTextColor$: Observable; logo$: Observable; actions: Array = []; constructor(store: Store, private appExtensions: AppExtensionService) { this.headerColor$ = store.select(getHeaderColor); + this.headerTextColor$ = store.select(getHeaderTextColor); this.appName$ = store.select(getAppName); this.logo$ = store.select(getLogoPath); @@ -68,6 +70,10 @@ export class AppHeaderComponent implements OnInit, OnDestroy { .subscribe((actions) => { this.actions = actions; }); + + this.headerTextColor$.subscribe((color) => { + document.documentElement.style.setProperty('--adf-header-text-color', color); + }); } ngOnDestroy() { diff --git a/src/app/store/initial-state.ts b/src/app/store/initial-state.ts index 04c355b3e..d24d89476 100644 --- a/src/app/store/initial-state.ts +++ b/src/app/store/initial-state.ts @@ -28,6 +28,7 @@ import { AppState, AppStore } from '@alfresco/aca-shared/store'; export const INITIAL_APP_STATE: AppState = { appName: 'Alfresco Content Application', headerColor: '#ffffff', + headerTextColor: '#000000', logoPath: 'assets/images/alfresco-logo-white.svg', headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg', sharedUrl: '',