Skip to content

Commit

Permalink
feat: extended multiple theme support to control system icons (e.g. f…
Browse files Browse the repository at this point in the history
…avicon), manifest.webmanifest and theme-color as well (#88, #100)

closes: #88
  • Loading branch information
Sebastian-Haehnlein authored and Carola Bratsch committed Mar 9, 2020
1 parent fe6b486 commit 878c054
Show file tree
Hide file tree
Showing 31 changed files with 90 additions and 30 deletions.
8 changes: 4 additions & 4 deletions .gitlab-ci.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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
Expand All @@ -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"
Expand Down Expand Up @@ -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
Expand Down
6 changes: 1 addition & 5 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
46 changes: 39 additions & 7 deletions src/app/core/utils/theme/theme.service.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,28 +17,55 @@ 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(
distinctUntilChanged(),
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`);
});
}

Expand All @@ -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());
}
});
}
}
Binary file added src/assets/themes/blue/img/favicon.ico
Binary file not shown.
File renamed without changes
Binary file added src/assets/themes/blue/img/logo_192x192.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_256x256.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_384x384.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_512x512.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_apple_120x120.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_apple_152x152.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/themes/blue/img/logo_apple_167x167.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
31 changes: 31 additions & 0 deletions src/assets/themes/blue/manifest.webmanifest
Original file line number Diff line number Diff line change
@@ -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"
}
File renamed without changes.
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand Down
1 change: 1 addition & 0 deletions src/environments/environment.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
12 changes: 6 additions & 6 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@
<title>Intershop Progressive Web App</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="apple-touch-icon" href="assets/img/logo_apple_120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/logo_apple_152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/logo_apple_180x180.png" />
<link rel="apple-touch-icon" sizes="167x167" href="assets/img/logo_apple_167x167.png" />
<link rel="manifest" href="manifest.webmanifest" />
<link rel="icon" type="image/x-icon" href="assets/themes/default/img/favicon.ico" />
<link rel="apple-touch-icon" href="assets/themes/default/img/logo_apple_120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="assets/themes/default/img/logo_apple_152x152.png" />
<link rel="apple-touch-icon" sizes="180x180" href="assets/themes/default/img/logo_apple_180x180.png" />
<link rel="apple-touch-icon" sizes="167x167" href="assets/themes/default/img/logo_apple_167x167.png" />
<link rel="manifest" href="assets/themes/default/manifest.webmanifest" />
<meta name="theme-color" content="#ff6d00" />
<style>
.svg-inline--fa {
Expand Down
4 changes: 2 additions & 2 deletions src/styles/themes/blue/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
//
// LOGOS

$logo: url('/assets/img/themes/blue/logo.png');
$logo: url('/assets/themes/blue/img/logo.png');
$logo-width: 114px;
$logo-height: 40px;
$logo-mobile: url('/assets/img/themes/blue/logo_mobile.png');
$logo-mobile: url('/assets/themes/blue/img/logo_mobile.png');
$logo-mobile-width: 41px;
$logo-mobile-height: 41px;

Expand Down
4 changes: 2 additions & 2 deletions src/styles/themes/default/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@
//
// LOGOS

$logo: url('/assets/img/logo.png');
$logo: url('/assets/themes/default/img/logo.png');
$logo-width: 114px;
$logo-height: 40px;
$logo-mobile: url('/assets/img/logo_mobile.png');
$logo-mobile: url('/assets/themes/default/img/logo_mobile.png');
$logo-mobile-width: 41px;
$logo-mobile-height: 41px;

Expand Down

0 comments on commit 878c054

Please sign in to comment.