From 31f2f63ac45bb5bc10d0244ede2f4748dab6fb3a Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 24 Oct 2019 11:24:15 -0400 Subject: [PATCH 01/11] Changed header shadow to large --- .../src/lib/components/go-header/go-header.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index 1962eb7c0..9e329ebd0 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/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; From c35edcc138ce1d501fbc5b2ddb71442e0ff9adfd Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 24 Oct 2019 11:27:18 -0400 Subject: [PATCH 02/11] Stop search from shifting left --- .../src/lib/components/go-header/go-header.component.html | 4 ++-- .../src/lib/components/go-header/go-header.component.scss | 8 -------- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index 2226f1cb7..04057ad66 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,6 +1,6 @@
diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index 9e329ebd0..c7485b889 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -69,10 +69,6 @@ $breakpoint-header-mobile-small: 500px; } } -.go-header__left--collapsed { - width: auto; -} - .go-header__left--dark { color: $theme-dark-color } @@ -94,10 +90,6 @@ $breakpoint-header-mobile-small: 500px; } } -.go-header__middle--collapsed { - padding: 0 1rem; -} - .go-header__middle--hide { display: none; } From 50e270dd425709552dc5ad97c12f44de261ea375 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 24 Oct 2019 11:33:19 -0400 Subject: [PATCH 03/11] Fixed styling of menu icon --- .../components/go-header/go-header.component.html | 12 +++++------- .../components/go-header/go-header.component.scss | 4 ++++ .../src/lib/components/go-header/go-header.module.ts | 4 ++-- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index 04057ad66..0023c29df 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,13 +1,11 @@
- - + [ngStyle]="{ 'background': brandColor }"> + +
Date: Thu, 24 Oct 2019 15:55:03 -0400 Subject: [PATCH 04/11] Removed branding from background of logo on collapse --- .../go-header/go-header.component.html | 16 +++++++------ .../go-header/go-header.component.scss | 24 ++++++++++++------- .../go-header/go-header.component.ts | 8 +++++++ 3 files changed, 33 insertions(+), 15 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.html b/projects/go-lib/src/lib/components/go-header/go-header.component.html index 0023c29df..0e6a681a1 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.html +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -1,13 +1,15 @@
- - + [ngClass]="{ 'go-header__left--dark': brandColorIsDark }"> +
+ + +
+ [ngClass]="{ 'go-header__logo-container--collapsed': isNavCollapsed() }" + [ngStyle]="{ 'background': getLogoBackground() }"> diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.scss b/projects/go-lib/src/lib/components/go-header/go-header.component.scss index 229aa44f8..4c5e95263 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.scss +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -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; @@ -32,10 +45,6 @@ $breakpoint-header-mobile-small: 500px; justify-content: center; user-select: none; width: calc(#{$side-nav-width--collapsed} - 1rem); - - &:hover { - opacity: .5; - } } .go-header__logo-container { @@ -43,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; @@ -65,7 +74,6 @@ $breakpoint-header-mobile-small: 500px; @include transition(width); display: flex; - padding: 0.5rem; width: 15.5rem; @media (max-width: $breakpoint-mobile) { diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 7413257cb..d4affea43 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -49,6 +49,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(); } From 9c842905daba036869b9e47373b1aae7088436eb Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Fri, 25 Oct 2019 15:04:17 -0400 Subject: [PATCH 05/11] Added the ability to specify the color of the menu icon in the header --- .../go-header/go-header.component.ts | 7 +++++- projects/go-lib/src/lib/go-config.model.ts | 1 + projects/go-lib/src/lib/go-config.service.ts | 22 +++++++++++++++++++ projects/go-tester/src/app/app.component.ts | 1 + 4 files changed, 30 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index d4affea43..66b3c0103 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -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; diff --git a/projects/go-lib/src/lib/go-config.model.ts b/projects/go-lib/src/lib/go-config.model.ts index 863e08fa5..345be4265 100644 --- a/projects/go-lib/src/lib/go-config.model.ts +++ b/projects/go-lib/src/lib/go-config.model.ts @@ -1,4 +1,5 @@ export interface GoConfigInterface { brandColor: string; + brandFontColor?: undefined | 'light' | 'dark'; headerBrandingEnabled: boolean; } diff --git a/projects/go-lib/src/lib/go-config.service.ts b/projects/go-lib/src/lib/go-config.service.ts index c2ff6182f..6b7af66dc 100644 --- a/projects/go-lib/src/lib/go-config.service.ts +++ b/projects/go-lib/src/lib/go-config.service.ts @@ -15,6 +15,10 @@ export class GoConfigService { headerBrandingEnabled: false }); + /** + * Use this method to specific a brand color to be used in all places where branding is applied + * @param color The color for the brand + */ public setBrandColor(color: string): void { // we have to copy the config here or it won't regester a change in components const config: GoConfigInterface = Object.assign({}, this.config.getValue()); @@ -22,6 +26,9 @@ export class GoConfigService { this.config.next(config); } + /** + * Use this method to turn the branding in the header on/off + */ public toggleHeaderBrandingEnabled(): void { // we have to copy the config here or it won't regester a change in components const config: GoConfigInterface = Object.assign({}, this.config.getValue()); @@ -29,6 +36,21 @@ export class GoConfigService { this.config.next(config); } + /** + * Use this method to override the accessibility check and set a consistent background + * @param useColor specifies the font color to use, regardless of accessibilty + */ + public overrideMenuColor(useColor: 'light'| 'dark'): void { + const config: GoConfigInterface = Object.assign({}, this.config.getValue()); + config.brandFontColor = useColor; + this.config.next(config); + } + + /** + * Use this method to check the contrast ratio between a foreground and background color combination + * @param backgroundHex the hexidecimal code for the background color + * @param foregroundHex the hexidecimal code for the foreground color + */ public contrastIsAccessible(backgroundHex: string, foregroundHex: string): boolean { const backgroundRgb: RGB = this.hexToRgb(backgroundHex); const foregroundRgb: RGB = this.hexToRgb(foregroundHex); diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 0106e741d..ea1b5eecf 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -71,6 +71,7 @@ export class AppComponent implements OnInit { ngOnInit(): void { this.goConfigService.setBrandColor('#8A4EDE'); + this.goConfigService.overrideMenuColor('light'); this.toggleControl.valueChanges.subscribe(() => { this.goConfigService.toggleHeaderBrandingEnabled(); From 880d77c6172edbcacb93a962553a015aa3336908 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Wed, 30 Oct 2019 13:31:16 -0400 Subject: [PATCH 06/11] Changed behavior of active indicator on side nav --- .../components/go-side-nav/_variables.scss | 5 +- .../go-nav-group/go-nav-group.component.html | 15 +++-- .../go-nav-group/go-nav-group.component.scss | 52 ++++++++++++++--- .../go-nav-group/go-nav-group.component.ts | 29 ++++++++-- .../go-nav-item/go-nav-item.component.html | 18 +++--- .../go-nav-item/go-nav-item.component.scss | 43 +++++++++++--- .../go-nav-item/go-nav-item.component.ts | 1 + .../go-side-nav/go-side-nav.component.html | 3 +- .../go-side-nav/go-side-nav.component.ts | 23 ++++---- .../go-side-nav/go-side-nav.service.ts | 58 +++++++++++++++++-- .../components/go-side-nav/nav-group.model.ts | 1 + .../components/go-side-nav/nav-item.model.ts | 1 + projects/go-lib/src/styles/_variables.scss | 2 +- projects/go-tester/src/app/app.component.ts | 6 +- 14 files changed, 203 insertions(+), 54 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-side-nav/_variables.scss b/projects/go-lib/src/lib/components/go-side-nav/_variables.scss index 68df03c55..1cc332dfd 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/_variables.scss +++ b/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; diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html index dd24126c7..2d40f81fc 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html +++ b/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">
+ [attr.title]="group.description" + [ngClass]="{ 'go-nav-group__dropdown--expanded': group.expanded }">
+ @@ -23,14 +27,15 @@
+ [navItem]="item" + [level]="level + 2"> - +
- + diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss index e2076c564..cbe509d19 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss +++ b/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; +} \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts index 4ff759941..222e2b608 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts +++ b/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(); + @Input() level: number; + @Output() closeNavs: EventEmitter = new EventEmitter(); + 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 { diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html index c630f75d0..db3f6fe51 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html @@ -1,9 +1,13 @@
+ [attr.title]="navItem.description" + [ngClass]="{ 'go-nav-item--collapsed': !navService.navOpen }"> + @@ -13,23 +17,19 @@ [target]="navItem.externalLinkTarget ? navItem.externalLinkTarget : '_blank'" rel="noreferrer"> - + class="go-nav-group__icon go-nav-group__icon--external">
- - {{navItem.routeTitle}} diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss index fb05f64ab..f1daefdb9 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss @@ -3,30 +3,45 @@ @import '../variables'; .go-nav-item { + @include transition(all); + align-items: center; display: flex; - @include transition(all); + min-height: 2rem; position: relative; &:hover { - background: $theme-dark-bg-hover; + .go-nav-item__link { + background: $theme-dark-bg-hover; + color: $theme-dark-color; + } } } +.go-nav-item--collapsed { + min-height: 0; +} + .go-nav-item__link--active { .go-nav-item__title { font-weight: $weight-regular; + color: $theme-dark-color; + } + + .go-nav-group__icon { + color: $theme-dark-color; } .go-nav-item--selected { + @include transition(all); + border-radius: 0 $global-radius $global-radius 0; - content: " "; + content: ' '; height: 1.5rem; position: absolute; top: 50%; transform: translateY(-50%); width: 4px; - @include transition(all); } } @@ -34,27 +49,37 @@ .go-nav-item__link:visited, .go-nav-item__link:focus, .go-nav-item__link:active { - color: $theme-dark-color; + color: $side-nav-base-color; } .go-nav-item__link { + @include transition(all); + align-items: center; - border: none; + border: 0; display: flex; flex-grow: 1; + max-width: 100%; position: relative; text-decoration: none; } .go-nav-item__title { + flex-grow: 1; font-size: $inner-side-nav-font-size; font-weight: $weight-light; - letter-spacing: $side-nav-letter-spacing; + max-height: $side-nav-root-item-height; padding: $inner-side-nav-padding; - flex-grow: 1; +} + +.go-nav-item__title--level-2 { + padding-left: calc(#{$side-nav-root-item-height} + .5rem); } .go-nav-item__title--with-icon { + align-items: center; + display: inline-flex; font-size: 1rem; - padding: $outer-side-nav-padding; + height: $side-nav-root-item-height; + padding: 0 1rem 0 0; } diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts index 4d4cbe13a..d5bcc7d56 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -14,6 +14,7 @@ export class GoNavItemComponent implements OnInit { brandColor: string; @Input() navItem: NavItem; + @Input() level: number; constructor ( public navService: GoSideNavService, diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html index 3ab0ca377..39248234f 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html @@ -2,6 +2,7 @@ [ngClass]="{ 'go-side-nav--show-mobile' : navService.navOpen, 'go-side-nav--collapsed' : !navService.navOpen }"> + (closeNavs)="closeNavs($event)" + [level]="0">
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts index 856909e68..0c7af7da5 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts @@ -1,5 +1,5 @@ -import { Component, OnInit, Input } from '@angular/core'; -import { Router, NavigationEnd } from '@angular/router'; +import { Component, Input, OnInit } from '@angular/core'; +import { NavigationEnd, Router } from '@angular/router'; import { filter } from 'rxjs/operators'; import { NavGroup } from '../nav-group.model'; import { NavItem } from '../nav-item.model'; @@ -13,22 +13,26 @@ import { GoSideNavService } from './go-side-nav.service'; export class GoSideNavComponent implements OnInit { @Input() menuItems: Array; - constructor (private router: Router, public navService: GoSideNavService) { } + constructor ( + private router: Router, + public navService: GoSideNavService + ) { } ngOnInit(): void { + this.navService.menuItemz = this.menuItems; this.router.events .pipe( - filter(event => event instanceof NavigationEnd) + filter((event: any) => event instanceof NavigationEnd) ).subscribe((event: NavigationEnd) => { - this.menuItems.forEach(item => { + this.menuItems.forEach((item: (NavGroup | NavItem)) => { (item as NavGroup).expanded = this.setExpanded(item, event.url); }); }); } closeNavs(navGroup: NavGroup): void { - this.menuItems.forEach(group => { - const g = group as NavGroup; + this.menuItems.forEach((group: (NavGroup | NavItem)) => { + const g: NavGroup = group as NavGroup; g.expanded = this.openAccordion(g, navGroup); }); } @@ -44,7 +48,7 @@ export class GoSideNavComponent implements OnInit { } private navGroupExpansion(group: NavGroup, url: string): boolean { - group.expanded = group.subRoutes.some(subRoute => { + group.expanded = group.subRoutes.some((subRoute: (NavGroup | NavItem)) => { return this.setExpanded(subRoute, url); }); return group.expanded; @@ -58,11 +62,10 @@ export class GoSideNavComponent implements OnInit { * @param group this is the group we are trying to decide if it should be open. * @param item this is the group that we are searching for that was clicked on and needs opened. */ - private openAccordion(group: NavGroup, item: NavGroup): boolean { if (group.subRoutes) { if (group.routeTitle !== item.routeTitle) { - group.expanded = group.subRoutes.some(subRoute => { + group.expanded = group.subRoutes.some((subRoute: (NavGroup | NavItem)) => { return this.openAccordion((subRoute as NavGroup), item); }); } else { diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts index d2f2dda34..06c5b7518 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts @@ -1,16 +1,66 @@ import { Injectable } from '@angular/core'; -import { Observable, of as observableOf, BehaviorSubject } from 'rxjs'; +import { NavGroup } from '../nav-group.model'; +import { NavItem } from '../nav-item.model'; +import { NavigationEnd, Router } from '@angular/router'; @Injectable({ providedIn: 'root' }) export class GoSideNavService { - public navOpen = true; + public navOpen: boolean = true; + public menuItems: (NavGroup | NavItem)[]; + private _menuItems: Map = new Map(); + private currentItem: NavItem | NavGroup; - constructor() { } + constructor(private router: Router) { + this.router.events.subscribe((event: any) => { + if (event instanceof NavigationEnd) { + const obj: NavGroup | NavItem = this._menuItems.get(event.urlAfterRedirects); + if (obj) { + if (this.currentItem) { + this.currentItem.routeActive = false; + } - toggleNav() { + obj.routeActive = true; + this.currentItem = obj; + } + } + }); + } + + set menuItemz(val: (NavGroup | NavItem)[]) { + this.menuItems = val; + this.createNavMap(); + } + + toggleNav(): void { this.navOpen = !this.navOpen; } + + private isNavGroup(item: NavGroup | NavItem): item is NavGroup { + return (item as NavGroup).subRoutes !== undefined; + } + + private extractNested(group: NavGroup, base: NavGroup): void { + for (const route of group.subRoutes) { + if (this.isNavGroup(route)) { + this.extractNested(route, base); + } else { + this._menuItems.set('/' + route.route, base); + } + } + } + + private createNavMap(): void { + let baseItem: NavGroup | NavItem; + for (let i: number = 0; i < this.menuItems.length; i++) { + baseItem = this.menuItems[i]; + if (!this.isNavGroup(baseItem)) { + this._menuItems.set('/' + baseItem.route, baseItem); + } else { + this.extractNested(baseItem, baseItem); + } + } + } } diff --git a/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts index dd13bde46..4014d2c2b 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts @@ -3,6 +3,7 @@ import { NavItem } from './nav-item.model'; export interface NavGroup { description?: string; expanded?: boolean; + routeActive?: boolean; routeIcon?: string; routeTitle: string; subRoutes: Array; diff --git a/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts b/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts index eeaa0b8cf..a3fdb7a46 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts @@ -3,6 +3,7 @@ export interface NavItem { route: string; routeIcon?: string; routeTitle: string; + routeActive?: boolean; /** * When `isExternalLink` is true, the value passed to `route` will be used for redirection. By default, all external links will open in a diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index a9734396f..5aa468299 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -28,7 +28,7 @@ $column-sizes: ( 75: 3 / 4, 100: 1 ); - + $side-nav-width: 15.5rem; $side-nav-width--collapsed: 3.2rem; diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index ea1b5eecf..be1430e50 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -27,12 +27,14 @@ export class AppComponent implements OnInit { { routeIcon: 'dashboard', routeTitle: 'Tests', description: 'Test Routes', subRoutes: [ { route: 'test-page-1', routeTitle: 'Test 1', description: 'Test Route 1' }, { route: 'test-page-2', routeTitle: 'Test 2' }, - { route: 'test-page-3', routeTitle: 'Test 3', description: 'Forms' } + { routeTitle: 'Test 3', description: 'Forms', subRoutes: [ + { route: 'test-page-2/test-page-3', routeTitle: 'test 4' } + ]} ]}, { routeIcon: 'explore', routeTitle: 'Second Test', route: 'test-page-4', description: 'Test Route 4' }, { routeIcon: 'search', - routeTitle: 'External Link (New Tab)', + routeTitle: 'External Link (In a New Tab)', description: 'Test external link opening in new tab', route: 'https://www.google.com/', isExternalLink: true From f8d6d75df33efd8e98eaa4a23cb06f4528dc0d33 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 31 Oct 2019 10:07:38 -0400 Subject: [PATCH 07/11] Added docs for overriding header font color --- .../configuration-docs.component.html | 163 ++++++++++-------- .../configuration-docs.component.ts | 22 ++- 2 files changed, 115 insertions(+), 70 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html index 806b8617c..2d7438bce 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html @@ -1,84 +1,109 @@
-

{{ pageTitle }}

-
- -
- - -

Branding

- - -

- The GoConfigurationService can be used to brand a few select - pieces of our design system. Currently the only things that can be branded are the active indicators - on the sidenav and accordions as well as the left portion of the header. -

+

{{ pageTitle }}

+
-

Update Branding Color

-
-
-
-

- The public setBrandColor(color: string): void method can be used - to update the branding color by passing in a hex code. -

-
-
+
+ + +

Branding

+ + +

+ The GoConfigurationService can be used to brand a few select + pieces of our design system. Currently the only things that can be branded are the active indicators + on the sidenav and accordions as well as the left portion of the header. +

-
-
- +

Update Branding Color

+

+ The public setBrandColor(color: string): void method can be used + to update the branding color by passing in a hex code. +

+ +
+
+
+
+
- -
- +
+ Update Branding Color
+
-
- - - - - -
+
+ + + + +
+
+ + -

Enable Header Branding

-
-
-
-

- The public toggleHeaderBrandingEnabled(): void method can - be used to enable/disable header branding. -

-
-
+ + +

Enable Header Branding

+ + +

+ The public toggleHeaderBrandingEnabled(): void method can + be used to enable/disable header branding. +

+
+
+ + +
-
-
- - -
-
+
+ + + + + +
+
+ + -
- - - - - -
+ + +

Override Accessibility Color

+ + +

+ The overrideMenuColor() method can + be used to override the accessibility check that is performed on the header. + You can specify light, dark + or leave it undefined to allow the accessibility check. + This feature is only activated if headerBrandingEnabled is enabled. +

+
+
+ + +
+ +
+ + + + +
- - -
+
+ + + diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts index 892e2050e..0164058ff 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts @@ -8,8 +8,14 @@ import { FormControl } from '@angular/forms'; }) export class ConfigurationDocsComponent implements OnInit { pageTitle: string = 'Configuration'; - inputControl: FormControl; + inputControl: FormControl = new FormControl(false); toggleControl: FormControl = new FormControl(false); + colorControl: FormControl = new FormControl(''); + colorOptions: any = [ + { label: 'Default', value: undefined }, + { label: 'Light', value: 'light' }, + { label: 'Dark', value: 'dark' } + ]; updateColorExample: string = ` updateColor(): void { @@ -45,6 +51,16 @@ export class ConfigurationDocsComponent implements OnInit { } `; + colorEx: string = ` + colorControl: FormControl = new FormControl(''); + + constructor(private goConfigService: GoConfigService) { } + + this.colorControl.valueChanges.subscribe(i => { + this.goConfigService.overrideMenuColor(i); + }); + `; + constructor(private goConfigService: GoConfigService) { } ngOnInit(): void { @@ -52,6 +68,10 @@ export class ConfigurationDocsComponent implements OnInit { this.toggleControl.valueChanges.subscribe(() => { this.goConfigService.toggleHeaderBrandingEnabled(); }); + + this.colorControl.valueChanges.subscribe(i => { + this.goConfigService.overrideMenuColor(i); + }); } updateColor(): void { From be65b7b08d93b0989da35f051a6f7f2b892c4243 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 31 Oct 2019 10:33:43 -0400 Subject: [PATCH 08/11] Fix search styling --- .../src/lib/components/go-search/go-search.component.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.scss b/projects/go-lib/src/lib/components/go-search/go-search.component.scss index 761b356b0..c705a1605 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.scss +++ b/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; From 61db8b12adce7f61a3e9673bcabc4c70f8050647 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 31 Oct 2019 10:44:35 -0400 Subject: [PATCH 09/11] Fixed failing header creation test --- .../components/go-header/go-header.component.spec.ts | 10 ++++++++-- .../lib/components/go-header/go-header.component.ts | 2 +- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts index 5120ebc8d..82003500b 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts +++ b/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 diff --git a/projects/go-lib/src/lib/components/go-header/go-header.component.ts b/projects/go-lib/src/lib/components/go-header/go-header.component.ts index 66b3c0103..7c2dc4682 100644 --- a/projects/go-lib/src/lib/components/go-header/go-header.component.ts +++ b/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'; From b5a9e3f24f36d6392aa4782eaaa5ef48cf56aca7 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 31 Oct 2019 10:56:52 -0400 Subject: [PATCH 10/11] Finish docs for configuration --- .../configuration-docs.component.html | 21 +++++++++++------- .../configuration-docs.component.ts | 22 +++++++++++++++---- 2 files changed, 31 insertions(+), 12 deletions(-) diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html index 2d7438bce..04884a254 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.html @@ -46,7 +46,7 @@

Update Branding Color

- +

Enable Header Branding

 @@ -74,7 +74,7 @@

Enable Header Branding

 - +

Override Accessibility Color

 @@ -88,12 +88,17 @@

Override Accessibility Color

- - +

+ + +

+

+ Note: to see this example take affect, toggle the "Enable Header Branding" above to true. +

diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts index 0164058ff..e7854a39e 100644 --- a/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts +++ b/projects/go-style-guide/src/app/features/ui-kit/components/configuration-docs/configuration-docs.component.ts @@ -53,14 +53,28 @@ export class ConfigurationDocsComponent implements OnInit { colorEx: string = ` colorControl: FormControl = new FormControl(''); + colorOptions: any = [ + { label: 'Default', value: undefined }, + { label: 'Light', value: 'light' }, + { label: 'Dark', value: 'dark' } + ]; constructor(private goConfigService: GoConfigService) { } - this.colorControl.valueChanges.subscribe(i => { - this.goConfigService.overrideMenuColor(i); + this.colorControl.valueChanges.subscribe(value => { + this.goConfigService.overrideMenuColor(value); }); `; + colorEx_html: string = ` + + + `; + constructor(private goConfigService: GoConfigService) { } ngOnInit(): void { @@ -69,8 +83,8 @@ export class ConfigurationDocsComponent implements OnInit { this.goConfigService.toggleHeaderBrandingEnabled(); }); - this.colorControl.valueChanges.subscribe(i => { - this.goConfigService.overrideMenuColor(i); + this.colorControl.valueChanges.subscribe((value: ('light' | 'dark')) => { + this.goConfigService.overrideMenuColor(value); }); } From a7ae2c7eff1c1204e9d3677a250cc5251ecd01ab Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Thu, 31 Oct 2019 11:59:52 -0400 Subject: [PATCH 11/11] Minor adjustments --- .../go-side-nav/go-nav-group/go-nav-group.component.html | 2 +- .../components/go-side-nav/go-side-nav/go-side-nav.component.ts | 2 +- .../components/go-side-nav/go-side-nav/go-side-nav.service.ts | 2 +- projects/go-tester/src/app/app.component.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html index 2d40f81fc..b3b83a666 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html @@ -28,7 +28,7 @@ + [level]="level + 1"> diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts index 0c7af7da5..9a5887461 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts @@ -19,7 +19,7 @@ export class GoSideNavComponent implements OnInit { ) { } ngOnInit(): void { - this.navService.menuItemz = this.menuItems; + this.navService.setMenuItems(this.menuItems); this.router.events .pipe( filter((event: any) => event instanceof NavigationEnd) diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts index 06c5b7518..87a9da7f5 100644 --- a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts @@ -29,7 +29,7 @@ export class GoSideNavService { }); } - set menuItemz(val: (NavGroup | NavItem)[]) { + setMenuItems(val: (NavGroup | NavItem)[]): void { this.menuItems = val; this.createNavMap(); } diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index be1430e50..25059b030 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -28,7 +28,7 @@ export class AppComponent implements OnInit { { route: 'test-page-1', routeTitle: 'Test 1', description: 'Test Route 1' }, { route: 'test-page-2', routeTitle: 'Test 2' }, { routeTitle: 'Test 3', description: 'Forms', subRoutes: [ - { route: 'test-page-2/test-page-3', routeTitle: 'test 4' } + { route: 'test-page-3', routeTitle: 'test 4' } ]} ]}, { routeIcon: 'explore', routeTitle: 'Second Test', route: 'test-page-4', description: 'Test Route 4' },