Planqk colors (#137)

Author: mhinkie

src/app/app.component.html

@@ -15,11 +15,16 @@
 
 <mat-spinner *ngIf="loading; else loadedConfig"></mat-spinner>
 <ng-template #loadedConfig>
-  <mat-toolbar color="primary">
-    <mat-icon>library_books</mat-icon>
+  <mat-toolbar color="primary" id="pa_header">
+    <a *ngIf="planqkUi" href="https://platform.planqk.de/my-content">
+      <img src="https://platform.planqk.de/img/PlanQK_Logo_Weiss_Beta_Version.5b689144.svg" alt="PlanQK Logo" width="250"
+         style="max-width: 7rem; margin-top: 1rem" />
+    </a>
+    <mat-icon *ngIf="planqkUi === false">library_books</mat-icon>
     <span style="margin-left: 1rem">Pattern Atlas</span>
     <span class="spacer"></span>
     {{welcomeText}}
+    <a *ngIf="planqkUi" mat-stroked-button href="https://platform.planqk.de/my-content">Back to the PlanQK platform</a>
     <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Button with a menu">
       <mat-icon>more_vert</mat-icon>
     </button>
@@ -35,6 +40,7 @@
 
     </div>
   </mat-toolbar>
+
   <nav mat-tab-nav-bar>
     <a mat-tab-link [routerLink]="'/' + pathConstants.patternLanguages"
        routerLinkActive #rla1="routerLinkActive" [active]="rla1.isActive">

src/app/app.component.scss

@@ -37,3 +37,7 @@
   width: 100%;
   height: 100%;
 }
+
+#pa_header {
+  background: linear-gradient(45deg, #3d78b5, #e12d32);
+}

src/app/app.component.ts

@@ -38,6 +38,7 @@ export class AppComponent implements OnInit {
   user: PAUser;
   readonly pathConstants = globals.pathConstants;
   loading = true;
+  planqkUi = false;
 
   constructor(public auth: AuthenticationService,
               private toasterService: ToasterService,
@@ -57,6 +58,8 @@ export class AppComponent implements OnInit {
         this.welcomeText = '';
       }
     });
+
+
   }
 
   loginOAuth() {
@@ -65,9 +68,13 @@ export class AppComponent implements OnInit {
 
   ngOnInit(): void {
     this.configService.getConfigurationFromBackend().subscribe(
-      () => (this.loading = false),
+      () => {
+        this.loading = false;
+        this.planqkUi = this.configService.configuration.features[UiFeatures.PLANQK_UI];
+      },
       (error: HttpErrorResponse) => {
         this.loading = false;
+        this.planqkUi = true;
         if(error.status === globals.statusCodeNotFound){
           this.configService.getDefaultConfiguration();
           console.log('default values applied')

src/app/core/directives/pattern-atlas-ui-repository-configuration.service.ts

@@ -10,7 +10,8 @@ export enum UiFeatures {
   PATTERNVIEWS = 'patternViews',
   ISSUE = 'issue',
   SHOW_SETTINGS = 'showSettings',
-  EDITING = 'editing'
+  EDITING = 'editing',
+  PLANQK_UI = 'planqkUi'
 }
 
 export interface PatternAtlasUiConfiguration {
@@ -20,7 +21,8 @@ export interface PatternAtlasUiConfiguration {
     patternViews: boolean,
     issue: boolean,
     showSettings: boolean,
-    editing: boolean
+    editing: boolean,
+    planqkUi: boolean
   };
 }
 
@@ -45,7 +47,8 @@ const initialValues: PatternAtlasUiConfiguration = {
     patternViews: false,
     issue: false,
     showSettings: false,
-    editing: false
+    editing: false,
+    planqkUi: false
   },
 };
 

src/assets/settings_features/default_features.json

@@ -5,6 +5,7 @@
     "patternViews": true,
     "issue": false,
     "editing": true,
-    "showSettings": false
+    "showSettings": false,
+    "planqkUi": true
   }
-}
+}

src/styles.scss

@@ -14,6 +14,87 @@
 /* You can add global styles to this file, and also import other style files */
 @import '~@angular/material/prebuilt-themes/indigo-pink.css';
 @import '~angular2-toaster/toaster';
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+/* PlanQK Red based on #E12D32 */
+
+$planqkred: (
+  50 : #fbe6e6,
+  100 : #f6c0c2,
+  200 : #f09699,
+  300 : #ea6c70,
+  400 : #e64d51,
+  500 : #e12d32,
+  600 : #dd282d,
+  700 : #d92226,
+  800 : #d51c1f,
+  900 : #cd1113,
+  A100 : #fffbfb,
+  A200 : #ffc8c8,
+  A400 : #ff9596,
+  A700 : #ff7b7d,
+  contrast: (
+    50 : #000,
+    100 : #000,
+    200 : #000,
+    300 : #000,
+    400 : #fff,
+    500 : #fff,
+    600 : #fff,
+    700 : #fff,
+    800 : #fff,
+    900 : #fff,
+    A100 : #000,
+    A200 : #000,
+    A400 : #000,
+    A700 : #000,
+  )
+);
+
+/* PlanQK blue based on #3D78B5 */
+
+$planqkblue: (
+  50 : #e8eff6,
+  100 : #c5d7e9,
+  200 : #9ebcda,
+  300 : #77a1cb,
+  400 : #5a8cc0,
+  500 : #3d78b5,
+  600 : #3770ae,
+  700 : #2f65a5,
+  800 : #275b9d,
+  900 : #1a488d,
+  A100 : #c5daff,
+  A200 : #92baff,
+  A400 : #5f9aff,
+  A700 : #468aff,
+  contrast: (
+    50 : #000,
+    100 : #000,
+    200 : #000,
+    300 : #000,
+    400 : #000,
+    500 : #fff,
+    600 : #fff,
+    700 : #fff,
+    800 : #fff,
+    900 : #fff,
+    A100 : #000,
+    A200 : #000,
+    A400 : #000,
+    A700 : #000,
+  )
+);
+
+$planqk-palette-primary: mat-palette($planqkblue);
+$planqk-palette-accent: mat-palette($planqkred);
+
+$planqk-theme: mat-light-theme($planqk-palette-primary, $planqk-palette-accent);
+
+@include angular-material-theme($planqk-theme);
+
 
 body {
   font-family: sans-serif;