customisable header image url (#1449)

docs/getting-started/configuration.md

@@ -86,7 +86,6 @@ The default logo displayed in the top left corner of the Alfresco Content Applic
 
 ```json
 {
-    ...,
     "application": {
         "logo": "/assets/images/alfresco-logo-white.svg"
     }
@@ -99,8 +98,21 @@ You can change the header background color by specifying the color code for the
 
 ```json
 {
-    ...,
-    "headerColor": "#ffffff"
+    "application": {
+      "headerColor": "#ffffff"
+    }
+}
+```
+
+### Header background image
+
+You can change the header background image by specifying the path to the corresponding resource:
+
+```json
+{
+    "application": {
+      "headerImagePath": "assets/images/mastHead-bg-shapesPattern.svg",
+    }
 }
 ```
 

projects/aca-shared/store/src/selectors/app.selectors.ts

@@ -43,6 +43,11 @@ export const getLogoPath = createSelector(
   state => state.logoPath
 );
 
+export const getHeaderImagePath = createSelector(
+  selectApp,
+  state => state.headerImagePath
+);
+
 export const getLanguagePickerState = createSelector(
   selectApp,
   state => state.languagePicker

projects/aca-shared/store/src/states/app.state.ts

@@ -34,6 +34,7 @@ export interface AppState {
   appName: string;
   headerColor: string;
   logoPath: string;
+  headerImagePath: string;
   languagePicker: boolean;
   sharedUrl: string;
   selection: SelectionState;

src/app.config.json

@@ -21,6 +21,7 @@
     "name": "Alfresco Content Application",
     "version": "1.11.0",
     "logo": "assets/images/alfresco-logo-flower.svg",
+    "headerImagePath": "assets/images/mastHead-bg-shapesPattern.svg",
     "copyright": "APP.COPYRIGHT"
   },
   "viewer.maxRetries": 1,

src/app/app.component.ts

@@ -184,6 +184,7 @@ export class AppComponent implements OnInit, OnDestroy {
       appName: this.config.get<string>('application.name'),
       headerColor: this.config.get<string>('headerColor'),
       logoPath: this.config.get<string>('application.logo'),
+      headerImagePath: this.config.get<string>('application.headerImagePath'),
       sharedUrl: baseShareUrl
     };
 

src/app/components/header/header.component.scss

@@ -8,7 +8,7 @@
     z-index: 2;
 
     .mat-toolbar {
-      background-image: url('/assets/images/mastHead-bg-shapesPattern.svg') !important;
+      background-image: var(--header-background-image) !important;
       background-repeat: no-repeat !important;
 
       .adf-app-title {

src/app/components/header/header.component.ts

@@ -39,7 +39,8 @@ import {
   AppStore,
   getHeaderColor,
   getAppName,
-  getLogoPath
+  getLogoPath,
+  getHeaderImagePath
 } from '@alfresco/aca-shared/store';
 
 @Component({
@@ -68,6 +69,13 @@ export class AppHeaderComponent implements OnInit {
     this.headerColor$ = store.select(getHeaderColor);
     this.appName$ = store.select(getAppName);
     this.logo$ = store.select(getLogoPath);
+
+    store.select(getHeaderImagePath).subscribe(path => {
+      document.body.style.setProperty(
+        '--header-background-image',
+        `url('${path}')`
+      );
+    });
   }
 
   ngOnInit() {

src/app/store/initial-state.ts

@@ -29,6 +29,7 @@ export const INITIAL_APP_STATE: AppState = {
   appName: 'Alfresco Content Application',
   headerColor: '#ffffff',
   logoPath: 'assets/images/alfresco-logo-white.svg',
+  headerImagePath: 'assets/images/mastHead-bg-shapesPattern.svg',
   languagePicker: false,
   sharedUrl: '',
   user: {

src/app/ui/custom-theme.scss

@@ -89,10 +89,11 @@ $defaults: (
   --theme-text-color: mat-color($foreground, text, 0.54),
   --theme-title-color: mat-color($foreground, text, 0.87),
   --theme-text-disabled-color: mat-color($foreground, text, 0.38),
-  --theme-border-color: mat-color($foreground, text, 0.07)
+  --theme-border-color: mat-color($foreground, text, 0.07),
+  --header-background-image: url('assets/images/mastHead-bg-shapesPattern.svg')
 );
 
-// defaults
+// propagates SCSS variables into the CSS variables scope
 :root {
   @each $name, $value in $defaults {
     #{$name}: #{$value};