Merge pull request #294 from mobi/chore_layout_adjustments

[Chore] Layout Adjustments

projects/go-lib/src/lib/components/go-header/go-header.component.html

@@ -1,22 +1,22 @@
 <header class="go-header">
   <div class="go-header__left"
-       [ngClass]="{ 'go-header__left--collapsed': isNavCollapsed(), 'go-header__left--dark': brandColorIsDark }"
-       [ngStyle]="{'background': brandColor}">
-    <go-icon-button class="go-header__menu"
-             buttonIcon="menu"
-             buttonSize="medium"
-             buttonTitle="Menu"
-             (handleClick)="toggleSideMenu()">
-    </go-icon-button>
+       [ngClass]="{ 'go-header__left--dark': brandColorIsDark }">
+    <div class="go-header__menu-container"
+         [ngStyle]="{ 'background': brandColor }"
+         (click)="toggleSideMenu()">
+      <go-icon class="go-header__menu" icon="menu">
+      </go-icon>
+    </div>
     <div class="go-header__logo-container"
-         [ngClass]="{ 'go-header__logo-container--collapsed': isNavCollapsed() }">
+         [ngClass]="{ 'go-header__logo-container--collapsed': isNavCollapsed() }"
+         [ngStyle]="{ 'background': getLogoBackground() }">
       <img class="go-header__logo"
            alt="{{ altText }}"
            [src]="logo"/>
     </div>
   </div>
   <div class="go-header__middle"
-       [ngClass]="{ 'go-header__middle--collapsed': isNavCollapsed(), 'go-header__middle--hide': !middleContentExists() }"
+       [ngClass]="{ 'go-header__middle--hide': !middleContentExists() }"
        #middleSection>
     <ng-content select="[go-header-middle]"></ng-content>
   </div>

projects/go-lib/src/lib/components/go-header/go-header.component.scss

@@ -5,7 +5,7 @@ $breakpoint-header-mobile-small: 500px;
 
 .go-header {
   background: $theme-light-bg;
-  box-shadow: $global-box-shadow--small;
+  box-shadow: $global-box-shadow--large;
   display: flex;
   height: $header-height;
   justify-content: space-between;
@@ -18,13 +18,26 @@ $breakpoint-header-mobile-small: 500px;
   }
 }
 
+.go-header__menu-container {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  width: $side-nav-width--collapsed;
+
+  &:hover {
+    .go-header__menu {
+      opacity: .5;
+    }
+  }
+}
+
 .go-header__menu {
-  @include transition(background);
+  @include transition(all);
 
   align-items: center;
   align-self: center;
   border-radius: 50%;
-  cursor: pointer;
   display: flex;
   flex-shrink: 0;
   font-size: 1.5rem;
@@ -39,7 +52,7 @@ $breakpoint-header-mobile-small: 500px;
   display: flex;
   flex: 1;
   justify-content: flex-start;
-  padding: 0.5rem 1rem;
+  padding: 1rem;
 
   @media (max-width: $breakpoint-header-mobile-small) {
     padding: 0.5rem;
@@ -61,18 +74,13 @@ $breakpoint-header-mobile-small: 500px;
   @include transition(width);
 
   display: flex;
-  padding: 0.5rem;
   width: 15.5rem;
 
   @media (max-width: $breakpoint-mobile) {
     height: $header-height;
   }
 }
 
-.go-header__left--collapsed {
-  width: auto;
-}
-
 .go-header__left--dark {
   color: $theme-dark-color
 }
@@ -94,10 +102,6 @@ $breakpoint-header-mobile-small: 500px;
   }
 }
 
-.go-header__middle--collapsed {
-  padding: 0 1rem;
-}
-
 .go-header__middle--hide {
   display: none;
 }

projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts

@@ -1,7 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { GoHeaderComponent } from './go-header.component';
-import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module';
+import { GoIconModule } from '../go-icon/go-icon.module';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
 import { GoConfigService } from '../../go-config.service';
 
 describe('GoHeaderComponent', () => {
@@ -12,7 +15,10 @@ describe('GoHeaderComponent', () => {
     TestBed.configureTestingModule({
       declarations: [ GoHeaderComponent ],
       imports: [
-        GoIconButtonModule
+        CommonModule,
+        GoIconModule,
+        RouterModule,
+        RouterTestingModule
       ],
       providers: [
         GoConfigService

projects/go-lib/src/lib/components/go-header/go-header.component.ts

@@ -1,6 +1,6 @@
 import { Component, ElementRef, Input, OnChanges, ViewChild } from '@angular/core';
 import { fromEvent, Observable, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilKeyChanged, distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { GoConfigInterface } from '../../go-config.model';
 import { GoConfigService } from '../../go-config.service';
 import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service';
@@ -37,7 +37,12 @@ export class GoHeaderComponent implements OnChanges {
       .pipe(distinctUntilChanged())
       .subscribe((value: GoConfigInterface) => {
         if (value.headerBrandingEnabled) {
-          this.handleBrandColorChange(value);
+          if (value.brandFontColor) {
+            this.brandColor = value.brandColor;
+            this.brandColorIsDark = value.brandFontColor === 'light';
+          } else {
+            this.handleBrandColorChange(value);
+          }
         } else {
           this.brandColor = '';
           this.brandColorIsDark = false;
@@ -49,6 +54,14 @@ export class GoHeaderComponent implements OnChanges {
     return window.innerWidth <= this.minWidthBreakpoint ? true : !this.sideNavService.navOpen;
   }
 
+  getLogoBackground(): string | null {
+    if (this.brandColor && !this.isNavCollapsed()) {
+      return this.brandColor;
+    } else {
+      return null;
+    }
+  }
+
   toggleSideMenu(): void {
     this.sideNavService.toggleNav();
   }

projects/go-lib/src/lib/components/go-header/go-header.module.ts

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { GoIconButtonModule} from '../go-icon-button/go-icon-button.module';
+import { GoIconModule} from '../go-icon/go-icon.module';
 import { GoSideNavModule } from '../go-side-nav/go-side-nav.module';
 
 import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service';
@@ -14,7 +14,7 @@ import { GoHeaderComponent } from './go-header.component';
   ],
   imports: [
     CommonModule,
-    GoIconButtonModule,
+    GoIconModule,
     GoSideNavModule
   ],
   exports: [

projects/go-lib/src/lib/components/go-search/go-search.component.scss

@@ -41,11 +41,7 @@
 }
 
 .go-search__container--active {
-  border: 0;
   box-shadow: $global-box-shadow--search;
-  padding: 0.5rem;
-  top: calc(50% - (2.875rem / 2));
-  // height of input with padding, halfed
 
   &:hover {
     background: $theme-light-bg;

projects/go-lib/src/lib/components/go-side-nav/_variables.scss

@@ -1,6 +1,7 @@
 @import "../../../styles/variables";
 
-$inner-side-nav-font-size: 0.875rem;
+$inner-side-nav-font-size: .875rem;
 $inner-side-nav-padding: $column-gutter--half $column-gutter--three-quarters $column-gutter--half 3.2rem;
 $outer-side-nav-padding: 1rem 1rem 1rem 0;
-$side-nav-letter-spacing: .02rem;
+$side-nav-base-color: rgba($theme-dark-color, .7);
+$side-nav-root-item-height: 3.2rem;

projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html

@@ -3,10 +3,14 @@
      *ngIf="group.subRoutes && group.subRoutes.length > 0; else noSubRoutes">
   <div class="go-nav-group__dropdown"
        (click)="expand(group)"
-       [attr.title]="group.description">
+       [attr.title]="group.description"
+       [ngClass]="{ 'go-nav-group__dropdown--expanded': group.expanded }">
     <div class="go-nav-group__link">
+      <span class="go-nav-item--selected"
+            [ngStyle]="{ 'background': brandColor }"
+            *ngIf="level === 0 && navItem.routeActive"></span>
       <go-icon [icon]="navItem.routeIcon"
-               iconClass="go-nav-group__icon"
+               class="go-nav-group__icon"
                *ngIf="navItem.routeIcon">
       </go-icon>
       <span class="go-nav-group__title" *ngIf="navService.navOpen">
@@ -23,14 +27,15 @@
     <div *ngFor="let item of group.subRoutes">
       <go-nav-group *ngIf="item.subRoutes; else subRoutesElse"
                     class="go-nav-group__inner-group"
-                    [navItem]="item">
+                    [navItem]="item"
+                    [level]="level + 1">
       </go-nav-group>
       <ng-template #subRoutesElse>
-        <go-nav-item [navItem]="item"></go-nav-item>
+        <go-nav-item [navItem]="item" [level]="level + 1"></go-nav-item>
       </ng-template>
     </div>
   </div>
 </div>
 <ng-template #noSubRoutes>
-  <go-nav-item [navItem]="navItem"></go-nav-item>
+  <go-nav-item [navItem]="navItem" [level]="level"></go-nav-item>
 </ng-template>

projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss

@@ -2,43 +2,68 @@
 @import '../variables';
 
 .go-nav-group__dropdown {
+  @include transition(background, color);
+
   align-items: center;
+  color: $side-nav-base-color;
+  cursor: pointer;
   display: flex;
+  font-weight: $weight-light;
   padding-right: .5rem;
   user-select: none;
-  @include transition(all);
 
   &:hover {
     background: $theme-dark-bg-hover;
+    color: $theme-dark-color;
+
+    .go-nav-group__expand-icon {
+      color: $theme-dark-color;
+    }
+  }
+}
+
+.go-nav-group__dropdown--expanded {
+  background: $theme-dark-bg-active;
+  color: $theme-dark-color;
+  font-weight: $weight-regular;
+
+  .go-nav-group__expand-icon {
+    color: $theme-dark-color;
   }
 }
 
 .go-nav-group__link {
   display: flex;
   flex-grow: 1;
+  position: relative;
 }
 
 .go-nav-group__title {
   align-items: center;
   display: flex;
-  font-weight: $weight-light;
-  letter-spacing: $side-nav-letter-spacing;
   padding: $outer-side-nav-padding;
 }
 
 .go-nav-group__icon {
+  align-self: flex-start;
   font-size: 1.2rem;
+  height: $side-nav-root-item-height;
   padding: 1rem;
 }
 
+.go-nav-group__icon--external {
+  padding-left: .5rem;
+  padding-right: .75rem;
+}
+
 .go-nav-group__expand-icon {
   border-radius: 50%;
-  color: $theme-dark-color;
+  color: $side-nav-base-color;
   cursor: pointer;
   font-size: 1.5rem;
-  height: 2.5rem;
-  padding: 0.5rem;
-  width: 2.5rem;
+  height: 2rem;
+  padding: .25rem;
+  width: 2rem;
 
   &:hover {
     background: $theme-dark-bg;
@@ -58,4 +83,17 @@
 
 .go-nav-group--expanded {
   background: $theme-dark-bg-active;
+  color: $theme-dark-color;
 }
+
+.go-nav-item--selected {
+  @include transition(all);
+
+  border-radius: 0 $global-radius $global-radius 0;
+  content: ' ';
+  height: 1.5rem;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+}

projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts

@@ -1,26 +1,47 @@
-import { Component, EventEmitter, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
 import { NavGroup } from '../nav-group.model';
 import { NavItem } from '../nav-item.model';
 import { GoSideNavService } from '../go-side-nav/go-side-nav.service';
+import { GoConfigService } from '../../../go-config.service';
+import { distinctUntilKeyChanged } from 'rxjs/operators';
+import { GoConfigInterface } from '../../../go-config.model';
 
 @Component({
   selector: 'go-nav-group',
   templateUrl: './go-nav-group.component.html',
   styleUrls: ['./go-nav-group.component.scss'],
+  // tslint:disable-next-line: use-component-view-encapsulation
   encapsulation: ViewEncapsulation.None
 })
-export class GoNavGroupComponent implements OnInit  {
+export class GoNavGroupComponent implements OnInit {
   @Input() navItem: NavGroup | NavItem;
   @Input() class: string;
-  @Output() closeNavs = new EventEmitter<NavGroup>();
+  @Input() level: number;
+  @Output() closeNavs: EventEmitter<NavGroup> = new EventEmitter<NavGroup>();
 
+  brandColor: string;
   group: NavGroup;
 
-  constructor (public navService: GoSideNavService) { }
+  constructor (
+    public navService: GoSideNavService,
+    private configService: GoConfigService
+  ) { }
 
   ngOnInit(): void {
     // Using this to do type checking between NavGroup and NavItem in the html
     this.group = this.navItem as NavGroup;
+    this.configService.config
+      .pipe(distinctUntilKeyChanged('brandColor'))
+      .subscribe((value: GoConfigInterface) => {
+        this.brandColor = value.brandColor;
+      });
   }
 
   expand(navGroup: NavGroup): void {