diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 3a5c871757..7afc262045 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -379,7 +379,7 @@ deploy_demo_b2b: --name ${SERVICE} --env ICM_BASE_URL=$ICM_BASE_URL --env LOGGING=true - --env THEME=blue + --env THEME=blue|688dc3 --env FEATURES=quoting,compare,recently,businessCustomerRegistration,advancedVariationHandling,sentry --env ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site --env SENTRY_DSN=${SENTRY_DSN} @@ -547,7 +547,7 @@ deploy_review_b2c: -e PWA_2_SUBDOMAIN=b2b -e PWA_2_CHANNEL=inSPIRED-inTRONICS_Business-Site -e PWA_2_FEATURES=quoting,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry - -e PWA_2_THEME=blue + -e PWA_2_THEME=blue|688dc3 -e PWA_3_SUBDOMAIN=de -e PWA_3_CHANNEL=inSPIRED-inTRONICS-Site -e PWA_3_LANG=de_DE @@ -556,7 +556,7 @@ deploy_review_b2c: -e PWA_4_CHANNEL=inSPIRED-inTRONICS-Site -e PWA_4_APPLICATION=smb-responsive -e PWA_4_FEATURES=quoting - -e PWA_4_THEME=blue + -e PWA_4_THEME=blue|688dc3 ${CI_REGISTRY_IMAGE}:nginx-${CI_COMMIT_REF_SLUG} - sleep 10 - docker run --rm --add-host $DEMO_SERVER_NAME:$DEMO_SERVER_IP mwendler/wget --wait 10 --tries 10 --retry-connrefused "http://$DEMO_SERVER_NAME:3000/${CI_COMMIT_REF_SLUG}-pwa-b2c" @@ -614,7 +614,7 @@ deploy_review_b2b: -e LOGGING=true -e SENTRY_DSN=${SENTRY_DSN} -e ICM_BASE_URL=${ICM_BASE_URL} - -e THEME=blue + -e THEME=blue|688dc3 -e ICM_CHANNEL=inSPIRED-inTRONICS_Business-Site -e FEATURES=quoting,recently,compare,businessCustomerRegistration,advancedVariationHandling,sentry --add-host $ICM_HOST:$ICM_IP diff --git a/angular.json b/angular.json index 27b165ffd4..35d5480c00 100644 --- a/angular.json +++ b/angular.json @@ -27,11 +27,7 @@ "tsConfig": "tsconfig.app.json", "aot": true, "extractCss": true, - "assets": [ - "src/favicon.ico", - "src/assets", - "src/manifest.webmanifest" - ], + "assets": ["src/assets"], "styles": [ { "input": "src/styles/themes/default/style.scss", diff --git a/src/app/core/utils/theme/theme.service.ts b/src/app/core/utils/theme/theme.service.ts index c863739b80..21e599cd8d 100644 --- a/src/app/core/utils/theme/theme.service.ts +++ b/src/app/core/utils/theme/theme.service.ts @@ -17,15 +17,32 @@ export class ThemeService { private head: HTMLElement; private themeLinks: HTMLElement[] = []; + private iconLink: HTMLLinkElement; + private webmanifestLink: HTMLLinkElement; + private appleTouchIconLink: HTMLLinkElement; + private appleTouchIcon152x152Link: HTMLLinkElement; + private appleTouchIcon167x167Link: HTMLLinkElement; + private appleTouchIcon180x180Link: HTMLLinkElement; + private themeColor: HTMLMetaElement; + constructor( private rendererFactory: RendererFactory2, @Inject(DOCUMENT) private document: Document, private store: Store<{}> - ) {} - - init() { + ) { this.head = this.document.head; this.renderer = this.rendererFactory.createRenderer(undefined, undefined); + + this.iconLink = this.document.querySelector('link[rel="icon"]'); + this.webmanifestLink = this.document.querySelector('link[rel="manifest"]'); + this.appleTouchIconLink = this.document.querySelector('link[rel="apple-touch-icon"]:not([sizes])'); + this.appleTouchIcon152x152Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="152x152"]'); + this.appleTouchIcon167x167Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="167x167"]'); + this.appleTouchIcon180x180Link = this.document.querySelector('link[rel="apple-touch-icon"][sizes="180x180"]'); + this.themeColor = this.document.querySelector('meta[name="theme-color"]'); + } + + init() { this.store .pipe(select(getTheme)) .pipe( @@ -33,12 +50,22 @@ export class ThemeService { filter(x => !!x) ) .subscribe(async theme => { - await this.loadCss(`${theme}.css`); + const themeData = theme.split('|'); + const themeName = themeData[0]; + const themeColor = themeData[1]; + + this.iconLink.setAttribute('href', `assets/themes/${themeName}/img/favicon.ico`); + this.webmanifestLink.setAttribute('href', `assets/themes/${themeName}/manifest.webmanifest`); + this.appleTouchIconLink.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_120x120.png`); + this.appleTouchIcon152x152Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_152x152.png`); + this.appleTouchIcon167x167Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_167x167.png`); + this.appleTouchIcon180x180Link.setAttribute('href', `assets/themes/${themeName}/img/logo_apple_180x180.png`); - // remove style of previous theme - if (this.themeLinks.length === 2) { - this.renderer.removeChild(this.head, this.themeLinks.shift()); + if (themeColor) { + this.themeColor.setAttribute('content', `#${themeColor}`); } + + await this.loadCss(`${themeName}.css`); }); } @@ -51,6 +78,11 @@ export class ThemeService { this.renderer.setProperty(linkEl, 'onload', resolve); this.renderer.appendChild(this.head, linkEl); this.themeLinks = [...this.themeLinks, linkEl]; + + // remove style of previous theme + if (this.themeLinks.length === 2) { + this.renderer.removeChild(this.head, this.themeLinks.shift()); + } }); } } diff --git a/src/assets/themes/blue/img/favicon.ico b/src/assets/themes/blue/img/favicon.ico new file mode 100644 index 0000000000..80cc6568d3 Binary files /dev/null and b/src/assets/themes/blue/img/favicon.ico differ diff --git a/src/assets/img/themes/blue/logo.png b/src/assets/themes/blue/img/logo.png similarity index 100% rename from src/assets/img/themes/blue/logo.png rename to src/assets/themes/blue/img/logo.png diff --git a/src/assets/themes/blue/img/logo_192x192.png b/src/assets/themes/blue/img/logo_192x192.png new file mode 100644 index 0000000000..77c75c2873 Binary files /dev/null and b/src/assets/themes/blue/img/logo_192x192.png differ diff --git a/src/assets/themes/blue/img/logo_256x256.png b/src/assets/themes/blue/img/logo_256x256.png new file mode 100644 index 0000000000..9ebe00f4c4 Binary files /dev/null and b/src/assets/themes/blue/img/logo_256x256.png differ diff --git a/src/assets/themes/blue/img/logo_384x384.png b/src/assets/themes/blue/img/logo_384x384.png new file mode 100644 index 0000000000..67fc0dc5fd Binary files /dev/null and b/src/assets/themes/blue/img/logo_384x384.png differ diff --git a/src/assets/themes/blue/img/logo_512x512.png b/src/assets/themes/blue/img/logo_512x512.png new file mode 100644 index 0000000000..01e0464b81 Binary files /dev/null and b/src/assets/themes/blue/img/logo_512x512.png differ diff --git a/src/assets/themes/blue/img/logo_apple_120x120.png b/src/assets/themes/blue/img/logo_apple_120x120.png new file mode 100644 index 0000000000..5c9d02f800 Binary files /dev/null and b/src/assets/themes/blue/img/logo_apple_120x120.png differ diff --git a/src/assets/themes/blue/img/logo_apple_152x152.png b/src/assets/themes/blue/img/logo_apple_152x152.png new file mode 100644 index 0000000000..88601657ba Binary files /dev/null and b/src/assets/themes/blue/img/logo_apple_152x152.png differ diff --git a/src/assets/themes/blue/img/logo_apple_167x167.png b/src/assets/themes/blue/img/logo_apple_167x167.png new file mode 100644 index 0000000000..a2320f1903 Binary files /dev/null and b/src/assets/themes/blue/img/logo_apple_167x167.png differ diff --git a/src/assets/themes/blue/img/logo_apple_180x180.png b/src/assets/themes/blue/img/logo_apple_180x180.png new file mode 100644 index 0000000000..8ec0d652b9 Binary files /dev/null and b/src/assets/themes/blue/img/logo_apple_180x180.png differ diff --git a/src/assets/img/themes/blue/logo_mobile.png b/src/assets/themes/blue/img/logo_mobile.png similarity index 100% rename from src/assets/img/themes/blue/logo_mobile.png rename to src/assets/themes/blue/img/logo_mobile.png diff --git a/src/assets/themes/blue/manifest.webmanifest b/src/assets/themes/blue/manifest.webmanifest new file mode 100644 index 0000000000..d622cd8d8a --- /dev/null +++ b/src/assets/themes/blue/manifest.webmanifest @@ -0,0 +1,31 @@ +{ + "name": "Intershop Progressive Web App", + "short_name": "Intershop PWA", + "scope": "/", + "icons": [ + { + "src": "img/logo_192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "img/logo_256x256.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "img/logo_384x384.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "img/logo_512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#688dc3", + "background_color": "#FFFFFF", + "display": "standalone", + "start_url": "/home?utm_source=homescreen" +} diff --git a/src/favicon.ico b/src/assets/themes/default/img/favicon.ico similarity index 100% rename from src/favicon.ico rename to src/assets/themes/default/img/favicon.ico diff --git a/src/assets/img/logo.png b/src/assets/themes/default/img/logo.png similarity index 100% rename from src/assets/img/logo.png rename to src/assets/themes/default/img/logo.png diff --git a/src/assets/img/logo_192x192.png b/src/assets/themes/default/img/logo_192x192.png similarity index 100% rename from src/assets/img/logo_192x192.png rename to src/assets/themes/default/img/logo_192x192.png diff --git a/src/assets/img/logo_256x256.png b/src/assets/themes/default/img/logo_256x256.png similarity index 100% rename from src/assets/img/logo_256x256.png rename to src/assets/themes/default/img/logo_256x256.png diff --git a/src/assets/img/logo_384x384.png b/src/assets/themes/default/img/logo_384x384.png similarity index 100% rename from src/assets/img/logo_384x384.png rename to src/assets/themes/default/img/logo_384x384.png diff --git a/src/assets/img/logo_512x512.png b/src/assets/themes/default/img/logo_512x512.png similarity index 100% rename from src/assets/img/logo_512x512.png rename to src/assets/themes/default/img/logo_512x512.png diff --git a/src/assets/img/logo_apple_120x120.png b/src/assets/themes/default/img/logo_apple_120x120.png similarity index 100% rename from src/assets/img/logo_apple_120x120.png rename to src/assets/themes/default/img/logo_apple_120x120.png diff --git a/src/assets/img/logo_apple_152x152.png b/src/assets/themes/default/img/logo_apple_152x152.png similarity index 100% rename from src/assets/img/logo_apple_152x152.png rename to src/assets/themes/default/img/logo_apple_152x152.png diff --git a/src/assets/img/logo_apple_167x167.png b/src/assets/themes/default/img/logo_apple_167x167.png similarity index 100% rename from src/assets/img/logo_apple_167x167.png rename to src/assets/themes/default/img/logo_apple_167x167.png diff --git a/src/assets/img/logo_apple_180x180.png b/src/assets/themes/default/img/logo_apple_180x180.png similarity index 100% rename from src/assets/img/logo_apple_180x180.png rename to src/assets/themes/default/img/logo_apple_180x180.png diff --git a/src/assets/img/logo_mobile.png b/src/assets/themes/default/img/logo_mobile.png similarity index 100% rename from src/assets/img/logo_mobile.png rename to src/assets/themes/default/img/logo_mobile.png diff --git a/src/manifest.webmanifest b/src/assets/themes/default/manifest.webmanifest similarity index 74% rename from src/manifest.webmanifest rename to src/assets/themes/default/manifest.webmanifest index 5254078ad9..408ed9e870 100644 --- a/src/manifest.webmanifest +++ b/src/assets/themes/default/manifest.webmanifest @@ -4,22 +4,22 @@ "scope": "/", "icons": [ { - "src": "assets/img/logo_192x192.png", + "src": "img/logo_192x192.png", "sizes": "192x192", "type": "image/png" }, { - "src": "assets/img/logo_256x256.png", + "src": "img/logo_256x256.png", "sizes": "256x256", "type": "image/png" }, { - "src": "assets/img/logo_384x384.png", + "src": "img/logo_384x384.png", "sizes": "384x384", "type": "image/png" }, { - "src": "assets/img/logo_512x512.png", + "src": "img/logo_512x512.png", "sizes": "512x512", "type": "image/png" } diff --git a/src/environments/environment.model.ts b/src/environments/environment.model.ts index 27939fab84..3b47d9fb9c 100644 --- a/src/environments/environment.model.ts +++ b/src/environments/environment.model.ts @@ -77,5 +77,6 @@ export interface Environment { locales: Locale[]; // configuration of the styling theme ('default' if not configured) + // format: 'themeName|themeColor' e.g. theme: 'blue|688dc3', theme?: string; } diff --git a/src/index.html b/src/index.html index 05130676e8..557b5aaa31 100644 --- a/src/index.html +++ b/src/index.html @@ -5,12 +5,12 @@ Intershop Progressive Web App - - - - - - + + + + + +