diff --git a/app/src/app.config.json.tpl b/app/src/app.config.json.tpl index 3d6e48dff..46e385ba4 100644 --- a/app/src/app.config.json.tpl +++ b/app/src/app.config.json.tpl @@ -30,6 +30,7 @@ "sharedLinkDateTimePickerType": "date", "headerColor": "#ffffff", "headerTextColor": "#000000", + "customCssPath": "", "pagination": { "size": 25, "supportedPageSizes": [25, 50, 100] diff --git a/app/src/app/app.component.ts b/app/src/app/app.component.ts index f1b30533a..b96348a26 100644 --- a/app/src/app/app.component.ts +++ b/app/src/app/app.component.ts @@ -44,7 +44,8 @@ import { SetUserProfileAction, SnackbarErrorAction, CloseModalDialogsAction, - SetRepositoryInfoAction + SetRepositoryInfoAction, + getCustomCssPath } from '@alfresco/aca-shared/store'; import { filter, takeUntil } from 'rxjs/operators'; import { RouterExtensionService, AppService, ContentApiService } from '@alfresco/aca-shared'; @@ -97,6 +98,8 @@ export class AppComponent implements OnInit, OnDestroy { this.loadAppSettings(); + this.loadCustomCss(); + const { router, pageTitle } = this; this.router.events @@ -164,6 +167,7 @@ export class AppComponent implements OnInit, OnDestroy { headerTextColor: this.config.get('headerTextColor', '#000000'), logoPath: this.config.get('application.logo'), headerImagePath: this.config.get('application.headerImagePath'), + customCssPath: this.config.get('customCssPath'), sharedUrl: baseShareUrl }; @@ -195,4 +199,16 @@ export class AppComponent implements OnInit, OnDestroy { this.store.dispatch(new SnackbarErrorAction(message)); } + + private loadCustomCss(): void { + this.store.select(getCustomCssPath).subscribe((cssPath) => { + if (cssPath) { + const cssLinkElement = document.createElement('link'); + cssLinkElement.setAttribute('rel', 'stylesheet'); + cssLinkElement.setAttribute('type', 'text/css'); + cssLinkElement.setAttribute('href', cssPath); + document.head.appendChild(cssLinkElement); + } + }); + } } diff --git a/app/src/app/store/initial-state.ts b/app/src/app/store/initial-state.ts index d24d89476..0ed05c9da 100644 --- a/app/src/app/store/initial-state.ts +++ b/app/src/app/store/initial-state.ts @@ -31,6 +31,7 @@ export const INITIAL_APP_STATE: AppState = { headerTextColor: '#000000', logoPath: 'assets/images/alfresco-logo-white.svg', headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg', + customCssPath: '', sharedUrl: '', user: { isAdmin: null, diff --git a/projects/aca-shared/store/src/selectors/app.selectors.ts b/projects/aca-shared/store/src/selectors/app.selectors.ts index de81621d0..8fb1813c0 100644 --- a/projects/aca-shared/store/src/selectors/app.selectors.ts +++ b/projects/aca-shared/store/src/selectors/app.selectors.ts @@ -32,6 +32,7 @@ export const getHeaderColor = createSelector(selectApp, (state) => state.headerC 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 getCustomCssPath = createSelector(selectApp, (state) => state.customCssPath); export const getHeaderImagePath = createSelector(selectApp, (state) => state.headerImagePath); export const getUserProfile = createSelector(selectApp, (state) => state.user); export const getCurrentFolder = createSelector(selectApp, (state) => state.navigation.currentFolder); diff --git a/projects/aca-shared/store/src/states/app.state.ts b/projects/aca-shared/store/src/states/app.state.ts index 093257e92..06a3c6e3a 100644 --- a/projects/aca-shared/store/src/states/app.state.ts +++ b/projects/aca-shared/store/src/states/app.state.ts @@ -31,6 +31,7 @@ export interface AppState { headerColor: string; headerTextColor: string; logoPath: string; + customCssPath: string; headerImagePath: string; sharedUrl: string; currentNodeVersion: VersionEntry;