(feat) help message footer with configurable contactEmail (#396)

* remove bannerColor getter as it's not used (banner color set by css)

* Add a help message footer with configurable contactEmail

Author: omkar-ethz

src/app/app-config.module.ts

@@ -7,6 +7,7 @@ export class AppConfig {
   production = true;
   statusMessage = "";
   statusCode: "INFO" | "WARN" | "NONE" = "NONE";
+  contactEmail = "";
 }
 
 export const APP_DI_CONFIG: AppConfig = {
@@ -15,6 +16,7 @@ export const APP_DI_CONFIG: AppConfig = {
   statusCode: (["INFO", "WARN", "NONE"].includes(environment["statusCode"])
     ? environment["statusCode"]
     : "NONE") as "INFO" | "WARN" | "NONE",
+  contactEmail: environment["contactEmail"] || "",
 };
 
 @NgModule({

src/app/app.component.html

@@ -12,6 +12,13 @@
 
 <router-outlet></router-outlet>
 
-<mat-toolbar class="footer" *ngIf="config.showLogoBanner">
-  <img src="../assets/{{ config.logoBanner }}" width="{{ config.logoWidth }}" alt="logo_banner" />
-</mat-toolbar>
+<footer class="footer">
+  <mat-toolbar class="logo-banner" *ngIf="config.showLogoBanner">
+    <img src="../assets/{{ config.logoBanner }}" width="{{ config.logoWidth }}" alt="logo_banner" />
+  </mat-toolbar>
+
+  <address *ngIf="appConfig.contactEmail">
+    If you have any questions or need help, please contact <a href="mailto:{{ appConfig.contactEmail }}">{{
+      appConfig.contactEmail }}</a>.
+  </address>
+</footer>

src/app/app.component.scss

@@ -1,4 +1,9 @@
 /* AppComponent's private CSS styles */
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
 
 .header {
   position: sticky;
@@ -7,11 +12,21 @@
 }
 
 .footer {
+  margin-top: auto;
+}
+
+.logo-banner {
   height: 77px;
   justify-content: center;
   background-color: var(--theme-primary-default-contrast);
 }
 
+address {
+  font-size: 16px;
+  padding: 0.5em;
+  background-color: whitesmoke;
+}
+
 .spacer {
   flex: 1 1 auto;
   text-align: left;

src/app/shared/modules/status-message/status-banner/status-banner.component.html

@@ -1,4 +1,4 @@
-<mat-toolbar [color]="bannerColor" [class]='["toolbar", "toolbar-" + appConfig.statusCode]'>
+<mat-toolbar [class]='["toolbar", "toolbar-" + appConfig.statusCode]'>
   <span [innerHTML]="appConfig.statusMessage" class="status-message"></span>
   <span class="spacer"></span>
   <button mat-icon-button aria-label="Dismiss" (click)="onDismiss()">

src/app/shared/modules/status-message/status-banner/status-banner.component.ts

@@ -14,15 +14,4 @@ export class StatusBannerComponent {
   onDismiss() {
     this.dismiss.emit();
   }
-
-  get bannerColor() {
-    switch (this.appConfig.statusCode) {
-      case "INFO":
-        return "accent";
-      case "WARN":
-        return "warn";
-      default:
-        return "";
-    }
-  }
 }