From fe5f7209f6844bfaba388dacc9fe59630c724542 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Thu, 11 Jul 2019 16:17:57 -0400 Subject: [PATCH 01/25] Bugfix for empty table column Fixes #53 --- .../src/lib/components/go-table/go-table-utils.ts | 13 ++++++++----- projects/go-tester/src/app/app.component.html | 5 +++++ 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/projects/go-lib/src/lib/components/go-table/go-table-utils.ts b/projects/go-lib/src/lib/components/go-table/go-table-utils.ts index 3e29df6d8..c84b71a10 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table-utils.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table-utils.ts @@ -1,22 +1,25 @@ export function extractFieldData(key: string, obj: object) { - return key.split('.').reduce((p,c) => p && p[c], obj); + if (key) { + return key.split('.').reduce((p, c) => p && p[c], obj); + } + return ''; } export function sortBy(key: string, reverse: boolean) { return (a: any, b: any) => { let aFieldData = extractFieldData(key, a); let bFieldData = extractFieldData(key, b); - aFieldData = typeof aFieldData === "string" ? aFieldData.toLowerCase() : aFieldData; - bFieldData = typeof bFieldData === "string" ? bFieldData.toLowerCase() : bFieldData; + aFieldData = typeof aFieldData === 'string' ? aFieldData.toLowerCase() : aFieldData; + bFieldData = typeof bFieldData === 'string' ? bFieldData.toLowerCase() : bFieldData; if (aFieldData < bFieldData) { return reverse ? -1 : 1; } - + if (aFieldData > bFieldData) { return reverse ? 1 : -1; } return 0; - } + }; } diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 6b8caa72d..caa60ee7b 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -72,6 +72,11 @@

Table

+ + + + + From 82d8b7b5195fb11af4c9d17ec9612b24c09bbce2 Mon Sep 17 00:00:00 2001 From: Steven Ulmer Date: Tue, 9 Jul 2019 16:15:19 -0400 Subject: [PATCH 02/25] Adds Side Navigation Module --- .../go-nav-group/go-nav-group.component.html | 32 ++++ .../go-nav-group/go-nav-group.component.scss | 60 +++++++ .../go-nav-group/go-nav-group.component.ts | 30 ++++ .../go-nav-item/go-nav-item.component.html | 17 ++ .../go-nav-item/go-nav-item.component.scss | 65 +++++++ .../go-nav-item/go-nav-item.component.ts | 14 ++ .../go-side-nav/go-side-nav.module.ts | 29 ++++ .../go-side-nav/go-side-nav.component.html | 7 + .../go-side-nav/go-side-nav.component.scss | 27 +++ .../go-side-nav/go-side-nav.component.ts | 77 ++++++++ .../go-side-nav/go-side-nav.service.ts | 16 ++ .../components/go-side-nav/nav-group.model.ts | 8 + .../components/go-side-nav/nav-item.model.ts | 6 + projects/go-lib/src/lib/go-shared.module.ts | 3 + projects/go-lib/src/public_api.ts | 7 + projects/go-lib/src/styles/_variables.scss | 10 ++ projects/go-tester/src/app/app.component.html | 164 ++++++++++-------- projects/go-tester/src/app/app.component.scss | 24 +++ projects/go-tester/src/app/app.component.ts | 35 +++- projects/go-tester/src/app/app.module.ts | 10 +- projects/go-tester/src/app/app.router.ts | 13 ++ projects/go-tester/src/app/dummy.component.ts | 9 + projects/go-tester/src/styles.scss | 1 + 23 files changed, 584 insertions(+), 80 deletions(-) create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts create mode 100644 projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts create mode 100644 projects/go-tester/src/app/app.router.ts create mode 100644 projects/go-tester/src/app/dummy.component.ts 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 new file mode 100644 index 000000000..6b38d652d --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html @@ -0,0 +1,32 @@ +
+
+
+ + + + {{ navItem.routeTitle }} + +
+ + +
+
+
+ + + + + +
+
+
+ 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 new file mode 100644 index 000000000..1f29982ae --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss @@ -0,0 +1,60 @@ +@import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; +@import '../../../../styles/variables'; + +.go-nav-group__dropdown { + align-items: center; + display: flex; + padding-right: .5rem; + user-select: none; + @include transition(all); + + &:hover { + background: $theme-dark-bg-hover; + } +} + +.go-nav-group__link { + display: flex; + flex-grow: 1; +} + +.go-nav-group__title { + font-weight: $weight-light; + letter-spacing: $side-nav-letter-spacing; + padding: $outer-side-nav-padding; +} + +.go-nav-group__icon { + font-size: 1.2rem; + padding: 1rem; +} + +.go-nav-group__expand-icon { + border-radius: 50%; + color: $theme-dark-color; + cursor: pointer; + font-size: 1.5rem; + height: 2.5rem; + padding: 0.5rem; + width: 2.5rem; + + &:hover { + background: $theme-dark-bg; + } +} + +.go-nav-group__expand-icon--expanded { + transform: rotate(180deg); +} + +.go-nav-group__inner-group { + .go-nav-group__title { + font-size: $inner-side-nav-font-size; + padding: $inner-side-nav-padding; + } +} + +.go-nav-group--expanded { + background: $theme-dark-bg-active; +} 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 new file mode 100644 index 000000000..34f0052b8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, ViewEncapsulation, Output, EventEmitter } 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'; + +@Component({ + selector: 'go-nav-group', + templateUrl: './go-nav-group.component.html', + styleUrls: ['./go-nav-group.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class GoNavGroupComponent { + @Input() navItem: NavGroup | NavItem; + @Input() class: string; + @Output() closeNavs = new EventEmitter(); + + constructor (public navService: GoSideNavService) { } + + expand(navGroup: NavGroup): void { + navGroup.expanded = !navGroup.expanded; + + if (!this.navService.navOpen) { + this.navService.toggleNav(); + } + + if (navGroup.expanded) { + this.closeNavs.emit(navGroup); + } + } +} 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 new file mode 100644 index 000000000..db3b8642a --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.html @@ -0,0 +1,17 @@ +
+ + + + + {{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 new file mode 100644 index 000000000..5ccbe1811 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.scss @@ -0,0 +1,65 @@ +@import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; +@import '../../../../styles/variables'; + +.go-nav-item { + align-items: center; + display: flex; + padding-right: .5rem; + @include transition(all); + + &:hover { + background: $theme-dark-bg-hover; + } +} + +.go-nav-item__link::before { + background: $base-primary; + border-radius: 0 $global-radius $global-radius 0; + content: " "; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + width: 4px; + @include transition(all); +} + +.go-nav-item__link--active { + .go-nav-item__title { + font-weight: $weight-regular; + } +} + +.go-nav-item__link--active::before { + opacity: 1; +} + +.go-nav-item__link, +.go-nav-item__link:visited, +.go-nav-item__link:focus, +.go-nav-item__link:active { + color: $theme-dark-color; +} + +.go-nav-item__link { + align-items: center; + border: none; + display: flex; + flex-grow: 1; + position: relative; + text-decoration: none; +} + +.go-nav-item__title { + font-size: $inner-side-nav-font-size; + font-weight: $weight-light; + letter-spacing: $side-nav-letter-spacing; + padding: $inner-side-nav-padding; +} + +.go-nav-item__title--with-icon { + font-size: 1rem; + padding: $outer-side-nav-padding; +} 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 new file mode 100644 index 000000000..3102c194f --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-item/go-nav-item.component.ts @@ -0,0 +1,14 @@ +import { Component, Input } from '@angular/core'; +import { NavItem } from '../nav-item.model'; +import { GoSideNavService } from '../go-side-nav/go-side-nav.service'; + +@Component({ + selector: 'go-nav-item', + templateUrl: './go-nav-item.component.html', + styleUrls: ['./go-nav-item.component.scss'] +}) +export class GoNavItemComponent { + @Input() navItem: NavItem; + + constructor (public navService: GoSideNavService) { } +} diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts new file mode 100644 index 000000000..3c4ca99d6 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav.module.ts @@ -0,0 +1,29 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; + +import { GoIconModule } from '../go-icon/go-icon.module'; + +import { GoSideNavComponent } from './go-side-nav/go-side-nav.component'; +import { GoNavGroupComponent } from './go-nav-group/go-nav-group.component'; +import { GoNavItemComponent } from './go-nav-item/go-nav-item.component'; + +@NgModule({ + declarations: [ + GoSideNavComponent, + GoNavGroupComponent, + GoNavItemComponent + ], + imports: [ + CommonModule, + GoIconModule, + RouterModule + ], + exports: [ + GoSideNavComponent, + GoNavGroupComponent, + GoNavItemComponent + ] +}) + +export class GoSideNavModule { } 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 new file mode 100644 index 000000000..3ab0ca377 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.html @@ -0,0 +1,7 @@ +
+ + +
diff --git a/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss new file mode 100644 index 000000000..9d36254af --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss @@ -0,0 +1,27 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '../../../../styles/variables'; + +.go-side-nav { + background: $theme-dark-bg; + color: $theme-dark-color; + display: flex; + flex-direction: column; + flex-grow: 1; + height: 100%; + overflow-y: auto; + padding: 2rem 0; + width: $side-nav-width; + + @media(max-width: $breakpoint-mobile) { + display: none; + + &.go-side-nav--show-mobile { + display: flex; + width: 100vw; + } + } + + &.go-side-nav--collapsed { + width: $side-nav-width--collapsed; + } +} 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 new file mode 100644 index 000000000..856909e68 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.ts @@ -0,0 +1,77 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { Router, NavigationEnd } from '@angular/router'; +import { filter } from 'rxjs/operators'; +import { NavGroup } from '../nav-group.model'; +import { NavItem } from '../nav-item.model'; +import { GoSideNavService } from './go-side-nav.service'; + +@Component({ + selector: 'go-side-nav', + templateUrl: './go-side-nav.component.html', + styleUrls: ['./go-side-nav.component.scss'] +}) +export class GoSideNavComponent implements OnInit { + @Input() menuItems: Array; + + constructor (private router: Router, public navService: GoSideNavService) { } + + ngOnInit(): void { + this.router.events + .pipe( + filter(event => event instanceof NavigationEnd) + ).subscribe((event: NavigationEnd) => { + this.menuItems.forEach(item => { + (item as NavGroup).expanded = this.setExpanded(item, event.url); + }); + }); + } + + closeNavs(navGroup: NavGroup): void { + this.menuItems.forEach(group => { + const g = group as NavGroup; + g.expanded = this.openAccordion(g, navGroup); + }); + } + + //#region Private Methods + + private setExpanded(item: NavGroup | NavItem, url: string): boolean { + if ((item as NavGroup).subRoutes) { + return this.navGroupExpansion(item as NavGroup, url); + } else { + return url.includes((item as NavItem).route); + } + } + + private navGroupExpansion(group: NavGroup, url: string): boolean { + group.expanded = group.subRoutes.some(subRoute => { + return this.setExpanded(subRoute, url); + }); + return group.expanded; + } + + /** + * @description this goes through and opens the accordion of the group that was clicked on and + * closes the other accordions that were previously open if they are not above the group that was + * clicked on. It uses recursion to go through nested groups to make sure that if a child group + * is open the parents of the child is also open. + * @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 => { + return this.openAccordion((subRoute as NavGroup), item); + }); + } else { + group.expanded = true; + } + + return group.expanded; + } + return false; + } + //#endregion +} 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 new file mode 100644 index 000000000..d2f2dda34 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.service.ts @@ -0,0 +1,16 @@ +import { Injectable } from '@angular/core'; +import { Observable, of as observableOf, BehaviorSubject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) + +export class GoSideNavService { + public navOpen = true; + + constructor() { } + + toggleNav() { + this.navOpen = !this.navOpen; + } +} 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 new file mode 100644 index 000000000..4b917ae08 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts @@ -0,0 +1,8 @@ +import { NavItem } from './nav-item.model'; + +export interface NavGroup { + expanded?: 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 new file mode 100644 index 000000000..8dfa9bfc8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/nav-item.model.ts @@ -0,0 +1,6 @@ +export interface NavItem { + description?: string; + route: string; + routeIcon?: string; + routeTitle: string; +} diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index a759019fa..75643cd45 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -5,6 +5,7 @@ import { GoCardModule } from './components/go-card/go-card.module'; import { GoIconModule } from './components/go-icon/go-icon.module'; import { GoLoaderModule } from './components/go-loader/go-loader.module'; import { GoModalModule } from './components/go-modal/go-modal.module'; +import { GoSideNavModule } from './components/go-side-nav/go-side-nav.module'; import { GoTableModule } from './components/go-table/go-table.module'; import { GoToastModule } from './components/go-toast/go-toast.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; @@ -17,6 +18,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoIconModule, GoLoaderModule, GoModalModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule @@ -28,6 +30,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoIconModule, GoLoaderModule, GoModalModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 9d7a5230b..e160528fe 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -36,6 +36,13 @@ export * from './lib/components/go-off-canvas/go-off-canvas.component'; export * from './lib/components/go-off-canvas/go-off-canvas.module'; export * from './lib/components/go-off-canvas/go-off-canvas.service'; +// Side Nav +export * from './lib/components/go-side-nav/go-side-nav.module'; +export * from './lib/components/go-side-nav/nav-group.model'; +export * from './lib/components/go-side-nav/nav-item.model'; +export * from './lib/components/go-side-nav/go-side-nav/go-side-nav.component'; +export * from './lib/components/go-side-nav/go-side-nav/go-side-nav.service'; + // Table export * from './lib/components/go-table/go-table.component'; export * from './lib/components/go-table/go-table.module'; diff --git a/projects/go-lib/src/styles/_variables.scss b/projects/go-lib/src/styles/_variables.scss index 972e90fa6..c4363b1fa 100644 --- a/projects/go-lib/src/styles/_variables.scss +++ b/projects/go-lib/src/styles/_variables.scss @@ -8,3 +8,13 @@ $brand-color-hover: darken($base-primary, 10%); $brand-color-dark: darken($base-primary, 15%); $brand-color-darker: darken($base-primary, 20%); $brand-color-gradient: linear-gradient(to right, $base-primary, $brand-color-hover); + +// Structure +$side-nav-width: 15.5rem; +$side-nav-width--collapsed: 3.2rem; + +// SideNav +$inner-side-nav-font-size: 0.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; diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index caa60ee7b..1dc558219 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -1,85 +1,97 @@ -
+
+
+ +
+
+ + +
+
-
-

- Welcome to {{ title }}! -

-
+
+

+ Welcome to {{ title }}! +

+
-
-

Loader

- - Toggle Animation - -
-
-
-
- - - -
-
-
- -
-

Buttons

- - Hey - - - Hey - - - Hey - - - Nope - - - Hey - - - Dark - -
+
+

Loader

+ + Toggle Animation + +
+
+
+
+ + + +
+
+
+ +
+

Buttons

+ + Hey + + + Hey + + + Hey + + + Nope + + + Hey + + + Dark + +
-
-

Off Canvas

- - Click me to open - -
+
+

Off Canvas

+ + Click me to open + +
-
-

Toasts

- - -
+
+

Toasts

+ + +
-
-

Table

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

Table

+ + + + + + + + + + + + + +
+
+
- diff --git a/projects/go-tester/src/app/app.component.scss b/projects/go-tester/src/app/app.component.scss index e69de29bb..443daa965 100644 --- a/projects/go-tester/src/app/app.component.scss +++ b/projects/go-tester/src/app/app.component.scss @@ -0,0 +1,24 @@ +.main { + display: flex; + flex-direction: column; + max-height: 100vh; + min-height: 100vh; + overflow: hidden; +} + +.main__content { + left: 0; + display: flex; + flex-grow: 1; + height: 100%; + overflow: hidden; +} + +.main__content--container { + overflow-x: hidden; + overflow-y: auto; + padding: 3rem; + width: 100%; + display: flex; + flex-direction: row; +} diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index aa065ed96..874af89c7 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -8,7 +8,10 @@ import { GoButtonComponent, GoIconComponent, GoLoaderComponent, - GoToasterService + GoSideNavService, + GoToasterService, + NavGroup, + NavItem } from '../../../go-lib/src/public_api'; @Component({ @@ -26,10 +29,34 @@ export class AppComponent implements OnInit { tableConfig: GoTableConfig; tableLoading: boolean = true; + menuItems: Array = [ + { route: 'getting-started', routeIcon: 'power_settings_new', routeTitle: 'Getting Started' }, + {routeIcon: 'gavel', routeTitle: 'Standards', subRoutes: [ + { route: 'standards/colors', routeTitle: 'Colors' }, + { route: 'standards/forms', routeTitle: 'Forms' }, + { route: 'standards/grid', routeTitle: 'Grid System' }, + { routeTitle: 'Nested Typography', subRoutes: [ + { route: 'whatever', routeTitle: 'This is nested'} + ]} + ]}, + {routeIcon: 'widgets', routeTitle: 'Components', subRoutes: [ + { route: 'ui-kit/accordion', routeTitle: 'Accordion' }, + { route: 'ui-kit/accordion-panel', routeTitle: 'Accordion Panel' }, + { route: 'ui-kit/button', routeTitle: 'Button' }, + { route: 'ui-kit/card', routeTitle: 'Card' }, + { route: 'ui-kit/icon', routeTitle: 'Icon' }, + { route: 'ui-kit/modal', routeTitle: 'Modal' }, + { route: 'ui-kit/off-canvas', routeTitle: 'Off Canvas' }, + { route: 'ui-kit/table', routeTitle: 'Table'}, + { route: 'ui-kit/toast', routeTitle: 'Toast' } + ]} + ]; + constructor( private appService: AppService, private goToasterService: GoToasterService, - private goOffCanvasService: GoOffCanvasService + private goOffCanvasService: GoOffCanvasService, + private goSideNavService: GoSideNavService ) { } ngOnInit() { @@ -81,4 +108,8 @@ export class AppComponent implements OnInit { } }); } + + toggleSideMenu(): void { + this.goSideNavService.toggleNav(); + } } diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index f1e12b6f4..c58a8dd2f 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -2,6 +2,8 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; +import { AppRoutingModule } from './app.router'; +import { DummyComponent } from './dummy.component' import { GoButtonComponent, @@ -10,6 +12,7 @@ import { GoIconModule, GoLoaderModule, GoOffCanvasModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule @@ -21,7 +24,8 @@ import { AppService } from './app.service'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DummyComponent ], imports: [ BrowserModule, @@ -31,9 +35,11 @@ import { AppService } from './app.service'; GoIconModule, GoLoaderModule, GoOffCanvasModule, + GoSideNavModule, GoTableModule, GoToastModule, - GoToasterModule + GoToasterModule, + AppRoutingModule ], providers: [ AppService diff --git a/projects/go-tester/src/app/app.router.ts b/projects/go-tester/src/app/app.router.ts new file mode 100644 index 000000000..e5dc856bd --- /dev/null +++ b/projects/go-tester/src/app/app.router.ts @@ -0,0 +1,13 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; +import { DummyComponent } from './dummy.component'; + +const routes: Routes = [ + { path: '**', component: DummyComponent} +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } diff --git a/projects/go-tester/src/app/dummy.component.ts b/projects/go-tester/src/app/dummy.component.ts new file mode 100644 index 000000000..860449570 --- /dev/null +++ b/projects/go-tester/src/app/dummy.component.ts @@ -0,0 +1,9 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'route-dummy', + template: '' +}) + +export class DummyComponent { +} diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss index 7985988c7..f490dfc6d 100644 --- a/projects/go-tester/src/styles.scss +++ b/projects/go-tester/src/styles.scss @@ -6,4 +6,5 @@ body { background: $theme-light-app-bg; font-family: 'Roboto'; + margin: 0px; } From a3b588bf499b4cc4a38ec368ec1bc7408a4929bb Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 15 Jul 2019 14:39:17 -0400 Subject: [PATCH 03/25] Feature Go Search --- .../src/lib/animations/search.animation.ts | 57 +++++++ .../go-search/go-search.component.html | 37 +++++ .../go-search/go-search.component.scss | 143 ++++++++++++++++++ .../go-search/go-search.component.spec.ts | 36 +++++ .../go-search/go-search.component.ts | 82 ++++++++++ .../components/go-search/go-search.module.ts | 25 +++ .../components/go-search/go-search.service.ts | 67 ++++++++ projects/go-lib/src/lib/go-shared.module.ts | 3 + projects/go-lib/src/public_api.ts | 5 + projects/go-tester/src/app/app.component.html | 9 ++ projects/go-tester/src/app/app.component.ts | 14 +- projects/go-tester/src/app/app.module.ts | 11 +- projects/go-tester/src/app/app.service.ts | 8 + .../app/components/search-test.component.html | 10 ++ .../app/components/search-test.component.ts | 39 +++++ 15 files changed, 535 insertions(+), 11 deletions(-) create mode 100644 projects/go-lib/src/lib/animations/search.animation.ts create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.component.html create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.component.scss create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.component.spec.ts create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.component.ts create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.module.ts create mode 100644 projects/go-lib/src/lib/components/go-search/go-search.service.ts create mode 100644 projects/go-tester/src/app/components/search-test.component.html create mode 100644 projects/go-tester/src/app/components/search-test.component.ts diff --git a/projects/go-lib/src/lib/animations/search.animation.ts b/projects/go-lib/src/lib/animations/search.animation.ts new file mode 100644 index 000000000..778306c11 --- /dev/null +++ b/projects/go-lib/src/lib/animations/search.animation.ts @@ -0,0 +1,57 @@ +import { + animate, + state, + style, + transition, + trigger +} from '@angular/animations'; + +const timing = '.5s' +const easing = 'cubic-bezier(.25, .8, .25, 1)'; + +export const searchLoaderAnim = trigger('searchLoaderAnim', [ + transition(':enter', [ + style({ + height: 0, + opacity: 0, + padding: 0 + }), + animate(timing + ' ' + easing, style({ + height: '*', + opacity: 1, + padding: '2rem' + })) + ]), + transition(':leave', [ + animate(timing + ' ' + easing, style({ + height: 0, + opacity: 0, + padding: 0 + })) + ]) +]) + +export const searchResultsAnim = trigger('searchResultsAnim', [ + transition(':enter', [ + style({ + height: 0, + margin: 0, + opacity: 0 + }), + animate(timing + ' .25s ' + easing, style({ + height: '*', + margin: '1rem 0 0.5rem 0', + opacity: 1 + })) + ]), + transition(':leave', [ + style({ + overflowY: 'hidden' + }), + animate(timing + ' ' + easing, style({ + height: 0, + margin: 0, + opacity: 0 + })) + ]) +]) \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.html b/projects/go-lib/src/lib/components/go-search/go-search.component.html new file mode 100644 index 000000000..57e094975 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.html @@ -0,0 +1,37 @@ +
+
+
+ + +
+
+ +
+
+ +
+
+ {{ goSearchService.noResultsMessage }} +
+
+
\ No newline at end of file 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 new file mode 100644 index 000000000..014d0addd --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -0,0 +1,143 @@ +@import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; + +.go-search { + position: relative; +} + +.go-search__container { + background: $theme-light-bg; + border: 1px solid $theme-light-border; + border-radius: 1rem; + box-shadow: none; + color: $theme-light-border; + display: flex; + flex-direction: column; + position: absolute; + top: calc(50% - ((1.875rem + 2px) / 2)); + // height of input + border, halfed + width: 600px; + @include transition(all); + + &:hover { + background: lighten($theme-light-app-bg, 3%); + } +} + +.go-search__container--active { + border: 0; + box-shadow: $global-box-shadow; + padding: 0.5rem; + top: calc(50% - (2.875rem / 2)); + // height of input with padding, halfed + + &:hover { + background: $theme-light-bg; + } +} + +.go-search__field { + align-items: center; + display: flex; + @include transition(all); +} + +.go-search__submit { + align-items: center; + background: transparent; + border: 0; + color: $theme-light-border; + display: flex; + font-size: 1rem; + padding: 0 0.5rem; + + &:hover { + cursor: pointer; + } + + &:active, &:focus { + outline: none; + } +} + +.go-search__icon { + height: 1rem; +} + +.go-search__input { + background: transparent; + border: 0; + flex: 1; + font-family: $base-font-stack; + font-size: 0.875rem; + font-weight: 300; + letter-spacing: 0.02rem; + min-width: 250px; + padding: .5rem .5rem .5rem 0; + + &:-ms-input-placeholder { + color: $theme-light-color; + } + + &::placeholder { + color: $theme-light-color; + } + + &:active, &:focus { + outline: none; + } +} + +.go-search__loader-container { + display: flex; + height: calc(4rem + 50px); + justify-content: center; + overflow: hidden; + padding: 2rem; + position: relative; +} + +.go-search__loader { + position: absolute; +} + +.go-search__results { + background: $theme-light-bg; + color: $theme-light-color; + font-size: 0.875rem; + max-height: 400px; + margin: 1rem 0 0.5rem 0; + overflow-x: hidden; + overflow-y: auto; + padding: 0 0.5rem; +} + +/** +* This section should be included in gosheets as a global change. +* Until that happens, we should keep this here. +**/ +::-webkit-scrollbar { + height: 12px; + width: 12px; + + @media (max-width: 768px) { + height: 0 !important; + width: 0 !important; + } +} + +::-webkit-scrollbar-track { + background-color: $theme-light-app-bg; + border-radius: 6px; +} + +::-webkit-scrollbar-thumb { + background: $base-light-secondary; + border: 2px solid $theme-light-app-bg; + border-radius: 6px; + @include transition(all); + + &:hover { + background: $ui-color-neutral-gradient; + } +} diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.spec.ts b/projects/go-lib/src/lib/components/go-search/go-search.component.spec.ts new file mode 100644 index 000000000..75e7cf4c8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.spec.ts @@ -0,0 +1,36 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; +import { CommonModule } from '@angular/common'; + +import { GoSearchComponent } from './go-search.component'; + +import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; + +describe('GoSearchComponent', () => { + let component: GoSearchComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoSearchComponent ], + imports: [ + CommonModule, + GoIconModule, + GoLoaderModule, + ReactiveFormsModule + ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoSearchComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.ts b/projects/go-lib/src/lib/components/go-search/go-search.component.ts new file mode 100644 index 000000000..98a9e3578 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.ts @@ -0,0 +1,82 @@ +import { Component, ElementRef, HostListener, OnInit } from '@angular/core'; +import { AnimationEvent } from '@angular/animations'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { debounceTime, distinctUntilChanged } from 'rxjs/operators'; + +import { searchLoaderAnim, searchResultsAnim } from '../../animations/search.animation'; +import { GoSearchService } from './go-search.service'; + +@Component({ + selector: 'go-search', + templateUrl: './go-search.component.html', + styleUrls: ['./go-search.component.scss'], + animations: [searchLoaderAnim, searchResultsAnim] +}) +export class GoSearchComponent implements OnInit { + + goSearchForm: FormGroup; + searchActive: boolean = false; + resultsOverflow: string = 'hidden'; + + @HostListener('document:click') onDocumentClick(event) { + this.closeSearchEvent(event); + } + + constructor( + public goSearchService: GoSearchService, + private elementRef: ElementRef, + private fb: FormBuilder + ) { + this.goSearchForm = this.fb.group({ + term: '' + }); + } + + ngOnInit(): void { + this.goSearchForm.valueChanges.pipe( + debounceTime(500), + distinctUntilChanged() + ).subscribe(changes => { + if (changes['term'].length >= this.goSearchService.termLength) { + this.goSearchService.showNoResultsMessage = false; + this.goSearchService.showLoader = true; + this.goSearchService.updateSearchTerm(changes['term']); + } else { + this.goSearchService.showNoResultsMessage = false; + this.goSearchService.hasResults = false; + this.goSearchService.showLoader = false; + } + }); + } + + resultsStarted(event: AnimationEvent): void { + this.resultsOverflow = 'hidden'; + } + + resultsEnded(event: AnimationEvent): void { + this.resultsOverflow = event.toState === null ? 'auto' : 'hidden'; + } + + toggleActive(): void { + this.searchActive = true; + } + + leaveInput(event: any): void { + if (!this.elementRef.nativeElement.contains(event.relatedTarget)) { + this.closeSearch(); + } + } + + closeSearchEvent(event: any): void { + if (event && !this.elementRef.nativeElement.contains(event.target)) { + this.closeSearch(); + } + } + + closeSearch(): void { + this.searchActive = false; + this.goSearchService.hasResults = false; + this.goSearchService.showNoResultsMessage = false; + this.goSearchForm.reset('', {onlySelf: true, emitEvent: false}); + } +} diff --git a/projects/go-lib/src/lib/components/go-search/go-search.module.ts b/projects/go-lib/src/lib/components/go-search/go-search.module.ts new file mode 100644 index 000000000..174a88911 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { ReactiveFormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; + +import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; + +import { GoSearchComponent } from './go-search.component'; + +@NgModule({ + declarations: [GoSearchComponent], + imports: [ + BrowserAnimationsModule, + BrowserModule, + CommonModule, + GoIconModule, + GoLoaderModule, + ReactiveFormsModule + ], + exports: [GoSearchComponent] +}) + +export class GoSearchModule { } diff --git a/projects/go-lib/src/lib/components/go-search/go-search.service.ts b/projects/go-lib/src/lib/components/go-search/go-search.service.ts new file mode 100644 index 000000000..97528cdd5 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.service.ts @@ -0,0 +1,67 @@ +import { Injectable } from '@angular/core'; + +import { Subject } from 'rxjs'; + +@Injectable({ + providedIn: 'root' +}) +export class GoSearchService { + + /** + * Whether or not the service making requests returned results + */ + hasResults: boolean = false; + + /** + * The message to be shown when no results are returned from the server that match the search term + */ + noResultsMessage: string = 'No Results Found'; + + /** + * Whether or not to show the noResultsMessage + */ + showNoResultsMessage: boolean = false; + + /** + * Whether or not to show the loader in the search bar + */ + showLoader: boolean = false; + + /** + * The term entered by the user to search + */ + searchTerm: Subject = new Subject(); + + /** + * Minimum number of characters to trigger a search + */ + termLength: number = 3; + + /** + * Use this method to update the search term + * @param term {string} The search term entered by the user + */ + updateSearchTerm(term: string): void { + this.searchTerm.next(term); + } + + /** + * Use this method when you get a response from + * the server that was successful, **with results** + */ + successResponse(): void { + this.hasResults = true; + this.showLoader = false; + this.showNoResultsMessage = false; + } + + /** + * Use this method when you get a response from + * the server that was successful, but **with no results** + */ + notFoundResponse(): void { + this.hasResults = false; + this.showLoader = false; + this.showNoResultsMessage = true; + } +} diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 75643cd45..6f1a220a5 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -5,6 +5,7 @@ import { GoCardModule } from './components/go-card/go-card.module'; import { GoIconModule } from './components/go-icon/go-icon.module'; import { GoLoaderModule } from './components/go-loader/go-loader.module'; import { GoModalModule } from './components/go-modal/go-modal.module'; +import { GoSearchModule } from './components/go-search/go-search.module'; import { GoSideNavModule } from './components/go-side-nav/go-side-nav.module'; import { GoTableModule } from './components/go-table/go-table.module'; import { GoToastModule } from './components/go-toast/go-toast.module'; @@ -18,6 +19,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoIconModule, GoLoaderModule, GoModalModule, + GoSearchModule, GoSideNavModule, GoTableModule, GoToastModule, @@ -30,6 +32,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoIconModule, GoLoaderModule, GoModalModule, + GoSearchModule, GoSideNavModule, GoTableModule, GoToastModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index e160528fe..455a1be17 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -36,6 +36,11 @@ export * from './lib/components/go-off-canvas/go-off-canvas.component'; export * from './lib/components/go-off-canvas/go-off-canvas.module'; export * from './lib/components/go-off-canvas/go-off-canvas.service'; +// Search +export * from './lib/components/go-search/go-search.component'; +export * from './lib/components/go-search/go-search.module'; +export * from './lib/components/go-search/go-search.service'; + // Side Nav export * from './lib/components/go-side-nav/go-side-nav.module'; export * from './lib/components/go-side-nav/nav-group.model'; diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 1dc558219..57ea07478 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -16,6 +16,15 @@

+
+

Search

+
+ + + +
+
+

Loader

diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index 874af89c7..abdadc835 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -67,13 +67,13 @@ export class AppComponent implements OnInit { totalCount: data.totalCount }); this.tableLoading = false; - }) + }); - setTimeout(() => { - this.goToasterService.toastInfo({ message: 'Check this out'}); - this.goToasterService.toastSuccess({message: 'Check this out' }); - this.goToasterService.toastError({ message: 'Check this out' }); - }, 1500); + // setTimeout(() => { + // this.goToasterService.toastInfo({ message: 'Check this out'}); + // this.goToasterService.toastSuccess({message: 'Check this out' }); + // this.goToasterService.toastError({ message: 'Check this out' }); + // }, 1500); } stopLoaderAnimation() { @@ -92,7 +92,7 @@ export class AppComponent implements OnInit { setTimeout(() => { currentTableConfig.tableData = data.results; currentTableConfig.totalCount = data.totalCount; - + this.tableConfig = currentTableConfig; this.tableLoading = false; }, 2000); diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index c58a8dd2f..5a30b9791 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -12,20 +12,22 @@ import { GoIconModule, GoLoaderModule, GoOffCanvasModule, + GoSearchModule, GoSideNavModule, GoTableModule, - GoToastModule, - GoToasterModule + GoToasterModule, + GoToastModule } from '../../../go-lib/src/public_api'; import { AppComponent } from './app.component'; import { AppService } from './app.service'; - +import { SearchTestComponent } from './components/search-test.component'; @NgModule({ declarations: [ AppComponent, - DummyComponent + DummyComponent, + SearchTestComponent ], imports: [ BrowserModule, @@ -35,6 +37,7 @@ import { AppService } from './app.service'; GoIconModule, GoLoaderModule, GoOffCanvasModule, + GoSearchModule, GoSideNavModule, GoTableModule, GoToastModule, diff --git a/projects/go-tester/src/app/app.service.ts b/projects/go-tester/src/app/app.service.ts index 5684618c5..f33790506 100644 --- a/projects/go-tester/src/app/app.service.ts +++ b/projects/go-tester/src/app/app.service.ts @@ -31,6 +31,14 @@ export class AppService { })); } + getMockSearch(term: string) { + return this.http.get("../assets/MOCK_DATA_1000.json").pipe(map(data => { + return data.filter(item => { + return item.id.toString().includes(term) || item.name.first.includes(term) || item.name.last.includes(term) || item.email.includes(term); + }) + })) + } + /***** Private Methods *****/ private paginateData(paging: GoTablePageConfig, results: any[]) : any[] { return results.slice(paging.offset, paging.offset + paging.perPage); diff --git a/projects/go-tester/src/app/components/search-test.component.html b/projects/go-tester/src/app/components/search-test.component.html new file mode 100644 index 000000000..e60e961ed --- /dev/null +++ b/projects/go-tester/src/app/components/search-test.component.html @@ -0,0 +1,10 @@ + + + + + + + + + +
{{ item.id }}{{ item.name.first }}{{ item.name.last }}{{ item.email }}{{ item.gender }}{{ item.ip_address }}
\ No newline at end of file diff --git a/projects/go-tester/src/app/components/search-test.component.ts b/projects/go-tester/src/app/components/search-test.component.ts new file mode 100644 index 000000000..2088b225d --- /dev/null +++ b/projects/go-tester/src/app/components/search-test.component.ts @@ -0,0 +1,39 @@ +import { Component, OnInit } from '@angular/core'; + +import { GoSearchService } from '../../../../go-lib/src/public_api'; + +import { AppService } from '../app.service'; + +@Component({ + selector: 'app-search-test', + templateUrl: './search-test.component.html' +}) +export class SearchTestComponent implements OnInit { + + results: any[]; + + constructor( + private searchService: GoSearchService, + private appService: AppService + ) { } + + ngOnInit() { + this.searchService.searchTerm.subscribe(searchTerm => { + // this section is dependent upon what the data looks like + // the loader and hasResults should be updated accordingly + this.appService + .getMockSearch(searchTerm) + .subscribe(results => { + setTimeout(() => { + if (results.length === 0) { + this.results = null; + this.searchService.notFoundResponse(); + } else { + this.results = results; + this.searchService.successResponse(); + } + }, 1000); + }); + }); + } +} From 27abdc9f605b327d12cb538fe6be5605ffd84c47 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 23 Jul 2019 09:33:46 -0400 Subject: [PATCH 04/25] Code review revisions --- .../go-search/go-search.component.scss | 7 +++++-- .../go-search/go-search.component.ts | 19 ++++++++++--------- projects/go-tester/src/app/app.component.html | 2 +- 3 files changed, 16 insertions(+), 12 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 014d0addd..7b7d95dac 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 @@ -3,9 +3,12 @@ .go-search { position: relative; + z-index: 1; } .go-search__container { + @include transition(all); + background: $theme-light-bg; border: 1px solid $theme-light-border; border-radius: 1rem; @@ -17,7 +20,6 @@ top: calc(50% - ((1.875rem + 2px) / 2)); // height of input + border, halfed width: 600px; - @include transition(all); &:hover { background: lighten($theme-light-app-bg, 3%); @@ -37,9 +39,10 @@ } .go-search__field { + @include transition(all); + align-items: center; display: flex; - @include transition(all); } .go-search__submit { diff --git a/projects/go-lib/src/lib/components/go-search/go-search.component.ts b/projects/go-lib/src/lib/components/go-search/go-search.component.ts index 98a9e3578..bc24b06b7 100644 --- a/projects/go-lib/src/lib/components/go-search/go-search.component.ts +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.ts @@ -18,16 +18,17 @@ export class GoSearchComponent implements OnInit { searchActive: boolean = false; resultsOverflow: string = 'hidden'; - @HostListener('document:click') onDocumentClick(event) { - this.closeSearchEvent(event); + @HostListener('document:click', ['$event.target']) + onDocumentClick(target: HTMLElement) { + this.closeSearchEvent(target); } constructor( public goSearchService: GoSearchService, private elementRef: ElementRef, - private fb: FormBuilder + private formBuilder: FormBuilder ) { - this.goSearchForm = this.fb.group({ + this.goSearchForm = this.formBuilder.group({ term: '' }); } @@ -61,19 +62,19 @@ export class GoSearchComponent implements OnInit { this.searchActive = true; } - leaveInput(event: any): void { - if (!this.elementRef.nativeElement.contains(event.relatedTarget)) { + leaveInput(event: FocusEvent): void { + if (event.relatedTarget && !this.elementRef.nativeElement.contains(event.relatedTarget)) { this.closeSearch(); } } - closeSearchEvent(event: any): void { - if (event && !this.elementRef.nativeElement.contains(event.target)) { + private closeSearchEvent(target: HTMLElement): void { + if (!this.elementRef.nativeElement.contains(target)) { this.closeSearch(); } } - closeSearch(): void { + private closeSearch(): void { this.searchActive = false; this.goSearchService.hasResults = false; this.goSearchService.showNoResultsMessage = false; diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 57ea07478..f5be67e60 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -18,7 +18,7 @@

Search

-
+
From 2102797a9bacd657998e4ef560e1cb61b4e78c74 Mon Sep 17 00:00:00 2001 From: Jared Storm Date: Tue, 23 Jul 2019 13:15:39 -0400 Subject: [PATCH 05/25] Adds all files necessary for GoIconButtonComponent (#57) * Adds all files necessary for GoIconButtonComponent Creates a component for button with icons with no text. --- .../go-icon-button.component.html | 11 ++++++++++ .../go-icon-button.component.scss | 19 ++++++++++++++++++ .../go-icon-button.component.ts | 16 +++++++++++++++ .../go-icon-button/go-icon-button.module.ts | 20 +++++++++++++++++++ projects/go-lib/src/lib/go-shared.module.ts | 3 +++ projects/go-lib/src/public_api.ts | 4 ++++ projects/go-tester/src/app/app.component.html | 4 ++++ projects/go-tester/src/app/app.module.ts | 2 ++ 8 files changed, 79 insertions(+) create mode 100644 projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html create mode 100644 projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss create mode 100644 projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts create mode 100644 projects/go-lib/src/lib/components/go-icon-button/go-icon-button.module.ts diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html new file mode 100644 index 000000000..4813a97b8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss new file mode 100644 index 000000000..6d105ee7d --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss @@ -0,0 +1,19 @@ +@import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; + +.go-icon-button { + @include transition(background-color); + + background: $theme-light-bg; + border: 0; + border-radius: $global-radius--round; + box-shadow: $global-box-shadow; + color: $theme-light-color; + cursor: pointer; + display: inline-flex; + padding: .5rem; + + &:hover { + background-color: $theme-light-bg-hover; + } +} diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts new file mode 100644 index 000000000..31c95baaf --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts @@ -0,0 +1,16 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'go-icon-button', + templateUrl: './go-icon-button.component.html' +}) +export class GoIconButtonComponent { + @Input() buttonDisabled: boolean; + @Input() buttonIcon: string; + + @Output() handleClick = new EventEmitter(); + + public clicked(): void { + this.handleClick.emit(); + } +} \ No newline at end of file diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.module.ts b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.module.ts new file mode 100644 index 000000000..626ac1f38 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.module.ts @@ -0,0 +1,20 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GoIconModule } from '../go-icon/go-icon.module'; + +import { GoIconButtonComponent } from './go-icon-button.component'; + +@NgModule({ + declarations: [ + GoIconButtonComponent + ], + imports: [ + CommonModule, + GoIconModule + ], + exports: [ + GoIconButtonComponent + ] +}) +export class GoIconButtonModule { } \ No newline at end of file diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index 6f1a220a5..c824b1535 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -9,6 +9,7 @@ import { GoSearchModule } from './components/go-search/go-search.module'; import { GoSideNavModule } from './components/go-side-nav/go-side-nav.module'; import { GoTableModule } from './components/go-table/go-table.module'; import { GoToastModule } from './components/go-toast/go-toast.module'; +import { GoIconButtonModule } from './components/go-icon-button/go-icon-button.module'; import { GoToasterModule } from './components/go-toaster/go-toaster.module'; @NgModule({ @@ -16,6 +17,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoAccordionModule, GoButtonModule, GoCardModule, + GoIconButtonModule, GoIconModule, GoLoaderModule, GoModalModule, @@ -29,6 +31,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoAccordionModule, GoButtonModule, GoCardModule, + GoIconButtonModule, GoIconModule, GoLoaderModule, GoModalModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 455a1be17..880e5c5da 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -22,6 +22,10 @@ export * from './lib/components/go-card/go-card.module'; export * from './lib/components/go-icon/go-icon.component' export * from './lib/components/go-icon/go-icon.module'; +// Icon Button +export * from './lib/components/go-icon-button/go-icon-button.component' +export * from './lib/components/go-icon-button/go-icon-button.module'; + // Loader export * from './lib/components/go-loader/go-loader.component'; export * from './lib/components/go-loader/go-loader.module'; diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index f5be67e60..da42b0465 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -62,6 +62,10 @@

Buttons

Dark
+
+

Icon Button

+ +

Off Canvas

diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 5a30b9791..91f6c91fb 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -9,6 +9,7 @@ import { GoButtonComponent, GoButtonModule, GoIconComponent, + GoIconButtonModule, GoIconModule, GoLoaderModule, GoOffCanvasModule, @@ -35,6 +36,7 @@ import { SearchTestComponent } from './components/search-test.component'; HttpClientModule, GoButtonModule, GoIconModule, + GoIconButtonModule, GoLoaderModule, GoOffCanvasModule, GoSearchModule, From 92f4cc00460d8da2943a9fcfc7ce1ef7cdc2cd0b Mon Sep 17 00:00:00 2001 From: jaredami Date: Wed, 24 Jul 2019 12:00:10 -0400 Subject: [PATCH 06/25] Add title attribute to go-icon-button --- .../lib/components/go-icon-button/go-icon-button.component.html | 1 + .../lib/components/go-icon-button/go-icon-button.component.ts | 1 + projects/go-tester/src/app/app.component.html | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html index 4813a97b8..1afdbfa8d 100644 --- a/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html @@ -2,6 +2,7 @@ class="go-icon-button" (click)="clicked()" [disabled]="buttonDisabled" + [title]="buttonTitle" type="button" > Buttons

Icon Button

- +
From fc743b99152b03b875f8f45da6e252102002aa37 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Tue, 9 Jul 2019 15:38:54 -0400 Subject: [PATCH 07/25] Init commit of go-layout --- .../go-lib/src/lib/animations/_configs.ts | 2 + .../src/lib/animations/fade.animation.ts | 8 +-- .../lib/animations/off-canvas.animation.ts | 4 +- .../src/lib/animations/route.animation.ts | 31 ++++++++++ projects/go-lib/src/lib/animations/toasts.ts | 6 +- .../go-layout/go-layout.component.html | 20 +++++++ .../go-layout/go-layout.component.scss | 57 +++++++++++++++++++ .../go-layout/go-layout.component.spec.ts | 25 ++++++++ .../go-layout/go-layout.component.ts | 35 ++++++++++++ .../components/go-layout/go-layout.module.ts | 44 ++++++++++++++ projects/go-lib/src/lib/go-shared.module.ts | 3 + projects/go-lib/src/public_api.ts | 6 +- .../go-tester/src/app/app-routing.module.ts | 22 +++++++ projects/go-tester/src/app/app.component.html | 2 +- projects/go-tester/src/app/app.component.ts | 17 +++++- projects/go-tester/src/app/app.guard.ts | 18 ++++++ projects/go-tester/src/app/app.module.ts | 20 +++++-- .../test-page-1/test-page-1.component.html | 12 ++++ .../test-page-1/test-page-1.component.ts | 42 ++++++++++++++ .../test-page-2/test-page-2.component.html | 11 ++++ .../test-page-2/test-page-2.component.scss | 8 +++ .../test-page-2/test-page-2.component.ts | 14 +++++ projects/go-tester/src/styles.scss | 54 ++++++++++++++++++ 23 files changed, 444 insertions(+), 17 deletions(-) create mode 100644 projects/go-lib/src/lib/animations/_configs.ts create mode 100644 projects/go-lib/src/lib/animations/route.animation.ts create mode 100644 projects/go-lib/src/lib/components/go-layout/go-layout.component.html create mode 100644 projects/go-lib/src/lib/components/go-layout/go-layout.component.scss create mode 100644 projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts create mode 100644 projects/go-lib/src/lib/components/go-layout/go-layout.component.ts create mode 100644 projects/go-lib/src/lib/components/go-layout/go-layout.module.ts create mode 100644 projects/go-tester/src/app/app-routing.module.ts create mode 100644 projects/go-tester/src/app/app.guard.ts create mode 100644 projects/go-tester/src/app/components/test-page-1/test-page-1.component.html create mode 100644 projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts create mode 100644 projects/go-tester/src/app/components/test-page-2/test-page-2.component.html create mode 100644 projects/go-tester/src/app/components/test-page-2/test-page-2.component.scss create mode 100644 projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts diff --git a/projects/go-lib/src/lib/animations/_configs.ts b/projects/go-lib/src/lib/animations/_configs.ts new file mode 100644 index 000000000..f307ca860 --- /dev/null +++ b/projects/go-lib/src/lib/animations/_configs.ts @@ -0,0 +1,2 @@ +export const timing = '.5s '; +export const easing = 'cubic-bezier(.25, .8, .25, 1)'; \ No newline at end of file diff --git a/projects/go-lib/src/lib/animations/fade.animation.ts b/projects/go-lib/src/lib/animations/fade.animation.ts index f1b5cf997..128a97938 100644 --- a/projects/go-lib/src/lib/animations/fade.animation.ts +++ b/projects/go-lib/src/lib/animations/fade.animation.ts @@ -6,7 +6,7 @@ import { trigger } from '@angular/animations'; -const timing = '.5s cubic-bezier(.25, .8, .25, 1)'; +import { timing, easing } from './_configs'; export const fadeAnimation = trigger('fade', [ state('in', style({ @@ -18,7 +18,7 @@ export const fadeAnimation = trigger('fade', [ visibility: 'hidden' })), transition('in <=> out', [ - animate(timing) + animate(timing + easing) ]) ]); @@ -27,12 +27,12 @@ export const fadeTemplateAnimation = trigger('fadeTemplate', [ style({ opacity: 0 }), - animate(timing, style({ + animate(timing + easing, style({ opacity: 1 })) ]), transition(':leave', [ - animate(timing, style({ + animate(timing + easing, style({ opacity: 0 })) ]) diff --git a/projects/go-lib/src/lib/animations/off-canvas.animation.ts b/projects/go-lib/src/lib/animations/off-canvas.animation.ts index 599fbaada..2bcea266e 100644 --- a/projects/go-lib/src/lib/animations/off-canvas.animation.ts +++ b/projects/go-lib/src/lib/animations/off-canvas.animation.ts @@ -6,6 +6,8 @@ import { trigger } from '@angular/animations'; +import { timing, easing } from './_configs'; + export const offCanvasAnimation = trigger('offCanvas', [ state('slideIn', style({ transform: 'translateX(-300px)' @@ -15,6 +17,6 @@ export const offCanvasAnimation = trigger('offCanvas', [ visibility: 'hidden' })), transition('slideIn <=> slideOut', [ - animate('.5s cubic-bezier(.25, .8, .25, 1)') + animate(timing + easing) ]) ]); diff --git a/projects/go-lib/src/lib/animations/route.animation.ts b/projects/go-lib/src/lib/animations/route.animation.ts new file mode 100644 index 000000000..1be4da04c --- /dev/null +++ b/projects/go-lib/src/lib/animations/route.animation.ts @@ -0,0 +1,31 @@ +import { trigger, query, animate, transition, style } from '@angular/animations'; + +import { easing, timing } from './_configs'; + +export const routerAnimation = +trigger('routerAnimation', [ + transition('* <=> *', [ + query(':enter', + [ + style({ opacity: 0 }) + ], + { optional:true } + ), + + query(':leave', + [ + style({ opacity: 1 }), + animate(timing + easing, style({ opacity: 0, transform: 'scale(0.95)' })) + ], + { optional: true } + ), + + query(':enter', + [ + style({ opacity: 0, transform: 'scale(0.95)' }), + animate(timing + easing, style({ opacity: 1, transform: 'scale(1)' })) + ], + { optional: true } + ) + ]) +]); diff --git a/projects/go-lib/src/lib/animations/toasts.ts b/projects/go-lib/src/lib/animations/toasts.ts index 8b6631a8a..caeb9f2c1 100644 --- a/projects/go-lib/src/lib/animations/toasts.ts +++ b/projects/go-lib/src/lib/animations/toasts.ts @@ -5,7 +5,7 @@ import { trigger } from '@angular/animations'; -const timing = '.5s cubic-bezier(.25, .8, .25, 1)'; +import { timing, easing } from './_configs'; export const toastAnimation = trigger('toastAnimation', [ transition(':enter', [ @@ -13,13 +13,13 @@ export const toastAnimation = trigger('toastAnimation', [ height: 0, opacity: 0 }), - animate(timing, style({ + animate(timing + easing, style({ height: '*', opacity: 1 })) ]), transition(':leave', [ - animate(timing, style({ + animate(timing + easing, style({ paddingTop: 0, opacity: 0, height: 0 diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html new file mode 100644 index 000000000..672eb0b49 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html @@ -0,0 +1,20 @@ +
+
+ header +
+
+ +
+ +
+ +
+
+
+
+ + + + diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss new file mode 100644 index 000000000..731cdb6be --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss @@ -0,0 +1,57 @@ +@import '~@tangoe/gosheets/base/_variables'; + +body { + margin: 0; +} + +.go-layout { + background: $theme-light-app-bg; + display: flex; + flex-direction: column; + max-height: 100vh; + min-height: 100vh; + overflow: hidden; +} + +.go-layout__nav { + background: $theme-dark-bg; + border-right: 1px solid $theme-dark-border; + color: $theme-dark-color; + + a { + color: $theme-dark-color !important; + display: inline-block; + padding: 1rem; + } +} + +.go-layout__content { + display: flex; + flex-grow: 1; +} + +.go-layout__route-container { + display: flex; + flex-grow: 1; + position: relative; +} + +.go-layout__route-container-outlet ~ * { + height: 100%; + overflow-x: hidden; + overflow-y: auto; + padding: 3rem; + position: absolute; + width: 100%; +} + +.go-route-loader { + align-items: center; + background: transparentize($theme-light-app-bg, 0.25); + display: flex; + height: 100%; + justify-content: center; + overflow: hidden; + position: absolute; + width: 100%; +} diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts new file mode 100644 index 000000000..caed803a6 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoLayoutComponent } from './go-layout.component'; + +describe('GoLayoutComponent', () => { + let component: GoLayoutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoLayoutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.component.ts new file mode 100644 index 000000000..36465dc48 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.ts @@ -0,0 +1,35 @@ +import { Component, ViewEncapsulation } from '@angular/core'; +import { Router, RouterOutlet, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router'; + +import { routerAnimation } from '../../animations/route.animation'; +import { fadeTemplateAnimation } from '../../animations/fade.animation'; + +@Component({ + selector: 'go-layout', + templateUrl: './go-layout.component.html', + styleUrls: ['./go-layout.component.scss'], + animations: [routerAnimation, fadeTemplateAnimation], + encapsulation: ViewEncapsulation.None +}) +export class GoLayoutComponent { + + routeLoader: boolean = false; + + constructor(private router: Router) { } + + ngOnInit() { + this.router.events.subscribe(event => { + if (event instanceof NavigationStart) { + this.routeLoader = true; + } + if (event instanceof (NavigationEnd || NavigationCancel || NavigationError)) { + this.routeLoader = false; + } + }) + } + + routeAnimation(outlet: RouterOutlet) { + return outlet.isActivated ? outlet.activatedRoute : ''; + } + +} diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts new file mode 100644 index 000000000..2bb6bdd17 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts @@ -0,0 +1,44 @@ +import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { BrowserModule } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; +import { RouterModule } from '@angular/router'; + +import { GoLoaderModule } from '../go-loader/go-loader.module'; +import { GoModalModule } from '../go-modal/go-modal.module'; +import { GoOffCanvasModule } from '../go-off-canvas/go-off-canvas.module'; +import { GoToasterModule } from '../go-toaster/go-toaster.module'; + +import { GoModalService } from '../go-modal/go-modal.service'; +import { GoOffCanvasService } from '../go-off-canvas/go-off-canvas.service'; +import { GoToasterService } from '../go-toaster/go-toaster.service'; + +import { GoLayoutComponent } from './go-layout.component'; + +@NgModule({ + declarations: [ + GoLayoutComponent + ], + imports: [ + // Angular + BrowserAnimationsModule, + BrowserModule, + CommonModule, + RouterModule, + // Goponents + GoLoaderModule, + GoModalModule, + GoOffCanvasModule, + GoToasterModule + ], + exports: [ + GoLayoutComponent + ], + providers: [ + GoModalService, + GoOffCanvasService, + GoToasterService + ] +}) + +export class GoLayoutModule { } diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index c824b1535..6a8c7d383 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -3,6 +3,7 @@ import { GoAccordionModule } from './components/go-accordion/go-accordion.modul import { GoButtonModule } from './components/go-button/go-button.module'; import { GoCardModule } from './components/go-card/go-card.module'; import { GoIconModule } from './components/go-icon/go-icon.module'; +import { GoLayoutModule } from './components/go-layout/go-layout.module'; import { GoLoaderModule } from './components/go-loader/go-loader.module'; import { GoModalModule } from './components/go-modal/go-modal.module'; import { GoSearchModule } from './components/go-search/go-search.module'; @@ -19,6 +20,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoCardModule, GoIconButtonModule, GoIconModule, + GoLayoutModule, GoLoaderModule, GoModalModule, GoSearchModule, @@ -33,6 +35,7 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoCardModule, GoIconButtonModule, GoIconModule, + GoLayoutModule, GoLoaderModule, GoModalModule, GoSearchModule, diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 880e5c5da..897c44283 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -23,9 +23,13 @@ export * from './lib/components/go-icon/go-icon.component' export * from './lib/components/go-icon/go-icon.module'; // Icon Button -export * from './lib/components/go-icon-button/go-icon-button.component' +export * from './lib/components/go-icon-button/go-icon-button.component'; export * from './lib/components/go-icon-button/go-icon-button.module'; +// Layout +export * from './lib/components/go-layout/go-layout.component'; +export * from './lib/components/go-layout/go-layout.module'; + // Loader export * from './lib/components/go-loader/go-loader.component'; export * from './lib/components/go-loader/go-loader.module'; diff --git a/projects/go-tester/src/app/app-routing.module.ts b/projects/go-tester/src/app/app-routing.module.ts new file mode 100644 index 000000000..796e92b83 --- /dev/null +++ b/projects/go-tester/src/app/app-routing.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { TestPage1Component } from './components/test-page-1/test-page-1.component'; +import { TestPage2Component } from './components/test-page-2/test-page-2.component'; +import { AppComponent } from './app.component'; +import { AppGuard } from './app.guard'; + +const routes: Routes = [ + { path: '', component: TestPage1Component, canActivate: [AppGuard] }, + { path: 'test-page-2', component: TestPage2Component, canActivate: [AppGuard]} +]; + +@NgModule({ + imports: [ + RouterModule.forRoot(routes) + ], + exports: [ + RouterModule + ] +}) +export class AppRoutesModule { } diff --git a/projects/go-tester/src/app/app.component.html b/projects/go-tester/src/app/app.component.html index 1913980bc..15fb6aa04 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -107,4 +107,4 @@

Table

- + \ No newline at end of file diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index abdadc835..de9498d72 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -9,9 +9,10 @@ import { GoIconComponent, GoLoaderComponent, GoSideNavService, - GoToasterService, NavGroup, - NavItem + NavItem, + GoModalService, + GoToasterService } from '../../../go-lib/src/public_api'; @Component({ @@ -56,7 +57,8 @@ export class AppComponent implements OnInit { private appService: AppService, private goToasterService: GoToasterService, private goOffCanvasService: GoOffCanvasService, - private goSideNavService: GoSideNavService + private goSideNavService: GoSideNavService, + private goModalService: GoModalService ) { } ngOnInit() { @@ -112,4 +114,13 @@ export class AppComponent implements OnInit { toggleSideMenu(): void { this.goSideNavService.toggleNav(); } + + openModal() : void { + this.goModalService.openModal( + GoIconComponent, + { + icon: 'alarm' + } + ); + } } diff --git a/projects/go-tester/src/app/app.guard.ts b/projects/go-tester/src/app/app.guard.ts new file mode 100644 index 000000000..d6d289257 --- /dev/null +++ b/projects/go-tester/src/app/app.guard.ts @@ -0,0 +1,18 @@ +import { Injectable } from '@angular/core'; +import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; + +import { Observable } from 'rxjs'; + +@Injectable() +export class AppGuard implements CanActivate { + + constructor(private router: Router) { } + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable { + return Observable.create(observer => { + setTimeout(() => { + observer.next(true); + }, 1000); + }) + } +} diff --git a/projects/go-tester/src/app/app.module.ts b/projects/go-tester/src/app/app.module.ts index 91f6c91fb..20ed23ac8 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -3,14 +3,15 @@ import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { HttpClientModule } from '@angular/common/http'; import { AppRoutingModule } from './app.router'; -import { DummyComponent } from './dummy.component' +import { DummyComponent } from './dummy.component'; import { GoButtonComponent, GoButtonModule, - GoIconComponent, GoIconButtonModule, + GoIconComponent, GoIconModule, + GoLayoutModule, GoLoaderModule, GoOffCanvasModule, GoSearchModule, @@ -20,23 +21,33 @@ import { GoToastModule } from '../../../go-lib/src/public_api'; +import { AppRoutesModule } from './app-routing.module'; + import { AppComponent } from './app.component'; import { AppService } from './app.service'; import { SearchTestComponent } from './components/search-test.component'; +import { TestPage1Component } from './components/test-page-1/test-page-1.component'; +import { TestPage2Component } from './components/test-page-2/test-page-2.component'; +import { AppGuard } from './app.guard'; + @NgModule({ declarations: [ AppComponent, DummyComponent, - SearchTestComponent + SearchTestComponent, + TestPage1Component, + TestPage2Component ], imports: [ + AppRoutesModule, BrowserModule, BrowserAnimationsModule, HttpClientModule, GoButtonModule, GoIconModule, GoIconButtonModule, + GoLayoutModule, GoLoaderModule, GoOffCanvasModule, GoSearchModule, @@ -47,7 +58,8 @@ import { SearchTestComponent } from './components/search-test.component'; AppRoutingModule ], providers: [ - AppService + AppService, + AppGuard ], entryComponents: [ GoButtonComponent, diff --git a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html new file mode 100644 index 000000000..67baf477c --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html @@ -0,0 +1,12 @@ + + + + + + + + \ No newline at end of file diff --git a/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts new file mode 100644 index 000000000..12198f540 --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit, Input } from '@angular/core'; +import { GoTableConfig, GoTableDataSource } from '../../../../../go-lib/src/public_api'; + +import { AppService } from '../../app.service'; + + +@Component({ + selector: 'test-page-1', + templateUrl: './test-page-1.component.html' +}) +export class TestPage1Component implements OnInit { + + tableConfig: GoTableConfig; + tableLoading: boolean = true; + + constructor(private appService: AppService) { } + + ngOnInit() { + this.appService.getMockData(new GoTableConfig()).subscribe(data => { + this.tableConfig = new GoTableConfig({ + dataMode: GoTableDataSource.server, + tableData: data.results, + totalCount: data.totalCount + }); + this.tableLoading = false; + }) + } + + handleTableChange(currentTableConfig: GoTableConfig) : void { + if (this.tableConfig.dataMode === GoTableDataSource.server) { + this.appService.getMockData(currentTableConfig).subscribe(data => { + setTimeout(() => { + currentTableConfig.tableData = data.results; + currentTableConfig.totalCount = data.totalCount; + + this.tableConfig = currentTableConfig; + this.tableLoading = false; + }, 2000); + }); + } + } +} diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html new file mode 100644 index 000000000..da7ef590c --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html @@ -0,0 +1,11 @@ +
+
+
test2
+
+
+
test2
+
+
+
test2
+
+
diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.scss b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.scss new file mode 100644 index 000000000..3fb768922 --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.scss @@ -0,0 +1,8 @@ +.test-div-block { + background: #343536; + color: white; + justify-content: center; + align-items: center; + display: flex; + height: 400px; +} diff --git a/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts new file mode 100644 index 000000000..083d8aadb --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'test-page-2', + templateUrl: './test-page-2.component.html', + styleUrls: ['./test-page-2.component.scss'] +}) +export class TestPage2Component implements OnInit { + + constructor() { } + + ngOnInit() { + } +} diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss index f490dfc6d..679ecb5b7 100644 --- a/projects/go-tester/src/styles.scss +++ b/projects/go-tester/src/styles.scss @@ -1,6 +1,60 @@ /* You can add global styles to this file, and also import other style files */ @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); @import url('https://fonts.googleapis.com/icon?family=Material+Icons'); + +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +* { + box-sizing: border-box; +} + + @import "~@tangoe/gosheets/gosheets"; body { From ab9ec63a8107721b4a7fa312449180b934fe69b0 Mon Sep 17 00:00:00 2001 From: Graham Hency Date: Mon, 22 Jul 2019 13:29:28 -0400 Subject: [PATCH 08/25] Added header --- .../go-header/go-header.component.html | 14 +++++ .../go-header/go-header.component.scss | 61 +++++++++++++++++++ .../go-header/go-header.component.spec.ts | 25 ++++++++ .../go-header/go-header.component.ts | 17 ++++++ .../components/go-header/go-header.module.ts | 21 +++++++ .../go-layout/go-layout.component.html | 4 +- .../go-layout/go-layout.component.scss | 1 + .../components/go-layout/go-layout.module.ts | 2 + projects/go-lib/src/lib/go-shared.module.ts | 3 + projects/go-lib/src/public_api.ts | 6 +- projects/go-tester/src/app/app.component.html | 55 ++++++++++------- projects/go-tester/src/app/app.module.ts | 2 + 12 files changed, 184 insertions(+), 27 deletions(-) create mode 100644 projects/go-lib/src/lib/components/go-header/go-header.component.html create mode 100644 projects/go-lib/src/lib/components/go-header/go-header.component.scss create mode 100644 projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts create mode 100644 projects/go-lib/src/lib/components/go-header/go-header.component.ts create mode 100644 projects/go-lib/src/lib/components/go-header/go-header.module.ts 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 new file mode 100644 index 000000000..277499768 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -0,0 +1,14 @@ +
+
+ +
+ +
+
+
+ +
+
+ +
+
\ No newline at end of file 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 new file mode 100644 index 000000000..a4b574598 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -0,0 +1,61 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '~@tangoe/gosheets/base/_mixins'; + +.go-header { + background: $theme-light-bg; + box-shadow: $global-box-shadow; + display: flex; + height: 4rem; +} + +.go-header__menu { + @include transition(background); + + align-items: center; + border-radius: 50%; + cursor: pointer; + display: flex; + flex-shrink: 0; + font-size: 1.5rem; + justify-content: center; + width: 3rem; + + &:hover { + background: $theme-light-bg-hover; + } +} + +.go-header__logo-container { + align-items: center; + display: flex; + flex: 1; + justify-content: flex-start; + padding-left: 1rem; +} + +.go-header__logo { + display: block; + flex: 0; + max-height: 100%; + max-width: 100%; +} + +.go-header__left { + display: flex; + padding: 0.5rem; + width: 15.5rem; +} + +.go-header__middle { + align-items: center; + display: flex; + flex: 1; + justify-content: flex-start; + padding: 0 1rem; +} + +.go-header__right { + align-items: center; + display: flex; + padding: 0 1rem; +} 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 new file mode 100644 index 000000000..6454e422a --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoHeaderComponent } from './go-header.component'; + +describe('GoHeaderComponent', () => { + let component: GoHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoHeaderComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); 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 new file mode 100644 index 000000000..67b05022e --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -0,0 +1,17 @@ +import { Component, OnInit, Input } from '@angular/core'; + +@Component({ + selector: 'go-header', + templateUrl: './go-header.component.html', + styleUrls: ['./go-header.component.scss'] +}) +export class GoHeaderComponent implements OnInit { + + @Input() logo: string = ''; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/projects/go-lib/src/lib/components/go-header/go-header.module.ts b/projects/go-lib/src/lib/components/go-header/go-header.module.ts new file mode 100644 index 000000000..a048fc685 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.module.ts @@ -0,0 +1,21 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GoIconModule} from '../go-icon/go-icon.module'; + +import { GoHeaderComponent } from './go-header.component'; + +@NgModule({ + declarations: [ + GoHeaderComponent + ], + imports: [ + CommonModule, + GoIconModule + ], + exports: [ + GoHeaderComponent + ] +}) + +export class GoHeaderModule { } diff --git a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html index 672eb0b49..93379488b 100644 --- a/projects/go-lib/src/lib/components/go-layout/go-layout.component.html +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html @@ -1,7 +1,5 @@
-
- header -
+