refactor(config): remove styling information from config file
This moves all styling information from the config file into the custom css style. That makes configuration easy, and we have to maintain less code to apply styling at runtime
MODIFY
src/app/components/header/header.component.html
src/app/components/header/header.component.html
<!--
- ~ Copyright 2021 Scheer PAS Schweiz AG
+ ~ Copyright 2022 Scheer PAS Schweiz AG
~
~ Licensed under the Apache License, Version 2.0 (the "License");
~ you may not use this file except in compliance with the License.
~ imitations under the License.
-->
-<div
- #heroImage
- id="hero-image"
- [ngClass]="{ 'hero-large': heroService.hero.large }">
+<div id="hero-image" [ngClass]="{ 'hero-large': heroService.hero.large }">
<div id="hero-overlay">
- <div #heroOverlay id="hero-text">
- <h1 class="mt-40" #heroTitle>{{ heroService.hero.title }}</h1>
- <p #heroSubtitle>{{ heroService.hero.subtitle }}</p>
+ <div id="hero-overlay-box">
+ <h1 class="mt-40" id="hero-title">{{ heroService.hero.title }}</h1>
+ <p id="hero-subtitle">{{ heroService.hero.subtitle }}</p>
</div>
<div id="hero-btn">
- <button #loginBtn (click)="login()" [hidden]="loggedIn" id="login-btn">
+ <button
+ mat-raised-button
+ (click)="login()"
+ *ngIf="!loggedIn"
+ id="login-btn">
{{ 'COMMON.LOGIN' | translate }}
</button>
<button
- #logoutBtn
+ mat-raised-button
(click)="logout()"
- [hidden]="!loggedIn"
+ *ngIf="loggedIn"
id="logout-btn">
{{ 'COMMON.LOGOUT' | translate }}
</button>

MODIFY
src/app/components/header/header.component.scss
src/app/components/header/header.component.scss
/*!
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
position: relative;
}
-#hero-text {
+#hero-overlay-box {
position: absolute;
top: 22px;
left: 3%;
right: 3%;
}
-#login-btn,#logout-btn{
- font-family: Roboto, "Helvetica Neue", sans-serif;
- font-size: 14px;
- font-weight: 500;
- cursor: pointer;
- color: white;
- border: 1px solid white;
- padding: 0px 15px;
- background-color: rgba(0, 0, 0, 0);
- border-radius: 4px;
- line-height: 34px;
-}
-
.hero-large {
min-height: 32vh;
}

MODIFY
src/app/components/header/header.component.ts
src/app/components/header/header.component.ts
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* imitations under the License.
*/
-import {
- AfterViewInit,
- Component,
- ElementRef,
- OnInit,
- Renderer2,
- ViewChild
-} from '@angular/core';
+import { AfterViewInit, Component, OnInit } from '@angular/core';
import { HeroService } from '../../services/hero/hero.service';
import { KeycloakService } from 'keycloak-angular';
import { KeycloakHelperService } from '../../services/keycloak-helper/keycloak-helper.service';
@@ -32,17 +25,9 @@ import { KeycloakHelperService } from '../../services/keycloak-helper/keycloak-h
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit, AfterViewInit {
- @ViewChild('heroImage') heroImageDiv!: ElementRef;
- @ViewChild('heroTitle') heroTitle!: ElementRef;
- @ViewChild('heroSubtitle') heroSubtitle!: ElementRef;
- @ViewChild('heroOverlay') heroOverlay!: ElementRef;
- @ViewChild('loginBtn') heroLoginBtn!: ElementRef;
- @ViewChild('logoutBtn') heroLogoutBtn!: ElementRef;
-
loggedIn = false;
constructor(
- private renderer: Renderer2,
public heroService: HeroService,
private keycloak: KeycloakService,
private keycloakHelper: KeycloakHelperService
@@ -53,37 +38,7 @@ export class HeaderComponent implements OnInit, AfterViewInit {
}
async ngAfterViewInit(): Promise<void> {
- this.setStyle(
- this.heroImageDiv.nativeElement,
- 'background-image',
- 'url("' + (this.heroService.hero.heroImgUrl ?? '') + '")'
- );
- if (this.heroService.hero.fontColor) {
- this.setStyle(
- this.heroTitle.nativeElement,
- 'color',
- this.heroService.hero.fontColor.title
- );
- this.setStyle(
- this.heroSubtitle.nativeElement,
- 'color',
- this.heroService.hero.fontColor.subtitle
- );
- }
-
- this.setStyle(
- this.heroOverlay.nativeElement,
- 'background-color',
- this.heroService.hero.overlayColor ?? ''
- );
-
this.loggedIn = await this.keycloak.isLoggedIn();
- this.setStyleForLoginBtn();
- }
-
- // eslint-disable-next-line
- setStyle(element: any, style: string, value: string): void {
- this.renderer.setStyle(element, style, value);
}
public login(): void {
@@ -93,32 +48,4 @@ export class HeaderComponent implements OnInit, AfterViewInit {
public logout(): void {
this.keycloakHelper.logout();
}
-
- private setStyleForLoginBtn(): void {
- if (this.heroService.hero.buttonColor) {
- if (this.heroService.hero.buttonColor.login && !this.loggedIn) {
- this.setStyle(
- this.heroLoginBtn.nativeElement,
- 'color',
- this.heroService.hero.buttonColor.login
- );
- this.setStyle(
- this.heroLoginBtn.nativeElement,
- 'border-color',
- this.heroService.hero.buttonColor.login
- );
- } else {
- this.setStyle(
- this.heroLogoutBtn.nativeElement,
- 'color',
- this.heroService.hero.buttonColor.logout
- );
- this.setStyle(
- this.heroLogoutBtn.nativeElement,
- 'border-color',
- this.heroService.hero.buttonColor.logout
- );
- }
- }
- }
}

MODIFY
src/assets/config.json5
src/assets/config.json5
"hero": {
"title": "HOME.TITLE",
"subtitle": "HOME.SUBTITLE",
- // header image to use, must exist in respective assets folder (see chapter "Images")
- "heroImgUrl": "assets/img/header.jpeg",
// enforces a min height visible header image
- "large": true,
- "fontColor": {
- // your api developers portal name and rendered color
- "title": "white",
- // based on navigation (e.g. Marketplace) the color to be used, displayed below the title of your developer portal
- "subtitle": "white"
- },
- // set background color with transparency for your header title/subtitle
- "overlayColor": "rgba(0, 0, 0, 0)",
- // overrides default color for login/logout button
- "buttonColor": {
- "login": "rgba(41, 150, 204, 1)",
- "logout": "rgba(41, 150, 204, 1)"
- }
+ "large": false,
},
// config options for navigation below header
"navigation": {

MODIFY
src/assets/custom-style.css
src/assets/custom-style.css
/*
- * Copyright 2021 Scheer PAS Schweiz AG
+ * Copyright 2022 Scheer PAS Schweiz AG
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
--dark-warn-20: rgba(172, 30, 28, .2);
}
+/* set color for login/logout button */
+#login-btn, #logout-btn {
+ color: var(--primary);
+ background-color: var(--acccent-contrast);
+ /* optional if a button border is needed */
+ border: 1px solid var(--primary);
+}
+
+/* set hero image, must exist in respective assets folder */
+#hero-image {
+ background-image: url("img/header.jpeg");
+}
+/* set background color with transparency for your header title/subtitle */
+#hero-overlay-box {
+ background-color: rgba(0, 0, 0, 0);
+}
+/* set the color for you header/subtitle */
+#hero-title, #hero-subtitle {
+ color: var(--primary-warn-contrast);
+}
+
/* Place your custom styles below this comment */

refactor(config): remove styling information from config file

This moves all styling information from the config file into the custom css style. That makes configuration easy, and we have to maintain less code to apply styling at runtime