diff --git a/package-lock.json b/package-lock.json index 2a5e29c1e..24a8dc8c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2560,6 +2560,11 @@ } } }, + "classlist.js": { + "version": "1.1.20150312", + "resolved": "https://registry.npmjs.org/classlist.js/-/classlist.js-1.1.20150312.tgz", + "integrity": "sha1-HXCEL3Ai8I2awIbOaeWyUPLFd4k=" + }, "clean-css": { "version": "4.2.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.1.tgz", @@ -14038,6 +14043,11 @@ "minimalistic-assert": "^1.0.0" } }, + "web-animations-js": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/web-animations-js/-/web-animations-js-2.3.2.tgz", + "integrity": "sha512-TOMFWtQdxzjWp8qx4DAraTWTsdhxVSiWa6NkPFSaPtZ1diKUxTn4yTix73A1euG1WbSOMMPcY51cnjTIHrGtDA==" + }, "webdriver-js-extender": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz", diff --git a/package.json b/package.json index a20871036..0d08ad261 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,11 @@ "@angular/platform-browser-dynamic": "~7.2.15", "@angular/router": "~7.2.15", "@tangoe/gosheets": "^1.0.0", + "classlist.js": "^1.1.20150312", "core-js": "^2.5.4", "npm": "^6.10.1", "rxjs": "~6.5.2", + "web-animations-js": "^2.3.2", "zone.js": "~0.8.26" }, "devDependencies": { 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..641c60861 --- /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)'; diff --git a/projects/go-lib/src/lib/animations/fade.animation.ts b/projects/go-lib/src/lib/animations/fade.animation.ts index f1b5cf997..861d341b0 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 { easing, timing } 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,13 +27,13 @@ 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 })) ]) -]) \ No newline at end of file +]); 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..5654395bc 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 { easing, timing } 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..1bc72bd5a --- /dev/null +++ b/projects/go-lib/src/lib/animations/route.animation.ts @@ -0,0 +1,37 @@ +import { + animate, + query, + style, + transition, + trigger +} 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/search.animation.ts b/projects/go-lib/src/lib/animations/search.animation.ts new file mode 100644 index 000000000..b87d56275 --- /dev/null +++ b/projects/go-lib/src/lib/animations/search.animation.ts @@ -0,0 +1,59 @@ +import { + animate, + style, + transition, + trigger +} from '@angular/animations'; + +import { easing, timing } from './_configs'; + +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', [ + style({ + padding: '2rem' + }), + 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', + margin: '1rem 0 0.5rem 0' + }), + animate(timing + ' ' + easing, style({ + height: 0, + margin: 0, + opacity: 0 + })) + ]) +]); diff --git a/projects/go-lib/src/lib/animations/toasts.ts b/projects/go-lib/src/lib/animations/toasts.ts index 8b6631a8a..ba4d0cf6b 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 { easing, timing } from './_configs'; export const toastAnimation = trigger('toastAnimation', [ transition(':enter', [ @@ -13,16 +13,16 @@ 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 })) ]) -]); \ No newline at end of file +]); diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss index f81ca96d7..546d8e4f6 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion-panel.component.scss @@ -121,6 +121,33 @@ } } +.go-action-sheet__go-accordion { + .go-accordion { + border: none; + } + + .go-accordion-panel__title-bar { + font-size: 1rem; + padding: 1rem 0; + } + + .go-accordion-panel__control-icon { + font-size: 1rem; + } + + go-accordion-panel:not(:first-of-type) .go-accordion-panel__title-bar, + go-accordion-panel:last-of-type .go-accordion-panel__title-bar { + border-top: none; + } + + .go-accordion-panel { + &:first-of-type::before, + .go-accordion-panel__title-bar { + border-radius: 0; + } + } +} + go-accordion-panel { &:last-of-type { .go-accordion-panel::before { @@ -201,7 +228,11 @@ go-accordion-panel { // ----- Utility Classes .go-accordion--slim { - .go-accordion-panel__title-bar { + .go-accordion-panel__title-icon { font-size: 1rem; } + + &:hover { + background: $theme-light-bg-hover; + } } diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.html b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.html index c0ecaf65f..58e6af4a4 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.html +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.html @@ -1,3 +1,3 @@ -
+
diff --git a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.ts b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.ts index 140e15540..befdcad24 100644 --- a/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.ts +++ b/projects/go-lib/src/lib/components/go-accordion/go-accordion.component.ts @@ -11,6 +11,7 @@ export class GoAccordionComponent implements OnInit, AfterContentInit { @Input() expandAll: boolean = false; @Input() multiExpand: boolean = false; @Input() showIcons: boolean = false; + @Input() slim: boolean = false; @Input() theme: string = 'light'; activeTheme: string; @@ -20,7 +21,6 @@ export class GoAccordionComponent implements OnInit, AfterContentInit { constructor() { } ngOnInit() { - this.setActiveTheme(); this.multiExpand = this.expandAll || this.multiExpand; } @@ -57,8 +57,11 @@ export class GoAccordionComponent implements OnInit, AfterContentInit { panel.expanded = false; } - setActiveTheme() { - this.activeTheme = 'go-accordion--theme-' + this.theme; + accordionClasses(): object { + return { + 'go-accordion--theme-light': this.theme === 'light' && !this.slim, + 'go-accordion--theme-dark': this.theme === 'dark' && !this.slim, + 'go-accordion--slim': this.slim + } } - } diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.html b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.html new file mode 100644 index 000000000..906f57d55 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.html @@ -0,0 +1,15 @@ +
+
+ +
+ +
+
+
+ +
+
+
+
diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss new file mode 100644 index 000000000..e41e488d8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.scss @@ -0,0 +1,66 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '~@tangoe/gosheets/base/_mixins'; + +.go-action-sheet { + position: relative; +} + +go-action-sheet-button { + display: flex; +} + +.go-action-sheet__scroll-container { + max-height: 375px; + overflow: auto; +} + +.go-action-sheet__content { + border-radius: $global-radius; + overflow: hidden; +} + +.go-action-sheet__content-container { + @include transition; + + background: $theme-light-bg; + border: 1px solid $theme-light-border; + border-radius: $global-radius; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + left: 50%; + opacity: 0; + position: absolute; + top: calc(100% + 50px); + transform: translateX(-50%); + visibility: hidden; + z-index: 300; + + &::before { + @include transition; + + background: $theme-light-bg; + border: 1px solid $theme-light-border; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); + content: " "; + height: 15px; + left: calc(50% - 7.5px); + pointer-events: none; + position: absolute; + top: -7.5px; + transform: rotate(45deg); + width: 15px; + } + + &.go-action-sheet__content-container--active { + opacity: 1; + top: calc(100% + 1rem); + visibility: visible; + } +} + +.go-action-sheet__content-container--shift-left { + transform: translateX(-90%); + + &::before { + left: calc(90% - 7.5px); + } +} diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.spec.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.spec.ts new file mode 100644 index 000000000..27e14bf1a --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoActionSheetComponent } from './go-action-sheet.component'; + +describe('GoActionSheetComponent', () => { + let component: GoActionSheetComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoActionSheetComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoActionSheetComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.ts new file mode 100644 index 000000000..011100a72 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.component.ts @@ -0,0 +1,38 @@ +import { Component, Input, HostListener, ElementRef } from '@angular/core'; +@Component({ + selector: 'go-action-sheet', + templateUrl: './go-action-sheet.component.html', + styleUrls: ['./go-action-sheet.component.scss'] +}) +export class GoActionSheetComponent { + @Input() shiftLeft: boolean = false; + + + @HostListener('document:click', ['$event.target']) + onDocumentClick(target: HTMLElement) { + this.closeActionSheetEvent(target); + } + + showContent = false; + + constructor( + private elementRef: ElementRef, + ) { } + + triggerAS() { + this.showContent = !this.showContent; + } + + containerClass() { + return { + 'go-action-sheet__content-container--active': this.showContent, + 'go-action-sheet__content-container--shift-left': this.shiftLeft + } + } + + private closeActionSheetEvent(target: HTMLElement): void { + if (!this.elementRef.nativeElement.contains(target)) { + this.showContent = false; + } + } +} diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.module.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.module.ts new file mode 100644 index 000000000..25d11d5a6 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-action-sheet.module.ts @@ -0,0 +1,22 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GoIconModule } from '../go-icon/go-icon.module'; +import { GoActionSheetComponent } from './go-action-sheet.component'; +import { GoPanelComponent } from '../go-action-sheet/go-panel/go-panel.component'; +@NgModule({ + declarations: [ + GoActionSheetComponent, + GoPanelComponent + ], + imports: [ + CommonModule, + GoIconModule + ], + exports: [ + GoActionSheetComponent, + GoPanelComponent + ] +}) + +export class GoActionSheetModule { } diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html new file mode 100644 index 000000000..a93dbf912 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html @@ -0,0 +1,20 @@ + + + {{icon}} + + + + + + + diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss new file mode 100644 index 000000000..fd4ba2210 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss @@ -0,0 +1,99 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '~@tangoe/gosheets/base/_mixins'; +$base-medium: #767676 !default; + +.go-panel { + @include transition; + + background: $theme-light-bg; + color: $theme-light-color; + cursor: pointer; + display: flex; + font-size: 1rem; + font-weight: normal; + max-width: 20rem; + position: relative; + text-align: left; + text-decoration: none; + + &:hover { + background: $theme-light-bg-hover; + } + + .material-icons { + font-size: 1rem; + } + + .go-panel__title { + align-items: center; + display: flex; + flex-grow: 1; + white-space: nowrap; + + .go-panel__icon { + display: flex; + flex-direction: column; + justify-content: center; + padding-left: 1rem; + text-align: center; + } + + .go-panel__title-text { + padding: 1rem; + width: 100%; + } + } +} + +.go-panel--danger { + border-top: 1px solid $theme-light-border; + + .material-icons { + color: $ui-color-negative; + } + + .go-panel__title { + .go-panel__title-text { + color: $ui-color-negative; + } + } +} + +.go-panel--header { + color: $base-medium; +} + +.go-action-sheet__title-panel { + .go-panel__title-text { + color: $base-light-secondary; + font-size: 10pt; + letter-spacing: 0.02rem; + text-align: center; + text-transform: uppercase; + } +} + +go-panel.disabled { + .go-panel__title { + opacity: 0.5; + } + + .table-action-sheet__row-hint { + display: block; + } +} + +button { + background: transparent; + border: 0; + padding: 0; + width: 100%; + + &:hover { + background: $theme-light-bg-hover; + } + + &:focus { + outline: none; + } +} diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.spec.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.spec.ts new file mode 100644 index 000000000..9db86db69 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoPanelComponent } from './go-panel.component'; + +describe('GoPanelComponent', () => { + let component: GoPanelComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoPanelComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(GoPanelComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts new file mode 100644 index 000000000..5222f33e5 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts @@ -0,0 +1,30 @@ +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'go-panel', + templateUrl: './go-panel.component.html', + styleUrls: ['./go-panel.component.scss'] +}) +export class GoPanelComponent { + + @Input() danger: boolean; + @Input() showHeader: boolean; + @Input() icon: string; + @Input() externalLink: string; + @Input() panelContent: string; + + @Output() action: EventEmitter = new EventEmitter(); + + constructor() { } + + panelClasses(): object { + return { + 'go-panel--danger': this.danger, + 'go-panel--header': this.showHeader + } + } + + handleAction(): void { + this.action.emit(); + } +} 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..122eba276 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.html @@ -0,0 +1,23 @@ +
+
+ + +
+ +
+
+
+ +
+
+ +
+
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..172a4c8f9 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.scss @@ -0,0 +1,115 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '../../../styles/variables'; +@import '~@tangoe/gosheets/base/_mixins'; + +$breakpoint-header-mobile-small: 500px; + +.go-header { + background: $theme-light-bg; + box-shadow: $global-box-shadow; + display: flex; + height: 4rem; + + @media (max-width: $breakpoint-mobile) { + flex-wrap: wrap; + height: auto; + min-height: 8rem; + } +} + +.go-header__menu { + @include transition(background); + + align-items: center; + align-self: center; + border-radius: 50%; + cursor: pointer; + display: flex; + flex-shrink: 0; + font-size: 1.5rem; + height: calc(#{$side-nav-width--collapsed} - 1rem); + justify-content: center; + user-select: none; + width: calc(#{$side-nav-width--collapsed} - 1rem); + + &:hover { + background: $theme-light-bg-hover; + } +} + +.go-header__logo-container { + align-items: center; + display: flex; + flex: 1; + justify-content: flex-start; + padding: 0.5rem 1rem; + + @media (max-width: $breakpoint-header-mobile-small) { + padding: 0.5rem; + } +} + +.go-header__logo-container--collapsed { + flex-shrink: 1; +} + +.go-header__logo { + display: block; + flex: 0; + height: 100%; + max-width: 100%; +} + +.go-header__left { + @include transition(width); + + display: flex; + padding: 0.5rem; + width: 15.5rem; + + @media (max-width: $breakpoint-mobile) { + height: 4rem; + } +} + +.go-header__left--collapsed { + width: auto; +} + +.go-header__middle { + @include transition(padding); + + align-items: center; + display: flex; + flex: 1; + justify-content: flex-start; + padding: 0 1rem 0 2rem; + + @media (max-width: $breakpoint-mobile) { + flex: auto; + height: 4rem; + order: 2; + width: 100vw; + } +} + +.go-header__middle--collapsed { + padding: 0 1rem; +} + +.go-header__right { + align-items: center; + display: flex; + padding: 0 2rem 0 1rem; + + @media (max-width: $breakpoint-mobile) { + flex: 1; + height: 4rem; + justify-content: flex-end; + padding: 0 1rem; + } + + @media (max-width: $breakpoint-header-mobile-small) { + justify-content: space-between; + } +} 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..6bfbcfc0e --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.spec.ts @@ -0,0 +1,29 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { GoHeaderComponent } from './go-header.component'; +import { GoIconButtonModule } from '../go-icon-button/go-icon-button.module'; + +describe('GoHeaderComponent', () => { + let component: GoHeaderComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoHeaderComponent ], + imports: [ + GoIconButtonModule + ] + }) + .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..21827dcf3 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.component.ts @@ -0,0 +1,46 @@ +import { Component, Input } from '@angular/core'; +import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service'; +import { fromEvent, Observable, Subscription } from 'rxjs'; +import { debounceTime } from 'rxjs/operators'; + +@Component({ + selector: 'go-header', + templateUrl: './go-header.component.html', + styleUrls: ['./go-header.component.scss'] +}) +export class GoHeaderComponent { + + @Input() altText: string = ''; + @Input() logo: string = ''; + + private minWidthBreakpoint = 768; + private resizeObservable: Observable = fromEvent(window, 'resize'); + private resizeSubsciption: Subscription; + + constructor(public sideNavService: GoSideNavService) { + this.setMobileNav(); + this.setupResizeSubscription(); + } + + isNavCollapsed(): boolean { + return window.innerWidth <= this.minWidthBreakpoint ? true : !this.sideNavService.navOpen; + } + + toggleSideMenu(): void { + this.sideNavService.toggleNav(); + } + + private setupResizeSubscription(): void { + this.resizeSubsciption = this.resizeObservable + .pipe(debounceTime(250)) + .subscribe(event => { + this.setMobileNav(); + }); + } + + private setMobileNav(): void { + if (window.innerWidth <= this.minWidthBreakpoint) { + this.sideNavService.navOpen = false; + } + } +} 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..0fb57a052 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-header/go-header.module.ts @@ -0,0 +1,28 @@ +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { GoIconButtonModule} from '../go-icon-button/go-icon-button.module'; +import { GoSideNavModule } from '../go-side-nav/go-side-nav.module'; + +import { GoSideNavService } from '../go-side-nav/go-side-nav/go-side-nav.service'; + +import { GoHeaderComponent } from './go-header.component'; + +@NgModule({ + declarations: [ + GoHeaderComponent + ], + imports: [ + CommonModule, + GoIconButtonModule, + GoSideNavModule + ], + exports: [ + GoHeaderComponent + ], + providers: [ + GoSideNavService + ] +}) + +export class GoHeaderModule { } 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..fe495a9f8 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.html @@ -0,0 +1,13 @@ + 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..f4384a152 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.scss @@ -0,0 +1,22 @@ +@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; + cursor: pointer; + display: inline-flex; + outline: none; + padding: .5rem; + + .go-icon-button__icon { + display: flex; + } + + &:hover, &:active, &:focus { + background: $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..49986ea41 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-icon-button/go-icon-button.component.ts @@ -0,0 +1,18 @@ +import { Component, EventEmitter, Input, Output } from '@angular/core'; + +@Component({ + selector: 'go-icon-button', + templateUrl: './go-icon-button.component.html', + styleUrls: ['./go-icon-button.component.scss'] +}) +export class GoIconButtonComponent { + @Input() buttonDisabled: boolean; + @Input() buttonIcon: string; + @Input() buttonTitle: string; + + @Output() handleClick = new EventEmitter(); + + public clicked(): void { + this.handleClick.emit(); + } +} 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..fa8674c3e --- /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 { } 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..b26490764 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.html @@ -0,0 +1,22 @@ +
+ +
+ +
+ +
+ +
+
+
+
+ + + + 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..28011b0ab --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.scss @@ -0,0 +1,49 @@ +@import '~@tangoe/gosheets/base/_variables'; + +body { + margin: 0; +} + +.go-layout { + background: $theme-light-app-bg; + display: flex; + flex-direction: column; + height: 100vh; + overflow: hidden; +} + +.go-layout__nav { + max-height: 100%; + overflow-y: auto; +} + +.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: 2rem; + 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..09b35fead --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.spec.ts @@ -0,0 +1,47 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { GoLayoutComponent } from './go-layout.component'; +import { RouterModule } from '@angular/router'; +import { GoLoaderModule } from '../go-loader/go-loader.module'; +import { GoModalModule } from '../go-modal/go-modal.module'; +import { GoModalService } from '../go-modal/go-modal.service'; +import { GoOffCanvasModule } from '../go-off-canvas/go-off-canvas.module'; +import { GoOffCanvasService } from '../go-off-canvas/go-off-canvas.service'; +import { GoToasterModule } from '../go-toaster/go-toaster.module'; +import { GoToasterService } from '../go-toaster/go-toaster.service'; + +describe('GoLayoutComponent', () => { + let component: GoLayoutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ GoLayoutComponent ], + imports: [ + GoLoaderModule, + GoModalModule, + GoOffCanvasModule, + GoToasterModule, + RouterModule, + RouterTestingModule + ], + providers: [ + GoModalService, + GoOffCanvasService, + GoToasterService + ] + }) + .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..6cff2937d --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.component.ts @@ -0,0 +1,46 @@ +import { + Component, + OnInit, + ViewEncapsulation +} from '@angular/core'; + +import { + ActivatedRoute, + NavigationCancel, + NavigationEnd, + NavigationError, + NavigationStart, + Router, + RouterOutlet +} 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 implements OnInit { + + routeLoader: boolean = false; + + constructor(private router: Router) { } + + ngOnInit(): void { + this.router.events.subscribe(event => { + if (event instanceof NavigationStart) { + this.routeLoader = true; + } else if ((event instanceof NavigationEnd) || (event instanceof NavigationCancel) || (event instanceof NavigationError)) { + this.routeLoader = false; + } + }); + } + + routeAnimation(outlet: RouterOutlet): ActivatedRoute | string { + 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..bad5704e5 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-layout/go-layout.module.ts @@ -0,0 +1,46 @@ +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 { GoHeaderModule } from '../go-header/go-header.module'; +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 + GoHeaderModule, + GoLoaderModule, + GoModalModule, + GoOffCanvasModule, + GoToasterModule + ], + exports: [ + GoLayoutComponent + ], + providers: [ + GoModalService, + GoOffCanvasService, + GoToasterService + ] +}) + +export class GoLayoutModule { } diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.html b/projects/go-lib/src/lib/components/go-loader/go-loader.component.html index 3a13926e9..fb01e6223 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.html +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.html @@ -1,34 +1,11 @@ - - Loading - - - - - - - - - - - - - - - + + loading animation + + + diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss b/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss index c4ded905d..3ed041479 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.scss @@ -1,119 +1,53 @@ @import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; -.go-loader-container { - animation: loaderFadeIn 0.5s $global-transition-timing forwards; - display: inline-block; - height: 75px; - position: relative; - width: 75px; -} - -.go-loader-container--small { - height: 50px; - width: 50px; -} - -.go-loader-container--medium { - height: 100px; - width: 100px; -} - -.go-loader-container--large { - height: 150px; - width: 150px; -} +$loader-sizes: (small: 50px, medium: 100px, large: 150px); +$loader-speeds: (outer: 1.25s, middle: 1s, inner: .75s); +$loader-colors: ( + negative: $ui-color-negative, + neutral: $ui-color-neutral, + positive: $ui-color-positive +); .go-loader { - transform-origin: 50% 50%; -} - -.go-loader-gradient--finish { - stop-color: rgba(255, 255, 255, 0); -} - -.go-loader-gradient--start-neutral { - stop-color: $ui-color-neutral; -} - -.go-loader-gradient--start-positive { - stop-color: $ui-color-positive; -} - -.go-loader-gradient--start-negative { - stop-color: $ui-color-negative; -} - -.go-loader--neutral { - fill: url(#goLoaderNeutralGradient); -} - -.go-loader--positive { - fill: url(#goLoaderPositiveGradient); -} - -.go-loader--negative { - fill: url(#goLoaderNegativeGradient); -} - -.go-loader--outer { - animation: rotatePathOuter 0.75s linear infinite; -} - -.go-loader--middle { - animation: rotatePathMiddle 1s linear infinite; - transform: translate(10%, 10%); -} + display: inline-block; + height: map-get($loader-sizes, medium); + position: relative; + width: map-get($loader-sizes, medium); -.go-loader--inner { - animation: rotatePathInner 1.25s linear infinite; - transform: translate(20%, 20%); -} + path { + @include transition(fill, .5s); -.go-loader-container--completed { - animation: loaderFadeOut 0.25s $global-transition-timing forwards; -} - -@keyframes rotatePathOuter { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); + fill: $ui-color-neutral; } } -@keyframes rotatePathMiddle { - from { - transform: rotate(0deg) translate(10%, 10%); - } - to { - transform: rotate(360deg) translate(10%, 10%); +@each $name, $size in $loader-sizes { + .go-loader--#{$name} { + height: $size; + width: $size; } } -@keyframes rotatePathInner { - from { - transform: rotate(0deg) translate(20%, 20%); - } - to { - transform: rotate(360deg) translate(20%, 20%); +@each $name, $color in $loader-colors { + .go-loader--#{$name} path { + fill: $color; } } -@keyframes loaderFadeOut { - from { - opacity: 1; - } - to { - opacity: 0; +@each $name, $speed in $loader-speeds { + .go-loader__#{$name} { + animation: rotate $speed linear infinite; + transform-origin: center center; } } -@keyframes loaderFadeIn { +@keyframes rotate { from { - opacity: 0; + transform: rotate(0deg); } + to { - opacity: 1; + transform: rotate(360deg); } } diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts index f2a860062..72b3309d9 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.spec.ts @@ -1,6 +1,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { GoLoaderComponent } from './go-loader.component'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; describe('GoLoaderComponent', () => { let component: GoLoaderComponent; @@ -8,7 +9,8 @@ describe('GoLoaderComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ GoLoaderComponent ] + declarations: [ GoLoaderComponent ], + imports: [ BrowserAnimationsModule ] }) .compileComponents(); })); @@ -22,4 +24,60 @@ describe('GoLoaderComponent', () => { it('should create', () => { expect(component).toBeTruthy(); }); + + describe('loaderClasses()', () => { + it('adds a small modifier class based on loaderSize', () => { + component.loaderSize = 'small'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--small']).toBe(true); + expect(containerClasses['go-loader--medium']).toBe(false); + expect(containerClasses['go-loader--large']).toBe(false); + }); + + it('adds a medium modifier class based on loaderSize', () => { + component.loaderSize = 'medium'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--small']).toBe(false); + expect(containerClasses['go-loader--medium']).toBe(true); + expect(containerClasses['go-loader--large']).toBe(false); + }); + + it('adds a large modifier class based on loaderSize', () => { + component.loaderSize = 'large'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--small']).toBe(false); + expect(containerClasses['go-loader--medium']).toBe(false); + expect(containerClasses['go-loader--large']).toBe(true); + }); + + it('adds a neutral modifier class based on loaderType', () => { + component.loaderType = 'neutral'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--neutral']).toBe(true); + expect(containerClasses['go-loader--negative']).toBe(false); + expect(containerClasses['go-loader--positive']).toBe(false); + }); + + it('adds a negative modifier class based on loaderType', () => { + component.loaderType = 'negative'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--neutral']).toBe(false); + expect(containerClasses['go-loader--negative']).toBe(true); + expect(containerClasses['go-loader--positive']).toBe(false); + }); + + it('adds a positive modifier class based on loaderType', () => { + component.loaderType = 'positive'; + + const containerClasses = component.loaderClasses(); + expect(containerClasses['go-loader--neutral']).toBe(false); + expect(containerClasses['go-loader--negative']).toBe(false); + expect(containerClasses['go-loader--positive']).toBe(true); + }); + }); }); diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts index f3a677842..ecd7a1a12 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.component.ts @@ -1,40 +1,33 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, HostBinding, Input } from '@angular/core'; +import { fadeTemplateAnimation } from '../../animations/fade.animation'; @Component({ selector: 'go-loader', templateUrl: './go-loader.component.html', - styleUrls: ['./go-loader.component.scss'] + styleUrls: ['./go-loader.component.scss'], + animations: [ + fadeTemplateAnimation + ] }) -export class GoLoaderComponent implements OnInit { - - @Input() loaderDone: boolean = false; +export class GoLoaderComponent { @Input() loaderSize: string = 'medium'; @Input() loaderType: string = 'neutral'; - constructor() { } - - ngOnInit() { - } + @HostBinding('@fadeTemplate') + public fadeTemplate: boolean = true; - completeAnimation() : void { - this.loaderDone = true; - } + //#region Public Methods - public pathClasses() : object { + loaderClasses(): object { return { + 'go-loader--small': this.loaderSize === 'small', + 'go-loader--medium': this.loaderSize === 'medium', + 'go-loader--large': this.loaderSize === 'large', + 'go-loader--negative': this.loaderType === 'negative', 'go-loader--neutral': this.loaderType === 'neutral', - 'go-loader--positive': this.loaderType === 'positive', - 'go-loader--negative': this.loaderType === 'negative' - } - } - - public containerClasses() : object { - return { - 'go-loader-container--small': this.loaderSize === 'small', - 'go-loader-container--medium': this.loaderSize === 'medium', - 'go-loader-container--large': this.loaderSize === 'large', - 'go-loader-container--completed': this.loaderDone - } + 'go-loader--positive': this.loaderType === 'positive' + }; } + //#endregion } diff --git a/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts b/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts index 48210692e..6855912f6 100644 --- a/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts +++ b/projects/go-lib/src/lib/components/go-loader/go-loader.module.ts @@ -1,15 +1,17 @@ -import { NgModule } from '@angular/core'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { CommonModule } from '@angular/common'; import { GoIconModule } from '../go-icon/go-icon.module'; - import { GoLoaderComponent } from './go-loader.component'; +import { NgModule } from '@angular/core'; + @NgModule({ declarations: [ GoLoaderComponent ], imports: [ + BrowserAnimationsModule, CommonModule, GoIconModule ], diff --git a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss index 8baf9791e..ea7119942 100644 --- a/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss +++ b/projects/go-lib/src/lib/components/go-modal/go-modal.component.scss @@ -13,7 +13,7 @@ top: 0; visibility: hidden; width: 100%; - z-index: 400; + z-index: z-index(modal); @include transition(all); } diff --git a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss index 35a2320d3..11f1013aa 100644 --- a/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss +++ b/projects/go-lib/src/lib/components/go-off-canvas/go-off-canvas.component.scss @@ -1,4 +1,5 @@ @import '~@tangoe/gosheets/base/variables'; +@import '../../../styles/mixins'; .go-off-canvas-backdrop { background: rgba($base-dark, .5); @@ -8,6 +9,7 @@ top: 0; transition: opacity .5s cubic-bezier(.25, .8, .25, 1); width: 100vw; + z-index: z-index(off-canvas); } .go-off-canvas { 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..dde4983a3 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.scss @@ -0,0 +1,165 @@ +@import '~@tangoe/gosheets/base/variables'; +@import '~@tangoe/gosheets/base/mixins'; +@import '../../../styles/mixins'; + +.go-search { + position: relative; + + @media (max-width: $breakpoint-tablet) { + width: 100%; + } +} + +:host.go-search__parent { + @media (max-width: $breakpoint-tablet) { + width: 100%; + } +} + +.go-search__container { + @include transition(all); + + 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: 500px; + z-index: z-index(search); + + &:hover { + background: lighten($theme-light-app-bg, 3%); + } + + @media (max-width: $breakpoint-tablet) { + width: 100%; + } +} + +.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 { + @include transition(all); + + align-items: center; + display: flex; + + ::-ms-clear { + display: none; + } +} + +.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..c5a6defe2 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-search/go-search.component.ts @@ -0,0 +1,90 @@ +import { + Component, + ElementRef, + HostBinding, + 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'; + + @HostBinding('class.go-search__parent') + @HostListener('document:click', ['$event.target']) + onDocumentClick(target: HTMLElement) { + this.closeSearchEvent(target); + } + + constructor( + public goSearchService: GoSearchService, + private elementRef: ElementRef, + private formBuilder: FormBuilder + ) { + this.goSearchForm = this.formBuilder.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: FocusEvent): void { + if (event.relatedTarget && !this.elementRef.nativeElement.contains(event.relatedTarget)) { + this.closeSearch(); + } + } + + private closeSearchEvent(target: HTMLElement): void { + if (!this.elementRef.nativeElement.contains(target)) { + this.closeSearch(); + } + } + + private 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/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..dd24126c7 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.html @@ -0,0 +1,36 @@ +
+
+
+ + + + {{ 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..0faf75638 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.scss @@ -0,0 +1,62 @@ +@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 { + align-items: center; + display: flex; + 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..4ff759941 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-nav-group/go-nav-group.component.ts @@ -0,0 +1,37 @@ +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'; + +@Component({ + selector: 'go-nav-group', + templateUrl: './go-nav-group.component.html', + styleUrls: ['./go-nav-group.component.scss'], + encapsulation: ViewEncapsulation.None +}) +export class GoNavGroupComponent implements OnInit { + @Input() navItem: NavGroup | NavItem; + @Input() class: string; + @Output() closeNavs = new EventEmitter(); + + group: NavGroup; + + constructor (public navService: GoSideNavService) { } + + ngOnInit(): void { + // Using this to do type checking between NavGroup and NavItem in the html + this.group = this.navItem as NavGroup; + } + + 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..b4acc783a --- /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..64b7748b0 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/go-side-nav/go-side-nav.component.scss @@ -0,0 +1,29 @@ +@import '~@tangoe/gosheets/base/_variables'; +@import '../../../../styles/variables'; +@import '../../../../styles/mixins'; + +.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; + z-index: z-index(navigation); + + @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..dd13bde46 --- /dev/null +++ b/projects/go-lib/src/lib/components/go-side-nav/nav-group.model.ts @@ -0,0 +1,9 @@ +import { NavItem } from './nav-item.model'; + +export interface NavGroup { + description?: string; + 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/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-lib/src/lib/components/go-table/go-table.component.html b/projects/go-lib/src/lib/components/go-table/go-table.component.html index 265fa35d3..f22879a4a 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.html +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.html @@ -1,6 +1,9 @@
-
-
{{ tableTitle }}
+
+
{{ tableTitle }}
+
+ +
{{ tableTitle }}
{{ col.getFieldData(item) }} diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.scss b/projects/go-lib/src/lib/components/go-table/go-table.component.scss index 2d12f2a69..58c72243f 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.scss +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.scss @@ -8,6 +8,43 @@ position: relative; } +.go-table-header { + align-items: center; + display: flex; + + h5 { + padding: .875rem 0 .875rem 1.25rem; + } + + @media (max-width: $breakpoint-mobile) { + align-items: initial; + flex-direction: column; + justify-content: center; + + .go-table-header__actions { + justify-content: initial; + } + } +} + +.go-table-header__actions { + align-items: center; + display: flex; + flex: 1; + justify-content: flex-end; + padding: .875rem 1.25rem; +} + +.go-table-header--stacked { + align-items: initial; + flex-direction: column; + justify-content: center; + + .go-table-header__actions { + justify-content: initial; + } +} + // Loader //================ .go-table-loader { diff --git a/projects/go-lib/src/lib/components/go-table/go-table.component.ts b/projects/go-lib/src/lib/components/go-table/go-table.component.ts index 631e13b4d..e363744a8 100644 --- a/projects/go-lib/src/lib/components/go-table/go-table.component.ts +++ b/projects/go-lib/src/lib/components/go-table/go-table.component.ts @@ -1,11 +1,13 @@ -import { Component, - ContentChildren, - EventEmitter, - Input, - OnChanges, - OnInit, - Output, - QueryList } from '@angular/core'; +import { + Component, + ContentChildren, + EventEmitter, + Input, + OnChanges, + OnInit, + Output, + QueryList +} from '@angular/core'; import { GoTableColumnComponent } from './go-table-column.component'; import { GoTableConfig, GoTableDataSource, SortDirection } from './index'; @@ -21,6 +23,8 @@ import { fadeTemplateAnimation } from '../../animations/fade.animation'; export class GoTableComponent implements OnInit, OnChanges { @Input() loadingData: boolean = false; + @Input() showTableActions: boolean = false; + @Input() stackHeader: boolean = false; @Input() tableConfig: GoTableConfig; @Input() tableTitle: string; diff --git a/projects/go-lib/src/lib/components/go-toaster/go-toaster.component.scss b/projects/go-lib/src/lib/components/go-toaster/go-toaster.component.scss index 6b7080504..4e7608f47 100644 --- a/projects/go-lib/src/lib/components/go-toaster/go-toaster.component.scss +++ b/projects/go-lib/src/lib/components/go-toaster/go-toaster.component.scss @@ -1,4 +1,5 @@ @import '~@tangoe/gosheets/base/_variables'; +@import '../../../styles/mixins'; .go-toaster { bottom: 0; @@ -7,7 +8,7 @@ position: fixed; right: 0; width: 400px; - z-index: 600; + z-index: z-index(toaster); @media(max-width: $breakpoint-mobile) { left: 0; diff --git a/projects/go-lib/src/lib/go-shared.module.ts b/projects/go-lib/src/lib/go-shared.module.ts index a759019fa..fe751a174 100644 --- a/projects/go-lib/src/lib/go-shared.module.ts +++ b/projects/go-lib/src/lib/go-shared.module.ts @@ -2,21 +2,33 @@ import { NgModule } from '@angular/core'; import { GoAccordionModule } from './components/go-accordion/go-accordion.module'; import { GoButtonModule } from './components/go-button/go-button.module'; import { GoCardModule } from './components/go-card/go-card.module'; +import { GoHeaderModule } from './components/go-header/go-header.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'; +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'; +import { GoActionSheetModule } from './components/go-action-sheet/go-action-sheet.module'; @NgModule({ imports: [ GoAccordionModule, + GoActionSheetModule, GoButtonModule, GoCardModule, + GoHeaderModule, + GoIconButtonModule, GoIconModule, + GoLayoutModule, GoLoaderModule, GoModalModule, + GoSearchModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule @@ -25,9 +37,14 @@ import { GoToasterModule } from './components/go-toaster/go-toaster.module'; GoAccordionModule, GoButtonModule, GoCardModule, + GoHeaderModule, + GoIconButtonModule, GoIconModule, + GoLayoutModule, GoLoaderModule, GoModalModule, + GoSearchModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule diff --git a/projects/go-lib/src/public_api.ts b/projects/go-lib/src/public_api.ts index 9d7a5230b..af56f863a 100644 --- a/projects/go-lib/src/public_api.ts +++ b/projects/go-lib/src/public_api.ts @@ -10,6 +10,10 @@ export * from './lib/components/go-accordion/go-accordion-panel.component'; export * from './lib/components/go-accordion/go-accordion.component'; export * from './lib/components/go-accordion/go-accordion.module'; +// Action Sheet +export * from './lib/components/go-action-sheet/go-action-sheet.component'; +export * from './lib/components/go-action-sheet/go-action-sheet.module'; + // Button export * from './lib/components/go-button/go-button.component'; export * from './lib/components/go-button/go-button.module'; @@ -18,10 +22,22 @@ export * from './lib/components/go-button/go-button.module'; export * from './lib/components/go-card/go-card.component'; export * from './lib/components/go-card/go-card.module'; +// Header +export * from './lib/components/go-header/go-header.component'; +export * from './lib/components/go-header/go-header.module'; + // Icon -export * from './lib/components/go-icon/go-icon.component' +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'; + +// 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'; @@ -36,6 +52,18 @@ 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'; +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/_mixins.scss b/projects/go-lib/src/styles/_mixins.scss index d9a9d82fa..ab0780616 100644 --- a/projects/go-lib/src/styles/_mixins.scss +++ b/projects/go-lib/src/styles/_mixins.scss @@ -5,3 +5,15 @@ -o-transition: $prop .25s cubic-bezier(.25,.8,.25,1); transition: $prop .25s cubic-bezier(.25,.8,.25,1); } + +$z-index: ( + navigation: 100, + search: 200, + off-canvas: 300, + modal: 400, + toaster: 500, +); + +@function z-index($key) { + @return map-get($z-index, $key); +} 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/browserslist b/projects/go-tester/browserslist index 37371cb04..d68f2c600 100644 --- a/projects/go-tester/browserslist +++ b/projects/go-tester/browserslist @@ -8,4 +8,4 @@ last 2 versions Firefox ESR not dead -not IE 9-11 \ No newline at end of file +IE 9-11 \ No newline at end of file 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..789367bf7 --- /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 { AppGuard } from './app.guard'; + +const routes: Routes = [ + { path: '', redirectTo: 'test-page-1', pathMatch: 'full' }, + { path: 'test-page-1', 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 6b8caa72d..cd81f4b78 100644 --- a/projects/go-tester/src/app/app.component.html +++ b/projects/go-tester/src/app/app.component.html @@ -1,80 +1,41 @@ -
- -
-

- Welcome to {{ title }}! -

-
- -
-

Loader

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

Buttons

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

Off Canvas

- - Click me to open - -
- -
-

Toasts

- - -
- -
-

Table

- - - - - - - - -
-
- - - + + + + + + + + + + + + + + + + + + + + + + + + + + + Another test + + + + + + + + + + + diff --git a/projects/go-tester/src/app/app.component.scss b/projects/go-tester/src/app/app.component.scss index e69de29bb..8b1378917 100644 --- a/projects/go-tester/src/app/app.component.scss +++ b/projects/go-tester/src/app/app.component.scss @@ -0,0 +1 @@ + diff --git a/projects/go-tester/src/app/app.component.ts b/projects/go-tester/src/app/app.component.ts index aa065ed96..c2060b2db 100644 --- a/projects/go-tester/src/app/app.component.ts +++ b/projects/go-tester/src/app/app.component.ts @@ -1,13 +1,12 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; -import { AppService } from './app.service'; import { - GoTableConfig, - GoOffCanvasService, - GoTableDataSource, - GoButtonComponent, GoIconComponent, - GoLoaderComponent, + GoModalService, + GoOffCanvasService, + GoSideNavService, + NavGroup, + NavItem, GoToasterService } from '../../../go-lib/src/public_api'; @@ -18,62 +17,27 @@ import { }) export class AppComponent implements OnInit { - @ViewChild('heyButton') heyButton: GoButtonComponent; - @ViewChild('loader') loader: GoLoaderComponent; - - title = 'go-tester'; + logo: string = 'https://mobi.thefutureis.mobi/images/assets/theme_logo/000/000/000/178/header.png?1556627290'; + title: string = 'go-tester'; - tableConfig: GoTableConfig; - tableLoading: boolean = true; + menuItems: Array = [ + { 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' } + ]} + ]; constructor( - private appService: AppService, private goToasterService: GoToasterService, - private goOffCanvasService: GoOffCanvasService + private goOffCanvasService: GoOffCanvasService, + private goSideNavService: GoSideNavService, + private goModalService: GoModalService ) { } ngOnInit() { - this.appService.getMockData(new GoTableConfig()).subscribe(data => { - this.tableConfig = new GoTableConfig({ - dataMode: GoTableDataSource.server, - tableData: data.results, - 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); - } - - stopLoaderAnimation() { - this.loader.loaderDone = this.loader.loaderDone ? false: true; - } - - clickHey(): void { - setTimeout(() => { - this.heyButton.reset(); - }, 4000); - } - - 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); - }); - } } - openThing() : void { + openOffCanvas(): void { this.goOffCanvasService.openOffCanvas({ component: GoIconComponent, bindings: { @@ -81,4 +45,21 @@ export class AppComponent implements OnInit { } }); } + + toggleSideMenu(): void { + this.goSideNavService.toggleNav(); + } + + openModal(): void { + this.goModalService.openModal( + GoIconComponent, + { + icon: 'alarm' + } + ); + } + + openToast() { + this.goToasterService.toastInfo({ message: 'From the action sheet'}); + } } 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..b11e831d1 --- /dev/null +++ b/projects/go-tester/src/app/app.guard.ts @@ -0,0 +1,23 @@ +import { Injectable } from '@angular/core'; +import { + ActivatedRouteSnapshot, + CanActivate, + Router, + 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 new Observable(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 f1e12b6f4..1eb1e1fbe 100644 --- a/projects/go-tester/src/app/app.module.ts +++ b/projects/go-tester/src/app/app.module.ts @@ -6,37 +6,62 @@ import { HttpClientModule } from '@angular/common/http'; import { GoButtonComponent, GoButtonModule, + GoHeaderModule, + GoIconButtonModule, GoIconComponent, GoIconModule, + GoLayoutModule, GoLoaderModule, GoOffCanvasModule, + GoSearchModule, + GoSideNavModule, GoTableModule, GoToastModule, - GoToasterModule + GoToasterModule, + GoActionSheetModule, + GoAccordionModule } 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/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 + AppComponent, + SearchTestComponent, + TestPage1Component, + TestPage2Component ], imports: [ + AppRoutesModule, BrowserModule, BrowserAnimationsModule, HttpClientModule, + GoAccordionModule, + GoActionSheetModule, GoButtonModule, + GoHeaderModule, GoIconModule, + GoIconButtonModule, + GoLayoutModule, GoLoaderModule, GoOffCanvasModule, + GoSearchModule, + GoSideNavModule, GoTableModule, GoToastModule, GoToasterModule ], providers: [ - AppService + AppService, + AppGuard ], entryComponents: [ GoButtonComponent, 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/search-test.component.html b/projects/go-tester/src/app/components/search-test/search-test.component.html new file mode 100644 index 000000000..e60e961ed --- /dev/null +++ b/projects/go-tester/src/app/components/search-test/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/search-test.component.ts b/projects/go-tester/src/app/components/search-test/search-test.component.ts new file mode 100644 index 000000000..e71c6cf19 --- /dev/null +++ b/projects/go-tester/src/app/components/search-test/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 + 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); + }); + }); + } +} 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..bfa133f77 --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.html @@ -0,0 +1,17 @@ + + + Thing 1 + + + + + + + + + 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..ea04ad25b --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-1/test-page-1.component.ts @@ -0,0 +1,42 @@ +import { Component, OnInit } from '@angular/core'; +import { GoTableConfig, GoTableDataSource } from '../../../../../go-lib/src/public_api'; + +import { AppService } from '../../app.service'; + + +@Component({ + selector: 'app-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..992d27008 --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.html @@ -0,0 +1,81 @@ +
+
+

+ Welcome to {{ title }}! +

+
+ +
+

Action Sheet

+ + + + Click me to open Action Sheet + + + + + + + + + + + + + + Another test + + + + + + +
+ +
+

Loader

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

Buttons

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

Toasts

+ + +
+
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..644e0752a --- /dev/null +++ b/projects/go-tester/src/app/components/test-page-2/test-page-2.component.ts @@ -0,0 +1,51 @@ +import { Component, OnInit, ViewChild } from '@angular/core'; +import { + GoButtonComponent, + GoLoaderComponent, + GoToasterService +} from '../../../../../go-lib/src/public_api'; + +@Component({ + selector: 'app-test-page-2', + templateUrl: './test-page-2.component.html' +}) +export class TestPage2Component implements OnInit { + + @ViewChild('heyButton') heyButton: GoButtonComponent; + @ViewChild('loader') loader: GoLoaderComponent; + + title: string = 'Test 2'; + loaderType: string = 'neutral'; + loading: boolean = true; + + constructor(private goToasterService: GoToasterService) { } + + ngOnInit() { + setTimeout(() => { + this.goToasterService.toastInfo({ message: 'Check this out'}); + this.goToasterService.toastSuccess({message: 'Check this out' }); + this.goToasterService.toastError({ message: 'Check this out' }); + }, 1500); + } + + stopLoaderAnimation() { + const loaderTypes: string[] = [ + 'neutral', + 'negative', + 'positive' + ]; + + this.loaderType = loaderTypes[Math.floor(Math.random() * loaderTypes.length)]; + this.loading = !this.loading; + } + + clickHey(): void { + setTimeout(() => { + this.heyButton.reset(); + }, 4000); + } + + openToast() { + this.goToasterService.toastInfo({ message: 'From the action sheet'}); + } +} diff --git a/projects/go-tester/src/polyfills.ts b/projects/go-tester/src/polyfills.ts index ee8b84da8..da85468ae 100644 --- a/projects/go-tester/src/polyfills.ts +++ b/projects/go-tester/src/polyfills.ts @@ -19,20 +19,20 @@ */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ -// import 'core-js/es6/symbol'; -// import 'core-js/es6/object'; -// import 'core-js/es6/function'; -// import 'core-js/es6/parse-int'; -// import 'core-js/es6/parse-float'; -// import 'core-js/es6/number'; -// import 'core-js/es6/math'; -// import 'core-js/es6/string'; -// import 'core-js/es6/date'; -// import 'core-js/es6/array'; -// import 'core-js/es6/regexp'; -// import 'core-js/es6/map'; -// import 'core-js/es6/weak-map'; -// import 'core-js/es6/set'; +import 'core-js/es6/symbol'; +import 'core-js/es6/object'; +import 'core-js/es6/function'; +import 'core-js/es6/parse-int'; +import 'core-js/es6/parse-float'; +import 'core-js/es6/number'; +import 'core-js/es6/math'; +import 'core-js/es6/string'; +import 'core-js/es6/date'; +import 'core-js/es6/array'; +import 'core-js/es6/regexp'; +import 'core-js/es6/map'; +import 'core-js/es6/weak-map'; +import 'core-js/es6/set'; /** * If the application will be indexed by Google Search, the following is required. @@ -42,10 +42,10 @@ // import 'core-js/es6/array'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ -// import 'classlist.js'; // Run `npm install --save classlist.js`. +import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ -// import 'core-js/es6/reflect'; +import 'core-js/es6/reflect'; /** * Web Animations `@angular/platform-browser/animations` @@ -78,3 +78,5 @@ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ + +import 'core-js/es7/array'; diff --git a/projects/go-tester/src/styles.scss b/projects/go-tester/src/styles.scss index 7985988c7..679ecb5b7 100644 --- a/projects/go-tester/src/styles.scss +++ b/projects/go-tester/src/styles.scss @@ -1,9 +1,64 @@ /* 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 { background: $theme-light-app-bg; font-family: 'Roboto'; + margin: 0px; }