[AAE-6811] Load custom theme (#2402)

app/src/app.config.json.tpl

@@ -30,6 +30,7 @@
   "sharedLinkDateTimePickerType": "date",
   "headerColor": "#ffffff",
   "headerTextColor": "#000000",
+  "customCssPath": "",
   "pagination": {
     "size": 25,
     "supportedPageSizes": [25, 50, 100]

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<string>('headerTextColor', '#000000'),
       logoPath: this.config.get<string>('application.logo'),
       headerImagePath: this.config.get<string>('application.headerImagePath'),
+      customCssPath: this.config.get<string>('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);
+      }
+    });
+  }
 }

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,

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

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;