Merge pull request #4395 from cloudfoundry/theming-improvements

Theming improvements for page header
cloudfoundry · Jun 25, 2020 · 190ac56 · 190ac56
2 parents 836c841 + 1569c4e
commit 190ac56
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 6 deletions.
diff --git a/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss b/src/frontend/packages/core/src/features/dashboard/side-nav/side-nav.component.theme.scss
@@ -4,6 +4,17 @@
   $side-nav-colors: map-get($app-theme, side-nav);
   $side-nav-bottom-color: map-get($app-theme, subdued-color);
   $side-nav-hover-color: mat-color($side-nav-colors, hover);
+  $header-span: map-get($app-theme, header-background-span);
+
+  $side-nav-top-background: map-get($side-nav-colors, background);
+  $side-nav-top-foreground: map-get($side-nav-colors, text);
+
+  // Does the header background color span across the top, or is the sidenav background color used for the top-left portion
+  @if $header-span == true {
+    $side-nav-top-background: map-get($app-theme, header-background-color);
+    $side-nav-top-foreground: map-get($app-theme, header-foreground-color);
+  }
+
   .side-nav {
     &__nav-toggle {
       color: mat-color($side-nav-colors, text);
@@ -12,7 +23,8 @@
       background-color: mat-color($side-nav-colors, background);
     }
     &__top {
-      background-color: mat-color($side-nav-colors, background-top);
+      background-color: $side-nav-top-background;
+      color: $side-nav-top-foreground;
     }
     &__item {
       color: mat-color($side-nav-colors, text);

diff --git a/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html b/src/frontend/packages/core/src/shared/components/page-header/page-header.component.html
@@ -3,7 +3,7 @@
     <div class="page-header__inner">
       <div class="page-header">
         <div>
-          <mat-toolbar class="page-header__toolbar" color="primary">
+          <mat-toolbar class="page-header__toolbar">
             <div *ngIf="isMobile$ | async" class="page-header__nav-toggle-wrapper">
               <button mat-icon-button *ngIf="!hideSideNavButton" (click)="toggleSidenav()">
                 <mat-icon class="page-header__nav-toggle">menu</mat-icon>

diff --git a/...frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss b/...frontend/packages/core/src/shared/components/page-header/page-header.component.theme.scss
@@ -12,6 +12,11 @@
   $menu-background-color: mat-color($background, card);
   $is-dark: map-get($theme, is-dark);
   $username-background: $menu-background-color;
+  $header-background: map-get($app-theme, header-background-color);
+  $header-foreground: map-get($app-theme, header-foreground-color);
+  $underflow-background: map-get($app-theme, underflow-background-color);
+  $underflow-foreground: map-get($app-theme, underflow-foreground-color);
+
   @if $is-dark == true {
     $username-background: lighten($menu-background-color, 5%);
   } @else {
@@ -20,6 +25,10 @@
   $username-color: mat-color($foreground, text);
 
   .page-header {
+    &__toolbar {
+      background-color: $header-background;
+      color: $header-foreground;
+    }
     &__warning-count {
       background-color: mat-color($primary);
       color: mat-contrast($primary, 500);
@@ -34,7 +43,8 @@
       color: $subdued;
     }
     &__underflow {
-      background-color: mat-color($primary);
+      background-color: $underflow-background;
+      color: $underflow-foreground;
     }
     &__divider {
       color: mat-contrast($primary, 500);

diff --git a/src/frontend/packages/theme/_helper.scss b/src/frontend/packages/theme/_helper.scss
@@ -1,5 +1,6 @@
 // Stratos Theme Helper
 
+@use "sass:color";
 @import '~@angular/material/theming';
 @import './mat-themes';
 @import './mat-colors';
@@ -71,17 +72,31 @@ $oss-dark-theme: mat-dark-theme($oss-dark-primary, $oss-dark-accent, $oss-dark-w
       side-nav: app-generate-nav-theme($theme, $nav-theme),
       status: app-generate-status-theme($theme, $status-theme),
       subdued-color: $subdued,
-      ansi-colors: $ansi-color-palette
+      ansi-colors: $ansi-color-palette,
+      header-background-color: mat-color($primary),
+      header-foreground-color: mat-contrast($primary, 500),
+      // Does the header background color span across the top, or is the sidenav background color used for the top-left portion
+      header-background-span: false,
+      // Background colors to use for things like the about page header (underflow)
+      underflow-background-color: mat-color($primary),
+      underflow-foreground-color: mat-contrast($primary, 500)
     )
-  );  
+  );
 }
 
 @function app-generate-nav-theme($theme, $nav-theme: null) {
   @if ($nav-theme) {
     @return $nav-theme;
   } @else {
     // Use default palette for side navigation
-    @return (background: $side-nav-light-bg, background-top: $side-nav-light-bg, text: darken($side-nav-light-text, 10%), active: $side-nav-light-active, active-text: $side-nav-light-text, hover: $side-nav-light-hover, hover-text: $side-nav-light-text);
+    @return (
+      background: $side-nav-light-bg,
+      text: darken($side-nav-light-text, 10%),
+      active: $side-nav-light-active,
+      active-text: $side-nav-light-text,
+      hover: $side-nav-light-hover, 
+      hover-text: $side-nav-light-text
+    );
   }
 }