From 8ec660e6f2671c87ace02442bc29990cd64e48a8 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 10:11:29 -0700 Subject: [PATCH 01/15] Remove MaterialModule --- src/app/app-module.ts | 35 +++++++++++++++++++++++++++++++++-- 1 file changed, 33 insertions(+), 2 deletions(-) diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 97cc2e327..148c4b1ea 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -4,7 +4,18 @@ import {NgModule} from '@angular/core'; import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {HttpModule} from '@angular/http'; -import {MaterialModule, MdNativeDateModule} from '@angular/material'; +import { + MdButtonModule, + MdCardModule, + MdGridListModule, + MdIconModule, + MdListModule, + MdMenuModule, + MdNativeDateModule, + MdSidenavModule, MdTabsModule, + MdToolbarModule, + MdTooltipModule, +} from '@angular/material'; import {ExampleModule} from '@angular/material-examples'; import {MaterialDocsApp} from './material-docs-app'; @@ -23,6 +34,26 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page- import {StyleManager} from './shared/style-manager/style-manager'; +export const MATERIAL_COMPONENTS_USED = [ + MdButtonModule, + MdCardModule, + MdGridListModule, + MdIconModule, + MdListModule, + MdMenuModule, + MdSidenavModule, + MdTabsModule, + MdToolbarModule, + MdTooltipModule, +]; + +@NgModule({ + imports: MATERIAL_COMPONENTS_USED, + exports: MATERIAL_COMPONENTS_USED, +}) +export class DocsMaterialModule {} + + @NgModule({ declarations: [ MaterialDocsApp, @@ -47,7 +78,7 @@ import {StyleManager} from './shared/style-manager/style-manager'; SharedModule, FormsModule, HttpModule, - MaterialModule, + DocsMaterialModule, MdNativeDateModule, routing, ], From e38055370febdcedc5776487378c68608463444b Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 10:12:53 -0700 Subject: [PATCH 02/15] Add tooltip to theme-picker --- src/app/shared/theme-chooser/theme-chooser.html | 2 +- src/app/shared/theme-chooser/theme-chooser.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/shared/theme-chooser/theme-chooser.html b/src/app/shared/theme-chooser/theme-chooser.html index a36e27a94..d8f3efd4c 100644 --- a/src/app/shared/theme-chooser/theme-chooser.html +++ b/src/app/shared/theme-chooser/theme-chooser.html @@ -1,4 +1,4 @@ - diff --git a/src/app/shared/theme-chooser/theme-chooser.ts b/src/app/shared/theme-chooser/theme-chooser.ts index 9b83674fe..ba70958b3 100644 --- a/src/app/shared/theme-chooser/theme-chooser.ts +++ b/src/app/shared/theme-chooser/theme-chooser.ts @@ -9,7 +9,7 @@ import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage'; styleUrls: ['theme-chooser.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, - host: { 'aria-hidden': 'true' }, + host: {'aria-hidden': 'true'}, }) export class ThemeChooser { currentTheme; From c32bca01ad61958df94d07dfea631bc6fcb31e6d Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 10:13:21 -0700 Subject: [PATCH 03/15] Remove "Component -" from header for component view --- src/app/pages/component-viewer/component-viewer.spec.ts | 2 +- src/app/pages/component-viewer/component-viewer.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/pages/component-viewer/component-viewer.spec.ts b/src/app/pages/component-viewer/component-viewer.spec.ts index bbe5a981b..b64b6d232 100644 --- a/src/app/pages/component-viewer/component-viewer.spec.ts +++ b/src/app/pages/component-viewer/component-viewer.spec.ts @@ -44,7 +44,7 @@ describe('ComponentViewer', () => { it('should set page title correctly', () => { const component = fixture.componentInstance; fixture.detectChanges(); - const expected = `Component - ${component.docItems.getItemById(docItemsID).name}`; + const expected = `${component.docItems.getItemById(docItemsID).name}`; expect(component._componentPageTitle.title).toEqual(expected); }); }); diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts index 60df024f2..914fbd664 100644 --- a/src/app/pages/component-viewer/component-viewer.ts +++ b/src/app/pages/component-viewer/component-viewer.ts @@ -18,7 +18,7 @@ export class ComponentViewer { public docItems: DocumentationItems) { _route.params.subscribe(p => { this.componentDocItem = docItems.getItemById(p['id']); - this._componentPageTitle.title = `Component - ${this.componentDocItem.name}`; + this._componentPageTitle.title = `${this.componentDocItem.name}`; }); } } From 6830867d5bbc9aacf89d6c4d541d0bc23b746986 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 10:13:47 -0700 Subject: [PATCH 04/15] Make `npm start` use --aot and --sourcemaps=false --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index cef12aa9b..d63659927 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "license": "MIT", "angular-cli": {}, "scripts": { - "start": "npm run build-themes && ng serve", + "start": "npm run build-themes && ng serve --aot --sourcemaps=false", "lint": "tslint \"src/**/*.ts\"", "test": "ng test", "pree2e": "webdriver-manager update", From 4d7132df810589752422e6cc516d04958026a279 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 10:25:55 -0700 Subject: [PATCH 05/15] Rename "theme-chooser" to "theme-picker" --- src/app/app-module.ts | 3 +- src/app/shared/navbar/navbar.html | 2 +- src/app/shared/shared-module.ts | 12 ++++---- src/app/shared/svg-viewer/svg-builder.spec.ts | 2 +- src/app/shared/svg-viewer/svg-builder.ts | 2 +- src/app/shared/svg-viewer/svg-viewer.ts | 2 +- src/app/shared/theme-chooser/index.ts | 1 - src/app/shared/theme-picker/index.ts | 1 + .../theme-picker.html} | 6 ++-- .../theme-picker.scss} | 30 +++++++++---------- .../theme-picker.spec.ts} | 8 ++--- .../theme-picker.ts} | 8 ++--- .../theme-storage/theme-storage.spec.ts | 0 .../theme-storage/theme-storage.ts | 0 14 files changed, 39 insertions(+), 38 deletions(-) delete mode 100644 src/app/shared/theme-chooser/index.ts create mode 100644 src/app/shared/theme-picker/index.ts rename src/app/shared/{theme-chooser/theme-chooser.html => theme-picker/theme-picker.html} (70%) rename src/app/shared/{theme-chooser/theme-chooser.scss => theme-picker/theme-picker.scss} (52%) rename src/app/shared/{theme-chooser/theme-chooser.spec.ts => theme-picker/theme-picker.spec.ts} (82%) rename src/app/shared/{theme-chooser/theme-chooser.ts => theme-picker/theme-picker.ts} (91%) rename src/app/shared/{theme-chooser => theme-picker}/theme-storage/theme-storage.spec.ts (100%) rename src/app/shared/{theme-chooser => theme-picker}/theme-storage/theme-storage.ts (100%) diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 148c4b1ea..b0d1407cb 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -14,7 +14,7 @@ import { MdNativeDateModule, MdSidenavModule, MdTabsModule, MdToolbarModule, - MdTooltipModule, + MdTooltipModule, PortalModule, } from '@angular/material'; import {ExampleModule} from '@angular/material-examples'; @@ -45,6 +45,7 @@ export const MATERIAL_COMPONENTS_USED = [ MdTabsModule, MdToolbarModule, MdTooltipModule, + PortalModule, ]; @NgModule({ diff --git a/src/app/shared/navbar/navbar.html b/src/app/shared/navbar/navbar.html index c8458a7e3..53c5adf4f 100644 --- a/src/app/shared/navbar/navbar.html +++ b/src/app/shared/navbar/navbar.html @@ -9,7 +9,7 @@ Components Guides
- + - +
-
+
check_circle -
+
diff --git a/src/app/shared/theme-chooser/theme-chooser.scss b/src/app/shared/theme-picker/theme-picker.scss similarity index 52% rename from src/app/shared/theme-chooser/theme-chooser.scss rename to src/app/shared/theme-picker/theme-picker.scss index b20c9ae60..05fb1868b 100644 --- a/src/app/shared/theme-chooser/theme-chooser.scss +++ b/src/app/shared/theme-picker/theme-picker.scss @@ -1,13 +1,13 @@ -$theme-chooser-menu-padding: 8px; -$theme-chooser-grid-cell-size: 48px; -$theme-chooser-grid-cells-per-row: 2; -$theme-chooser-swatch-size: 36px; -$theme-chooser-accent-stripe-size: 6px; +$theme-picker-menu-padding: 8px; +$theme-picker-grid-cell-size: 48px; +$theme-picker-grid-cells-per-row: 2; +$theme-picker-swatch-size: 36px; +$theme-picker-accent-stripe-size: 6px; -.docs-theme-chooser-menu { +.docs-theme-picker-menu { .md-menu-content { - padding: $theme-chooser-menu-padding; + padding: $theme-picker-menu-padding; } [md-menu-item] { @@ -16,11 +16,11 @@ $theme-chooser-accent-stripe-size: 6px; overflow: hidden; } - .docs-theme-chooser-swatch { + .docs-theme-picker-swatch { position: relative; - width: $theme-chooser-swatch-size; - height: $theme-chooser-swatch-size; - margin: ($theme-chooser-grid-cell-size - $theme-chooser-swatch-size) / 2; + width: $theme-picker-swatch-size; + height: $theme-picker-swatch-size; + margin: ($theme-picker-grid-cell-size - $theme-picker-swatch-size) / 2; border-radius: 50%; overflow: hidden; @@ -44,15 +44,15 @@ $theme-chooser-accent-stripe-size: 6px; } } - .docs-theme-chooser-primary { + .docs-theme-picker-primary { width: 100%; height: 100%; } - .docs-theme-chooser-accent { + .docs-theme-picker-accent { position: absolute; - bottom: $theme-chooser-accent-stripe-size; + bottom: $theme-picker-accent-stripe-size; width: 100%; - height: $theme-chooser-accent-stripe-size; + height: $theme-picker-accent-stripe-size; } } diff --git a/src/app/shared/theme-chooser/theme-chooser.spec.ts b/src/app/shared/theme-picker/theme-picker.spec.ts similarity index 82% rename from src/app/shared/theme-chooser/theme-chooser.spec.ts rename to src/app/shared/theme-picker/theme-picker.spec.ts index 7d4000ba4..1b14dae18 100644 --- a/src/app/shared/theme-chooser/theme-chooser.spec.ts +++ b/src/app/shared/theme-picker/theme-picker.spec.ts @@ -2,15 +2,15 @@ import {MaterialModule} from '@angular/material'; import {async, TestBed} from '@angular/core/testing'; import {ThemeStorage} from './theme-storage/theme-storage'; -import {ThemeChooser} from './theme-chooser'; +import {ThemePicker} from './theme-picker'; import {StyleManager} from '../style-manager'; -describe('ThemeChooser', () => { +describe('ThemePicker', () => { beforeEach(async(() => { TestBed.configureTestingModule({ imports: [MaterialModule], - declarations: [ThemeChooser], + declarations: [ThemePicker], providers: [StyleManager, ThemeStorage] }); @@ -18,7 +18,7 @@ describe('ThemeChooser', () => { })); it('should install theme based on href', () => { - const fixture = TestBed.createComponent(ThemeChooser); + const fixture = TestBed.createComponent(ThemePicker); const component = fixture.componentInstance; const href = 'pink-bluegrey.css'; spyOn(component.styleManager, 'setStyle'); diff --git a/src/app/shared/theme-chooser/theme-chooser.ts b/src/app/shared/theme-picker/theme-picker.ts similarity index 91% rename from src/app/shared/theme-chooser/theme-chooser.ts rename to src/app/shared/theme-picker/theme-picker.ts index ba70958b3..c62592424 100644 --- a/src/app/shared/theme-chooser/theme-chooser.ts +++ b/src/app/shared/theme-picker/theme-picker.ts @@ -4,14 +4,14 @@ import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage'; @Component({ - selector: 'theme-chooser', - templateUrl: 'theme-chooser.html', - styleUrls: ['theme-chooser.scss'], + selector: 'theme-picker', + templateUrl: 'theme-picker.html', + styleUrls: ['theme-picker.scss'], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {'aria-hidden': 'true'}, }) -export class ThemeChooser { +export class ThemePicker { currentTheme; themes = [ diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts b/src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts similarity index 100% rename from src/app/shared/theme-chooser/theme-storage/theme-storage.spec.ts rename to src/app/shared/theme-picker/theme-storage/theme-storage.spec.ts diff --git a/src/app/shared/theme-chooser/theme-storage/theme-storage.ts b/src/app/shared/theme-picker/theme-storage/theme-storage.ts similarity index 100% rename from src/app/shared/theme-chooser/theme-storage/theme-storage.ts rename to src/app/shared/theme-picker/theme-storage/theme-storage.ts From 489bf70014be6169a2479f156b6a0db7e5b57541 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 12:39:09 -0700 Subject: [PATCH 06/15] Add css classes to SVGs for theming --- src/assets/img/component-categories/buttons.svg | 2 +- src/assets/img/component-categories/forms.svg | 2 +- src/assets/img/component-categories/layout.svg | 2 +- src/assets/img/component-categories/modals.svg | 2 +- src/assets/img/component-categories/nav.svg | 2 +- src/assets/img/components/autocomplete.svg | 2 +- src/assets/img/components/button-toggle.svg | 2 +- src/assets/img/components/button.svg | 2 +- src/assets/img/components/card.svg | 2 +- src/assets/img/components/checkbox.svg | 2 +- src/assets/img/components/chips.svg | 2 +- src/assets/img/components/datepicker.svg | 2 +- src/assets/img/components/dialog.svg | 2 +- src/assets/img/components/grid-list.svg | 2 +- src/assets/img/components/icon.svg | 2 +- src/assets/img/components/input.svg | 2 +- src/assets/img/components/list.svg | 2 +- src/assets/img/components/menu.svg | 2 +- src/assets/img/components/progress-bar.svg | 2 +- src/assets/img/components/progress-spinner.svg | 2 +- src/assets/img/components/radio.svg | 2 +- src/assets/img/components/select.svg | 2 +- src/assets/img/components/sidenav.svg | 2 +- src/assets/img/components/slide-toggle.svg | 2 +- src/assets/img/components/slider.svg | 2 +- src/assets/img/components/snack-bar.svg | 2 +- src/assets/img/components/tabs.svg | 2 +- src/assets/img/components/textarea.svg | 2 +- src/assets/img/components/toolbar.svg | 2 +- src/assets/img/components/tooltip.svg | 2 +- src/assets/img/homepage/fastandconsistent.svg | 2 +- src/assets/img/homepage/optimized.svg | 2 +- src/assets/img/homepage/sprintzerotoapp.svg | 2 +- src/assets/img/homepage/versatile.svg | 2 +- 34 files changed, 34 insertions(+), 34 deletions(-) diff --git a/src/assets/img/component-categories/buttons.svg b/src/assets/img/component-categories/buttons.svg index 0cf26cd3f..c506554f7 100644 --- a/src/assets/img/component-categories/buttons.svg +++ b/src/assets/img/component-categories/buttons.svg @@ -1 +1 @@ -buttons-category+ \ No newline at end of file +buttons-category+ diff --git a/src/assets/img/component-categories/forms.svg b/src/assets/img/component-categories/forms.svg index 990998182..0390a20bd 100644 --- a/src/assets/img/component-categories/forms.svg +++ b/src/assets/img/component-categories/forms.svg @@ -1 +1 @@ - form-components \ No newline at end of file + form-components diff --git a/src/assets/img/component-categories/layout.svg b/src/assets/img/component-categories/layout.svg index 376d56f2e..e5dadeef4 100644 --- a/src/assets/img/component-categories/layout.svg +++ b/src/assets/img/component-categories/layout.svg @@ -1 +1 @@ -layout-category \ No newline at end of file +layout-category diff --git a/src/assets/img/component-categories/modals.svg b/src/assets/img/component-categories/modals.svg index b4ca11500..38b1247cd 100644 --- a/src/assets/img/component-categories/modals.svg +++ b/src/assets/img/component-categories/modals.svg @@ -1 +1 @@ - modals-category \ No newline at end of file + modals-category diff --git a/src/assets/img/component-categories/nav.svg b/src/assets/img/component-categories/nav.svg index 30321f4a0..e92e3e11c 100644 --- a/src/assets/img/component-categories/nav.svg +++ b/src/assets/img/component-categories/nav.svg @@ -1 +1 @@ -nav-category \ No newline at end of file +nav-category diff --git a/src/assets/img/components/autocomplete.svg b/src/assets/img/components/autocomplete.svg index 4995a35cf..304a7cb1b 100644 --- a/src/assets/img/components/autocomplete.svg +++ b/src/assets/img/components/autocomplete.svg @@ -1 +1 @@ - autocomplete \ No newline at end of file + autocomplete diff --git a/src/assets/img/components/button-toggle.svg b/src/assets/img/components/button-toggle.svg index 28e86dcea..67ad84349 100644 --- a/src/assets/img/components/button-toggle.svg +++ b/src/assets/img/components/button-toggle.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/button.svg b/src/assets/img/components/button.svg index a4cfe0d4b..5dc818929 100644 --- a/src/assets/img/components/button.svg +++ b/src/assets/img/components/button.svg @@ -1 +1 @@ -+ \ No newline at end of file ++ diff --git a/src/assets/img/components/card.svg b/src/assets/img/components/card.svg index 0c85b1215..3a92178a5 100644 --- a/src/assets/img/components/card.svg +++ b/src/assets/img/components/card.svg @@ -1 +1 @@ -card \ No newline at end of file +card diff --git a/src/assets/img/components/checkbox.svg b/src/assets/img/components/checkbox.svg index eaf34627d..b4b9f0272 100644 --- a/src/assets/img/components/checkbox.svg +++ b/src/assets/img/components/checkbox.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/chips.svg b/src/assets/img/components/chips.svg index 3ec994323..568f22473 100644 --- a/src/assets/img/components/chips.svg +++ b/src/assets/img/components/chips.svg @@ -1 +1 @@ -chip \ No newline at end of file +chip diff --git a/src/assets/img/components/datepicker.svg b/src/assets/img/components/datepicker.svg index 5ca3249c7..20a5c9180 100644 --- a/src/assets/img/components/datepicker.svg +++ b/src/assets/img/components/datepicker.svg @@ -1 +1 @@ -datepicker \ No newline at end of file +datepicker diff --git a/src/assets/img/components/dialog.svg b/src/assets/img/components/dialog.svg index 7eb1675f1..ae9458750 100644 --- a/src/assets/img/components/dialog.svg +++ b/src/assets/img/components/dialog.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/grid-list.svg b/src/assets/img/components/grid-list.svg index c63c66256..0117a65ad 100644 --- a/src/assets/img/components/grid-list.svg +++ b/src/assets/img/components/grid-list.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/icon.svg b/src/assets/img/components/icon.svg index 07585818b..c37f5e47b 100644 --- a/src/assets/img/components/icon.svg +++ b/src/assets/img/components/icon.svg @@ -1 +1 @@ -icon \ No newline at end of file +icon diff --git a/src/assets/img/components/input.svg b/src/assets/img/components/input.svg index 5ea121b69..1c5b86212 100644 --- a/src/assets/img/components/input.svg +++ b/src/assets/img/components/input.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/list.svg b/src/assets/img/components/list.svg index 3a809f857..19efb81a0 100644 --- a/src/assets/img/components/list.svg +++ b/src/assets/img/components/list.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/menu.svg b/src/assets/img/components/menu.svg index 8adeae31d..490b2e039 100644 --- a/src/assets/img/components/menu.svg +++ b/src/assets/img/components/menu.svg @@ -1 +1 @@ -menu \ No newline at end of file +menu diff --git a/src/assets/img/components/progress-bar.svg b/src/assets/img/components/progress-bar.svg index 4040d0446..ce94bfbaf 100644 --- a/src/assets/img/components/progress-bar.svg +++ b/src/assets/img/components/progress-bar.svg @@ -1 +1 @@ -progress-bar \ No newline at end of file +progress-bar diff --git a/src/assets/img/components/progress-spinner.svg b/src/assets/img/components/progress-spinner.svg index 66c4e8e4a..299cf149f 100644 --- a/src/assets/img/components/progress-spinner.svg +++ b/src/assets/img/components/progress-spinner.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/radio.svg b/src/assets/img/components/radio.svg index c5d9c84ff..08a75b889 100644 --- a/src/assets/img/components/radio.svg +++ b/src/assets/img/components/radio.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/select.svg b/src/assets/img/components/select.svg index c245ea482..6970abd76 100644 --- a/src/assets/img/components/select.svg +++ b/src/assets/img/components/select.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/sidenav.svg b/src/assets/img/components/sidenav.svg index 6442c58af..383b702e7 100644 --- a/src/assets/img/components/sidenav.svg +++ b/src/assets/img/components/sidenav.svg @@ -1 +1 @@ -sidenav \ No newline at end of file +sidenav diff --git a/src/assets/img/components/slide-toggle.svg b/src/assets/img/components/slide-toggle.svg index e55c4050b..df5f8fd6c 100644 --- a/src/assets/img/components/slide-toggle.svg +++ b/src/assets/img/components/slide-toggle.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/slider.svg b/src/assets/img/components/slider.svg index db85561a2..a41c0f5e4 100644 --- a/src/assets/img/components/slider.svg +++ b/src/assets/img/components/slider.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/snack-bar.svg b/src/assets/img/components/snack-bar.svg index cf26f1581..8b84d8e57 100644 --- a/src/assets/img/components/snack-bar.svg +++ b/src/assets/img/components/snack-bar.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/tabs.svg b/src/assets/img/components/tabs.svg index 561864772..31037e289 100644 --- a/src/assets/img/components/tabs.svg +++ b/src/assets/img/components/tabs.svg @@ -1 +1 @@ -tab \ No newline at end of file +tab diff --git a/src/assets/img/components/textarea.svg b/src/assets/img/components/textarea.svg index 0e5b30ac5..cfc655a3c 100644 --- a/src/assets/img/components/textarea.svg +++ b/src/assets/img/components/textarea.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/components/toolbar.svg b/src/assets/img/components/toolbar.svg index ec13b14e8..9b6632bd9 100644 --- a/src/assets/img/components/toolbar.svg +++ b/src/assets/img/components/toolbar.svg @@ -1 +1 @@ -Toolbar \ No newline at end of file +Toolbar diff --git a/src/assets/img/components/tooltip.svg b/src/assets/img/components/tooltip.svg index 227140f12..c1a3229a2 100644 --- a/src/assets/img/components/tooltip.svg +++ b/src/assets/img/components/tooltip.svg @@ -1 +1 @@ -+ \ No newline at end of file ++ diff --git a/src/assets/img/homepage/fastandconsistent.svg b/src/assets/img/homepage/fastandconsistent.svg index becf326c3..dd5593488 100644 --- a/src/assets/img/homepage/fastandconsistent.svg +++ b/src/assets/img/homepage/fastandconsistent.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/homepage/optimized.svg b/src/assets/img/homepage/optimized.svg index 83adf6e39..cc7c400e0 100644 --- a/src/assets/img/homepage/optimized.svg +++ b/src/assets/img/homepage/optimized.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/img/homepage/sprintzerotoapp.svg b/src/assets/img/homepage/sprintzerotoapp.svg index 4f69ccabe..6ccf98b8e 100644 --- a/src/assets/img/homepage/sprintzerotoapp.svg +++ b/src/assets/img/homepage/sprintzerotoapp.svg @@ -1 +1 @@ - + \ No newline at end of file + + diff --git a/src/assets/img/homepage/versatile.svg b/src/assets/img/homepage/versatile.svg index f95c1562e..fdec39398 100644 --- a/src/assets/img/homepage/versatile.svg +++ b/src/assets/img/homepage/versatile.svg @@ -1 +1 @@ - \ No newline at end of file + From 2d3138c7bf3984a9cf410faa3c91d6210209e174 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 12:40:49 -0700 Subject: [PATCH 07/15] Remove run-time SVG theming to pure SCSS --- package.json | 1 - src/_app-theme.scss | 29 +++--- .../component-category-list.html | 2 +- .../pages/component-list/component-list.html | 4 +- src/app/pages/homepage/homepage.html | 8 +- src/app/shared/shared-module.ts | 3 +- src/app/shared/svg-viewer/svg-builder.spec.ts | 85 ----------------- src/app/shared/svg-viewer/svg-builder.ts | 91 ------------------- src/app/shared/svg-viewer/svg-viewer.ts | 76 ++++------------ src/styles/_svg-theme.scss | 42 +++++++++ 10 files changed, 83 insertions(+), 258 deletions(-) delete mode 100644 src/app/shared/svg-viewer/svg-builder.spec.ts delete mode 100644 src/app/shared/svg-viewer/svg-builder.ts create mode 100644 src/styles/_svg-theme.scss diff --git a/package.json b/package.json index d63659927..7e3d4095e 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", - "color": "^1.0.3", "core-js": "^2.4.1", "rxjs": "^5.1.0", "zone.js": "^0.8.4" diff --git a/src/_app-theme.scss b/src/_app-theme.scss index 4b5800e80..d7230e74a 100644 --- a/src/_app-theme.scss +++ b/src/_app-theme.scss @@ -1,17 +1,18 @@ @import '../node_modules/@angular/material/theming'; -@import './app/pages/homepage/homepage-theme'; + +@import './app/pages/component-category-list/component-category-list-theme'; +@import './app/pages/component-list/component-list-theme'; @import './app/pages/component-sidenav/component-sidenav-theme'; @import './app/pages/component-viewer/component-viewer-theme'; -@import './app/pages/component-list/component-list-theme'; -@import './app/pages/component-category-list/component-category-list-theme'; @import './app/pages/guide-list/guide-list-theme'; - +@import './app/pages/homepage/homepage-theme'; +@import './app/shared/example-viewer/example-viewer-theme'; +@import './app/shared/footer/footer-theme'; +@import './app/shared/navbar/navbar-theme'; @import './styles/api-theme'; @import './styles/markdown-theme'; +@import './styles/svg-theme'; @import './styles/tables-theme'; -@import './app/shared/navbar/navbar-theme'; -@import './app/shared/example-viewer/example-viewer-theme'; -@import './app/shared/footer/footer-theme'; // Styles for the docs app that are based on the current theme. @@ -39,17 +40,17 @@ color: mat-color($primary, default-contrast); } + @include component-category-list-theme($theme); + @include component-list-theme($theme); + @include component-viewer-sidenav-theme($theme); + @include component-viewer-theme($theme); @include docs-site-api-theme($theme); @include docs-site-markdown-theme($theme); + @include docs-site-svg-theme($theme); @include docs-site-tables-theme($theme); - @include nav-bar-theme($theme); - @include component-viewer-sidenav-theme($theme); - @include home-page-theme($theme); - @include component-viewer-theme($theme); - @include component-list-theme($theme); - @include component-category-list-theme($theme); - @include nav-bar-theme($theme); @include example-viewer-theme($theme); @include footer-theme($theme); @include guide-list-theme($theme); + @include home-page-theme($theme); + @include nav-bar-theme($theme); } diff --git a/src/app/pages/component-category-list/component-category-list.html b/src/app/pages/component-category-list/component-category-list.html index e0c0a24fa..601096db3 100644 --- a/src/app/pages/component-category-list/component-category-list.html +++ b/src/app/pages/component-category-list/component-category-list.html @@ -6,7 +6,7 @@ {{category.name}}

{{category.summary}}

+ [src]="'../../../assets/img/component-categories/' + category.id + '.svg'">
diff --git a/src/app/pages/component-list/component-list.html b/src/app/pages/component-list/component-list.html index 4db71b583..b5e7efb33 100644 --- a/src/app/pages/component-list/component-list.html +++ b/src/app/pages/component-list/component-list.html @@ -3,8 +3,8 @@ class="docs-component-list-item" [routerLink]="['/components/component/', component.id]"> + [attr.aria-label]="component.name" + [src]="'../../../assets/img/components/' + component.id + '.svg'"> {{component.name}} diff --git a/src/app/pages/homepage/homepage.html b/src/app/pages/homepage/homepage.html index ac4f34546..9d4bc9068 100644 --- a/src/app/pages/homepage/homepage.html +++ b/src/app/pages/homepage/homepage.html @@ -14,7 +14,7 @@

Material Design components for Angular

@@ -26,7 +26,7 @@

Sprint from Zero to App

@@ -38,7 +38,7 @@

Fast and Consistent

@@ -49,7 +49,7 @@

Versatile

- +

Optimized for Angular

diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts index 1023cbd8d..b2475a0d0 100644 --- a/src/app/shared/shared-module.ts +++ b/src/app/shared/shared-module.ts @@ -11,7 +11,6 @@ import {GuideItems} from './guide-items/guide-items'; import {ThemeStorage} from './theme-picker/theme-storage/theme-storage'; import {ThemePicker} from './theme-picker/theme-picker'; import {NavBar} from './navbar/navbar'; -import {SvgBuilder} from './svg-viewer/svg-builder'; import {SvgViewer} from './svg-viewer/svg-viewer'; import {DocsMaterialModule} from '../app-module'; @@ -25,7 +24,7 @@ import {DocsMaterialModule} from '../app-module'; ], declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer], exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer], - providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder], + providers: [DocumentationItems, GuideItems, ThemeStorage], entryComponents: [ ExampleViewer, ], diff --git a/src/app/shared/svg-viewer/svg-builder.spec.ts b/src/app/shared/svg-viewer/svg-builder.spec.ts deleted file mode 100644 index 473874b0d..000000000 --- a/src/app/shared/svg-viewer/svg-builder.spec.ts +++ /dev/null @@ -1,85 +0,0 @@ -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {async, inject, TestBed} from '@angular/core/testing'; -import {HttpModule} from '@angular/http'; -import {MaterialModule} from '@angular/material'; - -import {DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage'; -import {SvgBuilder} from './svg-builder'; - - -describe('SVG Builder', () => { - const defaultData = SvgBuilder.DEFAULT_THEME; - const black = '#000000'; - const white = '#ffffff'; - const primary = '#FFA669'; - const accent = '#F0F8FF'; - let testTheme: DocsSiteTheme; - let template; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - imports: [MaterialModule, HttpModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - providers: [SvgBuilder], - }); - })); - - beforeEach(() => { - testTheme = { - isDark: false, - href: 'coolland.py', - primary: '#FFA669', - accent, - }; - - template = ''; - Object.keys(defaultData).forEach(key => { - if (defaultData[key]) { - template += `someRandomData fill="${defaultData[key]}"`; - } - }); - }); - - it('replaceColor should return a string with all instances of a hex code replaced', - inject([SvgBuilder], (service: SvgBuilder) => { - const oneHexCode = ``; - const twoHexCodes = ``; - const checkStringMissingIn = (template, search) => !~template.indexOf(search); - const result1 = service._replaceColor(oneHexCode, black, white); - const result2 = service._replaceColor(twoHexCodes, black, white); - [result1, result2].forEach(result => { - expect(checkStringMissingIn(result, black)).toBeTruthy(); - expect(checkStringMissingIn(result, white)).toBeFalsy(); - }); - })); - - it('should build a ThemeColors object based off a primary and secondary hex code', - inject([SvgBuilder], (service: SvgBuilder) => { - const result = service.createThemeColors(testTheme); - const expectedKeys = Object.keys(defaultData); - Object.keys(result).forEach(key => { - expect(result[key]).toBeTruthy(); - expect(expectedKeys.find(ek => ek === key)).toBeTruthy(); - }); - })); - - it('replaceColorCodes will replace all instances of a previous theme\'s colors, with new ones', - inject([SvgBuilder], (service: SvgBuilder) => { - const colors = service.createThemeColors(testTheme); - const newTemplate = service.replaceColorCodes(template, colors, defaultData); - Object.keys(colors).forEach(key => { - expect(~newTemplate.indexOf(colors[key])).toBeTruthy(); - if (defaultData[key]) { - expect(~newTemplate.indexOf(defaultData[key])).toBeFalsy(); - } - }); - })); - - it('should return a new template and theme colors when calling buildSvg', - inject([SvgBuilder], (service: SvgBuilder) => { - const result = service.buildSvg(testTheme, template, defaultData); - expect(result.colors).toEqual(service.createThemeColors(testTheme)); - expect(result.newTemplate).toEqual(service.replaceColorCodes( - template, result.colors, defaultData)); - })); -}); diff --git a/src/app/shared/svg-viewer/svg-builder.ts b/src/app/shared/svg-viewer/svg-builder.ts deleted file mode 100644 index ad2866986..000000000 --- a/src/app/shared/svg-viewer/svg-builder.ts +++ /dev/null @@ -1,91 +0,0 @@ -import {Injectable} from '@angular/core'; -import {Http} from '@angular/http'; - -import {DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage'; - -import * as Color from 'color'; - - -// Accent isn't currently used in SVGs.. uncomment to use it again in colour schemes -export interface ThemeColors { - gradientPrimaryDark: string; - gradientPrimary: string; - washedOutPrimary: string; - offWhitePrimary: string; - lighterPrimary: string; - lightPrimary: string; - deepPrimary: string; - primary: string; - darkerPrimary: string; - // accent: string; -}; - - -@Injectable() -export class SvgBuilder { - static DEFAULT_THEME: ThemeColors = { - gradientPrimary: '#0CBFD6', - gradientPrimaryDark: '#05BED5', - washedOutPrimary: '#E1F7FA', - offWhitePrimary: '#B9EDF3', - lighterPrimary: '#CCF2F6', - lightPrimary: '#00BCD4', - primary: '#89E0EB', - deepPrimary: '#00BDD5', - darkerPrimary: '#5CD8E7', - // accent: '#274C51', - }; - - constructor(private http: Http) { - } - - public buildSvg(theme: DocsSiteTheme, template: string, previousThemeColors) { - const colors = theme ? this.createThemeColors(theme) : SvgBuilder.DEFAULT_THEME; - const newTemplate = this.replaceColorCodes(template, colors, previousThemeColors); - return {newTemplate, colors}; - } - - public createThemeColors(theme: DocsSiteTheme): ThemeColors { - const {primary} = theme; - return { - primary, - gradientPrimaryDark: Color(primary).lighten(0.3).hex(), - gradientPrimary: Color(primary).lighten(0.4).hex(), - washedOutPrimary: Color(primary).lighten(0.85).hex(), - offWhitePrimary: Color(primary).lighten(0.8).hex(), - lighterPrimary: Color(primary).lighten(0.6).hex(), - lightPrimary: Color(primary).lighten(0.2).hex(), - deepPrimary: Color(primary).darken(0.3).hex(), - darkerPrimary: Color(primary).darken(0.4).hex(), - }; - } - - // Used by svg-viewer class - public getSvgAsString(path: string): Promise { - const svgAbsPath = this._getAbsPath(path); - return this.http.get(svgAbsPath).toPromise() - .then((data: any) => data._body); - } - - private _getAbsPath(path: string): string { - // SVG assets all come from the /assets/ path - const svgBasePath = 'assets/'; - return path.slice((path.indexOf(svgBasePath)-1)); - } - - public replaceColorCodes(template: string, colors: ThemeColors, previousThemeColors: ThemeColors): string { - let finalTemplate = template; - Object.keys(colors).forEach(key => { - const prevColor = previousThemeColors[key]; - const newColor = colors[key]; - if (prevColor && newColor) { - finalTemplate = this._replaceColor(finalTemplate, prevColor, newColor); - } - }); - return finalTemplate; - } - - public _replaceColor(template: string, color: string, replacement: string): string { - return template.replace(new RegExp(color, 'gi'), replacement); - } -} diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts index 8a6d5873c..87ed79002 100644 --- a/src/app/shared/svg-viewer/svg-viewer.ts +++ b/src/app/shared/svg-viewer/svg-viewer.ts @@ -1,80 +1,40 @@ -import {ElementRef, Component, Input} from '@angular/core'; +import {Component, ElementRef, Input, OnInit} from '@angular/core'; import {Http} from '@angular/http'; -import {Observable} from 'rxjs/Observable'; -import {Subscription} from 'rxjs/Subscription'; - -import {ThemeColors, SvgBuilder} from './svg-builder'; -import {ThemeStorage, DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage'; @Component({ selector: 'docs-svg-viewer', template: '
', }) - -export class SvgViewer { - @Input() svgHref: string; +export class SvgViewer implements OnInit { + @Input() src: string; @Input() scaleToContainer: boolean; - private _subscription: Subscription; - private currTheme: DocsSiteTheme; - private _previousThemeColors: ThemeColors = SvgBuilder.DEFAULT_THEME; - - constructor( - public themeStorage: ThemeStorage, - public svgBuilder: SvgBuilder, - public el: ElementRef, - public http: Http - ) { - this.currTheme = this.themeStorage.getStoredTheme(); - this._subscription = this.themeStorage.onThemeUpdate - .subscribe(theme => this.swapTheme(theme)); - } + constructor(private elementRef: ElementRef, private http: Http) { } - public ngAfterViewInit() { - if (this.currTheme) { - setTimeout(() => this.swapTheme(this.currTheme)); - } else { - setTimeout(() => this.svgBuilder.getSvgAsString(this.svgHref) - .then(svgString => this.injectSvg(svgString))); - } + ngOnInit() { + this.fetchAndInlineSvgContent(this.src); } - public swapTheme(theme) { - if (this._getSvgFromDom()) { - this._convertToTheme(theme, this._getSvgFromDom()); - } else { - this.svgBuilder.getSvgAsString(this.svgHref) - .then(svgString => this._convertToTheme(theme, svgString)); - } - } - - private _convertToTheme(theme, template) { - const {newTemplate, colors} = this.svgBuilder.buildSvg( - theme, template, this._previousThemeColors); - this.injectSvg(newTemplate); - this._previousThemeColors = colors; - } - - public ngOnDestroy() { - if (this._subscription) { - this._subscription.unsubscribe(); - } - } - - public injectSvg(template) { - this.el.nativeElement.innerHTML = template; + private inlineSvgContent(template) { + this.elementRef.nativeElement.innerHTML = template; if (this.scaleToContainer) { - let svg = this.el.nativeElement.querySelector('svg'); + let svg = this.elementRef.nativeElement.querySelector('svg'); svg.setAttribute('width', '100%'); svg.setAttribute('height', '100%'); svg.setAttribute('preserveAspectRatio', 'xMidYMid meet'); } } - private _getSvgFromDom() { - const svg = this.el.nativeElement.querySelector('svg'); - return svg ? this.el.nativeElement.innerHTML : null; + private fetchAndInlineSvgContent(path: string): void { + const svgAbsPath = getAbsolutePathFromSrc(path); + this.http.get(svgAbsPath).subscribe(svgResponse => { + this.inlineSvgContent(svgResponse.text()) + }); } } + +function getAbsolutePathFromSrc(src: string) { + return src.slice(src.indexOf('assets/') - 1); +} diff --git a/src/styles/_svg-theme.scss b/src/styles/_svg-theme.scss new file mode 100644 index 000000000..f2a1a9d96 --- /dev/null +++ b/src/styles/_svg-theme.scss @@ -0,0 +1,42 @@ +// @import '~@angular/material/theming'; +@import '../../node_modules/@angular/material/theming'; + +// Mixin to create a css class for each fill, stroke, and stop-color for a given color. +@mixin _svgColorProperties($className, $color) { + .docs-svg-#{$className}-fill { + fill: $color; + } + + .docs-svg-#{$className}-stroke { + stroke: $color; + } + + .docs-svg-#{$className}-stop-color { + stop-color: $color; + } +} + +// Mixin to apply theme colors for generated API docs. +@mixin docs-site-svg-theme($theme) { + $primary: map-get($theme, primary); + $accent: map-get($theme, accent); + $warn: map-get($theme, warn); + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); + $is-dark-theme: map-get($theme, is-dark); + + @include _svgColorProperties(primary, mat-color($primary)); + @include _svgColorProperties(accent, mat-color($accent)); + + // Use sass's `lighten` and `darken` to create gradient colors for the docs SVGs. + // This is specifically tailored to the SVGs in this app and is not a general approach. + $base: mat-color($primary); + @include _svgColorProperties(primary-dark-30, scale_color($base, $lightness: -30%)); + @include _svgColorProperties(primary-dark-40, scale_color($base, $lightness: -40%)); + @include _svgColorProperties(primary-light-20, scale_color($base, $lightness: +20%)); + @include _svgColorProperties(primary-light-30, scale_color($base, $lightness: +30%)); + @include _svgColorProperties(primary-light-40, scale_color($base, $lightness: +40%)); + @include _svgColorProperties(primary-light-60, scale_color($base, $lightness: +60%)); + @include _svgColorProperties(primary-light-80, scale_color($base, $lightness: +80%)); + @include _svgColorProperties(primary-light-85, scale_color($base, $lightness: +85%)); +} From df0bc3c14b6ec2753b97856f229ed27268314f1f Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 15:28:04 -0700 Subject: [PATCH 08/15] Change default theme to indigo-pink --- browser-providers.js | 2 +- .../component-viewer/_component-viewer-theme.scss | 1 + src/app/pages/guide-list/guide-list.spec.ts | 3 +-- src/app/shared/theme-picker/theme-picker.html | 2 +- src/app/shared/theme-picker/theme-picker.spec.ts | 6 +++++- src/app/shared/theme-picker/theme-picker.ts | 15 +++++++++++---- .../theme-picker/theme-storage/theme-storage.ts | 1 + src/main.scss | 4 ++-- 8 files changed, 23 insertions(+), 11 deletions(-) diff --git a/browser-providers.js b/browser-providers.js index 850158dde..352f1c03a 100644 --- a/browser-providers.js +++ b/browser-providers.js @@ -26,7 +26,7 @@ const configuration = { 'iOS7': { unitTest: {target: null}, e2e: {target: null}}, 'iOS8': { unitTest: {target: null}, e2e: {target: null}}, 'iOS9': { unitTest: {target: 'BS'}, e2e: {target: null}}, - 'WindowsPhone': { unitTest: {target: 'BS'}, e2e: {target: null}} + 'WindowsPhone': { unitTest: {target: null}, e2e: {target: null}} }; exports.customLaunchers = { diff --git a/src/app/pages/component-viewer/_component-viewer-theme.scss b/src/app/pages/component-viewer/_component-viewer-theme.scss index 1d196fa55..b6b9151f1 100644 --- a/src/app/pages/component-viewer/_component-viewer-theme.scss +++ b/src/app/pages/component-viewer/_component-viewer-theme.scss @@ -7,6 +7,7 @@ $background: map-get($theme, background); $foreground: map-get($theme, foreground); + guide-viewer, app-component-viewer { color: mat-color($foreground, text); diff --git a/src/app/pages/guide-list/guide-list.spec.ts b/src/app/pages/guide-list/guide-list.spec.ts index 2b3f1663b..4fd893baa 100644 --- a/src/app/pages/guide-list/guide-list.spec.ts +++ b/src/app/pages/guide-list/guide-list.spec.ts @@ -1,7 +1,6 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {CommonModule} from '@angular/common'; import {RouterTestingModule} from '@angular/router/testing'; import {MaterialModule} from '@angular/material'; diff --git a/src/app/shared/theme-picker/theme-picker.html b/src/app/shared/theme-picker/theme-picker.html index b2f6cbd88..13832682e 100644 --- a/src/app/shared/theme-picker/theme-picker.html +++ b/src/app/shared/theme-picker/theme-picker.html @@ -6,7 +6,7 @@ -
+
check_circle
diff --git a/src/app/shared/theme-picker/theme-picker.spec.ts b/src/app/shared/theme-picker/theme-picker.spec.ts index 1b14dae18..5cfd97033 100644 --- a/src/app/shared/theme-picker/theme-picker.spec.ts +++ b/src/app/shared/theme-picker/theme-picker.spec.ts @@ -22,7 +22,11 @@ describe('ThemePicker', () => { const component = fixture.componentInstance; const href = 'pink-bluegrey.css'; spyOn(component.styleManager, 'setStyle'); - component.installTheme(href); + component.installTheme({ + primary: '#E91E63', + accent: '#607D8B', + href, + }); expect(component.styleManager.setStyle).toHaveBeenCalled(); expect(component.styleManager.setStyle).toHaveBeenCalledWith('theme', `assets/${href}`); }); diff --git a/src/app/shared/theme-picker/theme-picker.ts b/src/app/shared/theme-picker/theme-picker.ts index c62592424..643ab0544 100644 --- a/src/app/shared/theme-picker/theme-picker.ts +++ b/src/app/shared/theme-picker/theme-picker.ts @@ -26,6 +26,7 @@ export class ThemePicker { accent: '#E91E63', href: 'indigo-pink.css', isDark: false, + isDefault: true, }, { primary: '#E91E63', @@ -47,13 +48,19 @@ export class ThemePicker { ) { const currentTheme = this._themeStorage.getStoredTheme(); if (currentTheme) { - this.installTheme(currentTheme.href); + this.installTheme(currentTheme); } } - installTheme(href: string) { - this.currentTheme = this._getCurrentThemeFromHref(href); - this.styleManager.setStyle('theme', `assets/${href}`); + installTheme(theme: DocsSiteTheme) { + this.currentTheme = this._getCurrentThemeFromHref(theme.href); + + if (theme.isDefault) { + this.styleManager.removeStyle('theme'); + } else { + this.styleManager.setStyle('theme', `assets/${theme.href}`); + } + if (this.currentTheme) { this._themeStorage.storeTheme(this.currentTheme); } diff --git a/src/app/shared/theme-picker/theme-storage/theme-storage.ts b/src/app/shared/theme-picker/theme-storage/theme-storage.ts index 94b241aa2..dad6a3cc5 100644 --- a/src/app/shared/theme-picker/theme-storage/theme-storage.ts +++ b/src/app/shared/theme-picker/theme-storage/theme-storage.ts @@ -5,6 +5,7 @@ export interface DocsSiteTheme { accent: string; primary: string; isDark?: boolean; + isDefault?: boolean; }; diff --git a/src/main.scss b/src/main.scss index 1c90e5b3d..bb4404bde 100644 --- a/src/main.scss +++ b/src/main.scss @@ -11,8 +11,8 @@ // Define the light theme. -$primary: mat-palette($mat-cyan); -$accent: mat-palette($mat-amber, A200, A100, A400); +$primary: mat-palette($mat-indigo); +$accent: mat-palette($mat-pink, A200, A100, A400); $theme: mat-light-theme($primary, $accent); @include angular-material-theme($theme); From 4a983c874119c4d3cda150763846f1251ff3826f Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sat, 17 Jun 2017 17:42:17 -0700 Subject: [PATCH 09/15] Make all tests use a consistenting testing module --- karma.conf.js | 3 +- package.json | 1 + scripts/ci/build-and-test.sh | 3 +- src/app/app-module.ts | 109 +++++++----------- src/app/material-docs-app.spec.ts | 9 -- .../component-category-list.spec.ts | 26 ++--- .../component-category-list.ts | 14 ++- .../component-list/component-list.spec.ts | 27 ++--- .../pages/component-list/component-list.ts | 14 ++- .../component-page-header.spec.ts | 20 ++-- .../component-page-header.ts | 11 +- .../component-sidenav.spec.ts | 39 ++----- .../component-sidenav/component-sidenav.ts | 20 +++- .../component-viewer/component-viewer.spec.ts | 51 ++++---- .../component-viewer/component-viewer.ts | 15 ++- src/app/pages/guide-list/guide-list.spec.ts | 24 ++-- src/app/pages/guide-list/guide-list.ts | 15 ++- .../pages/guide-viewer/guide-viewer.spec.ts | 25 ++-- src/app/pages/guide-viewer/guide-viewer.ts | 16 ++- src/app/pages/homepage/homepage.ts | 13 ++- src/app/pages/page-title/page-title.spec.ts | 1 - src/app/routes.ts | 7 +- .../shared/doc-viewer/doc-viewer-module.ts | 30 +++++ src/app/shared/doc-viewer/doc-viewer.spec.ts | 21 ++-- src/app/shared/doc-viewer/doc-viewer.ts | 10 +- src/app/shared/doc-viewer/index.ts | 1 - .../documentation-items.spec.ts | 6 +- .../shared/example-viewer/example-viewer.html | 2 +- .../example-viewer/example-viewer.spec.ts | 78 ++++++------- .../shared/example-viewer/example-viewer.ts | 6 - src/app/shared/footer/footer.html | 2 +- src/app/shared/footer/footer.spec.ts | 16 +-- src/app/shared/footer/footer.ts | 9 +- .../shared/guide-items/guide-items.spec.ts | 6 +- src/app/shared/navbar/navbar.spec.ts | 17 ++- src/app/shared/navbar/navbar.ts | 12 +- src/app/shared/plunker/plunker-button.ts | 17 ++- src/app/shared/plunker/plunker-writer.spec.ts | 20 ++-- src/app/shared/shared-module.ts | 32 ----- .../style-manager/style-manager.spec.ts | 4 +- src/app/shared/svg-viewer/svg-viewer.ts | 10 +- .../shared/theme-picker/theme-picker.spec.ts | 15 +-- src/app/shared/theme-picker/theme-picker.ts | 12 +- src/app/testing/testing-module.ts | 16 +++ 44 files changed, 422 insertions(+), 383 deletions(-) delete mode 100644 src/app/material-docs-app.spec.ts create mode 100644 src/app/shared/doc-viewer/doc-viewer-module.ts delete mode 100644 src/app/shared/doc-viewer/index.ts delete mode 100644 src/app/shared/shared-module.ts create mode 100644 src/app/testing/testing-module.ts diff --git a/karma.conf.js b/karma.conf.js index a97bab555..63a6b6252 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -16,7 +16,8 @@ module.exports = function (config) { require('karma-sauce-launcher'), ], files: [ - { pattern: './src/test.ts', watched: false } + {pattern: './src/test.ts', watched: false}, + {pattern: 'node_modules/hammerjs/hammer.js', included: true, watched: false}, ], preprocessors: { './src/test.ts': ['@angular/cli'] diff --git a/package.json b/package.json index 7e3d4095e..4e1084e00 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "@angular/compiler-cli": "^4.0.0", "@types/jasmine": "^2.5.41", "@types/node": "^7.0.5", + "hammerjs": "^2.0.8", "highlight.js": "^9.9.0", "jasmine-core": "2.4.1", "jasmine-spec-reporter": "2.5.0", diff --git a/scripts/ci/build-and-test.sh b/scripts/ci/build-and-test.sh index b4235f175..23a66bfda 100755 --- a/scripts/ci/build-and-test.sh +++ b/scripts/ci/build-and-test.sh @@ -18,8 +18,9 @@ if is_lint; then elif is_e2e; then $(npm bin)/ng e2e else + npm run build-themes $(npm bin)/ng test --watch false fi # Shutdown the previous created tunnel. -teardown_tunnel \ No newline at end of file +teardown_tunnel diff --git a/src/app/app-module.ts b/src/app/app-module.ts index b0d1407cb..9937d934c 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -1,92 +1,69 @@ import {BrowserModule} from '@angular/platform-browser'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {NgModule} from '@angular/core'; -import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common'; +import {LocationStrategy, PathLocationStrategy} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {HttpModule} from '@angular/http'; -import { - MdButtonModule, - MdCardModule, - MdGridListModule, - MdIconModule, - MdListModule, - MdMenuModule, - MdNativeDateModule, - MdSidenavModule, MdTabsModule, - MdToolbarModule, - MdTooltipModule, PortalModule, -} from '@angular/material'; +import {RouterModule} from '@angular/router'; +import {MdNativeDateModule} from '@angular/material'; import {ExampleModule} from '@angular/material-examples'; import {MaterialDocsApp} from './material-docs-app'; -import {Homepage} from './pages/homepage/homepage'; -import {routing} from './routes'; -import {ComponentList} from './pages/component-list/component-list'; -import {ComponentViewer} from './pages/component-viewer/component-viewer'; -import {GuideList} from './pages/guide-list'; -import {GuideViewer} from './pages/guide-viewer'; -import {SharedModule} from './shared/shared-module'; -import {ComponentCategoryList} from './pages/component-category-list/component-category-list'; -import {ComponentSidenav} from './pages/component-sidenav/component-sidenav'; -import {Footer} from './shared/footer/footer'; +import {HomepageModule} from './pages/homepage/homepage'; +import {MATERIAL_DOCS_ROUTES} from './routes'; +import {ComponentListModule} from './pages/component-list/component-list'; +import {ComponentViewerModule} from './pages/component-viewer/component-viewer'; +import {ComponentCategoryListModule} from './pages/component-category-list/component-category-list'; +import {ComponentSidenavModule} from './pages/component-sidenav/component-sidenav'; +import {FooterModule} from './shared/footer/footer'; import {ComponentPageTitle} from './pages/page-title/page-title'; -import {ComponentPageHeader} from './pages/component-page-header/component-page-header'; +import {ComponentHeaderModule} from './pages/component-page-header/component-page-header'; import {StyleManager} from './shared/style-manager/style-manager'; - - -export const MATERIAL_COMPONENTS_USED = [ - MdButtonModule, - MdCardModule, - MdGridListModule, - MdIconModule, - MdListModule, - MdMenuModule, - MdSidenavModule, - MdTabsModule, - MdToolbarModule, - MdTooltipModule, - PortalModule, -]; +import {SvgViewerModule} from './shared/svg-viewer/svg-viewer'; +import {ThemePickerModule} from './shared/theme-picker/theme-picker'; +import {PlunkerButtonModule} from './shared/plunker/plunker-button'; +import {NavBarModule} from './shared/navbar/navbar'; +import {ExampleViewer} from './shared/example-viewer/example-viewer'; +import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage'; +import {GuideItems} from './shared/guide-items/guide-items'; +import {DocumentationItems} from './shared/documentation-items/documentation-items'; +import {GuideListModule} from './pages/guide-list/guide-list'; +import {GuideViewerModule} from './pages/guide-viewer/guide-viewer'; +import {DocViewerModule} from './shared/doc-viewer/doc-viewer-module'; @NgModule({ - imports: MATERIAL_COMPONENTS_USED, - exports: MATERIAL_COMPONENTS_USED, -}) -export class DocsMaterialModule {} - - -@NgModule({ - declarations: [ - MaterialDocsApp, - ComponentCategoryList, - ComponentList, - ComponentSidenav, - ComponentViewer, - ComponentPageHeader, - GuideList, - GuideViewer, - Homepage, - Footer, - ], - exports: [ - MaterialDocsApp, - Homepage, - ], imports: [ BrowserModule, BrowserAnimationsModule, ExampleModule, - SharedModule, FormsModule, HttpModule, - DocsMaterialModule, MdNativeDateModule, - routing, + RouterModule.forRoot(MATERIAL_DOCS_ROUTES), + + ComponentCategoryListModule, + ComponentHeaderModule, + ComponentListModule, + ComponentSidenavModule, + ComponentViewerModule, + DocViewerModule, + FooterModule, + GuideListModule, + GuideListModule, + GuideViewerModule, + HomepageModule, + NavBarModule, + PlunkerButtonModule, + SvgViewerModule, + ThemePickerModule, ], + declarations: [MaterialDocsApp], providers: [ - Location, ComponentPageTitle, + DocumentationItems, + GuideItems, StyleManager, + ThemeStorage, {provide: LocationStrategy, useClass: PathLocationStrategy}, ], bootstrap: [MaterialDocsApp], diff --git a/src/app/material-docs-app.spec.ts b/src/app/material-docs-app.spec.ts deleted file mode 100644 index 3e6dca7c5..000000000 --- a/src/app/material-docs-app.spec.ts +++ /dev/null @@ -1,9 +0,0 @@ - -describe('Material Docs', () => { - - - it('should expect true to be true', () => { - expect(true).toBe(true); - }); - -}); diff --git a/src/app/pages/component-category-list/component-category-list.spec.ts b/src/app/pages/component-category-list/component-category-list.spec.ts index 87a617a10..f5d1e99ca 100644 --- a/src/app/pages/component-category-list/component-category-list.spec.ts +++ b/src/app/pages/component-category-list/component-category-list.spec.ts @@ -1,10 +1,6 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MaterialModule} from '@angular/material'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; - -import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {ComponentPageTitle} from '../page-title/page-title'; -import {ComponentCategoryList} from './component-category-list'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentCategoryList, ComponentCategoryListModule} from './component-category-list'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('ComponentCategoryList', () => { @@ -12,18 +8,14 @@ describe('ComponentCategoryList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ComponentCategoryList], - providers: [ - DocumentationItems, - ComponentPageTitle - ] - }); - - fixture = TestBed.createComponent(ComponentCategoryList) + imports: [ComponentCategoryListModule, DocsAppTestingModule], + }).compileComponents(); })); + beforeEach(() => { + fixture = TestBed.createComponent(ComponentCategoryList); + }); + it('should set page title on init', () => { const component = fixture.componentInstance; spyOn(component, 'ngOnInit').and.callThrough(); diff --git a/src/app/pages/component-category-list/component-category-list.ts b/src/app/pages/component-category-list/component-category-list.ts index caf01b8e4..8630cd050 100644 --- a/src/app/pages/component-category-list/component-category-list.ts +++ b/src/app/pages/component-category-list/component-category-list.ts @@ -1,6 +1,10 @@ -import {Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; +import {MdCardModule} from '@angular/material'; +import {CommonModule} from '@angular/common'; +import {RouterModule} from '@angular/router'; import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; import {ComponentPageTitle} from '../page-title/page-title'; +import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer'; @Component({ @@ -16,3 +20,11 @@ export class ComponentCategoryList { this._componentPageTitle.title = 'Component Library'; } } + +@NgModule({ + imports: [SvgViewerModule, MdCardModule, CommonModule, RouterModule], + exports: [ComponentCategoryList], + declarations: [ComponentCategoryList], + providers: [DocumentationItems, ComponentPageTitle], +}) +export class ComponentCategoryListModule { } diff --git a/src/app/pages/component-list/component-list.spec.ts b/src/app/pages/component-list/component-list.spec.ts index 36d21cda5..db140c5ff 100644 --- a/src/app/pages/component-list/component-list.spec.ts +++ b/src/app/pages/component-list/component-list.spec.ts @@ -1,13 +1,8 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {MaterialModule} from '@angular/material'; -import {ActivatedRoute, Router} from '@angular/router'; -import {RouterTestingModule} from '@angular/router/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {ActivatedRoute} from '@angular/router'; import {Observable} from 'rxjs/Observable'; - -import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {ComponentPageTitle} from '../page-title/page-title'; -import {ComponentList} from './component-list'; +import {ComponentList, ComponentListModule} from './component-list'; +import {DocsAppTestingModule} from '../../testing/testing-module'; const CATEGORY_ID = 'forms'; const mockActivatedRoute = { @@ -22,18 +17,16 @@ describe('ComponentList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule, RouterTestingModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ComponentList], + imports: [ComponentListModule, DocsAppTestingModule], providers: [ - {provide: ActivatedRoute, useValue: mockActivatedRoute}, - ComponentPageTitle, - DocumentationItems, + {provide: ActivatedRoute, useValue: mockActivatedRoute} ] - }); + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(ComponentList); - })); + }); it('should set the category from router params', done => { const component = fixture.componentInstance; diff --git a/src/app/pages/component-list/component-list.ts b/src/app/pages/component-list/component-list.ts index 5ad1467cf..051a89266 100644 --- a/src/app/pages/component-list/component-list.ts +++ b/src/app/pages/component-list/component-list.ts @@ -1,10 +1,12 @@ -import {Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; import { DocumentationItems, DocCategory } from '../../shared/documentation-items/documentation-items'; -import {ActivatedRoute} from '@angular/router'; +import {ActivatedRoute, RouterModule} from '@angular/router'; import {ComponentPageTitle} from '../page-title/page-title'; +import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer'; +import {CommonModule} from '@angular/common'; @Component({ selector: 'app-components', @@ -23,3 +25,11 @@ export class ComponentList { }); } } + +@NgModule({ + imports: [SvgViewerModule, RouterModule, CommonModule], + exports: [ComponentList], + declarations: [ComponentList], + providers: [DocumentationItems, ComponentPageTitle], +}) +export class ComponentListModule { } diff --git a/src/app/pages/component-page-header/component-page-header.spec.ts b/src/app/pages/component-page-header/component-page-header.spec.ts index 21a511c06..5a0203c44 100644 --- a/src/app/pages/component-page-header/component-page-header.spec.ts +++ b/src/app/pages/component-page-header/component-page-header.spec.ts @@ -1,9 +1,6 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MaterialModule} from '@angular/material'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; - -import {ComponentPageTitle} from '../page-title/page-title'; -import {ComponentPageHeader} from './component-page-header'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {ComponentHeaderModule, ComponentPageHeader} from './component-page-header'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('ComponentPageHeader', () => { @@ -11,14 +8,13 @@ describe('ComponentPageHeader', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ComponentPageHeader], - providers: [ComponentPageTitle], - }); + imports: [ComponentHeaderModule, DocsAppTestingModule], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(ComponentPageHeader); - })); + }); it('should return the title', () => { const component = fixture.componentInstance; diff --git a/src/app/pages/component-page-header/component-page-header.ts b/src/app/pages/component-page-header/component-page-header.ts index 7b1f5cdc7..624f53684 100644 --- a/src/app/pages/component-page-header/component-page-header.ts +++ b/src/app/pages/component-page-header/component-page-header.ts @@ -1,6 +1,7 @@ -import {Component, EventEmitter, Output} from '@angular/core'; +import {Component, EventEmitter, NgModule, Output} from '@angular/core'; import 'rxjs/add/operator/first'; import {ComponentPageTitle} from '../page-title/page-title'; +import {MdButtonModule, MdIconModule} from '@angular/material'; @Component({ selector: 'component-page-header', @@ -16,3 +17,11 @@ export class ComponentPageHeader { return this._componentPageTitle.title; } } + +@NgModule({ + imports: [MdButtonModule, MdIconModule], + exports: [ComponentPageHeader], + declarations: [ComponentPageHeader], + providers: [ComponentPageTitle], +}) +export class ComponentHeaderModule { } diff --git a/src/app/pages/component-sidenav/component-sidenav.spec.ts b/src/app/pages/component-sidenav/component-sidenav.spec.ts index 5b9022373..7bfcb4bbf 100644 --- a/src/app/pages/component-sidenav/component-sidenav.spec.ts +++ b/src/app/pages/component-sidenav/component-sidenav.spec.ts @@ -1,19 +1,7 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {MaterialModule, MdSidenav} from '@angular/material'; -import {RouterTestingModule} from '@angular/router/testing'; -import {Observable} from 'rxjs/Observable'; -import {Router} from '@angular/router'; -import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from '@angular/core'; - -import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {ComponentSidenav} from './component-sidenav'; - -const mockRouter = { - events: Observable.create(observer => { - observer.next(null); - observer.complete(); - }) -}; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; +import {MdSidenav} from '@angular/material'; +import {ComponentSidenav, ComponentSidenavModule} from './component-sidenav'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('ComponentSidenav', () => { @@ -21,17 +9,13 @@ describe('ComponentSidenav', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - schemas: [NO_ERRORS_SCHEMA], - declarations: [ComponentSidenav], - providers: [ - {provide: Router, useValue: mockRouter}, - DocumentationItems - ], - }); + imports: [ComponentSidenavModule, DocsAppTestingModule], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(ComponentSidenav); - })); + }); it('should close the sidenav on init', () => { const component = fixture.componentInstance; @@ -41,14 +25,11 @@ describe('ComponentSidenav', () => { matches: true }); - // Spy on viewChild component's `close` method - spyOn(component.sidenav, 'close'); - fixture.detectChanges(); expect(component.sidenav instanceof MdSidenav).toBeTruthy(); expect(component.isScreenSmall()).toBeTruthy(); - expect(component.sidenav.close).toHaveBeenCalled(); + expect(component.sidenav.opened).toBe(false); }); it('should show a link for each item in doc items categories', () => { diff --git a/src/app/pages/component-sidenav/component-sidenav.ts b/src/app/pages/component-sidenav/component-sidenav.ts index 0b6e73973..8e3f4c253 100644 --- a/src/app/pages/component-sidenav/component-sidenav.ts +++ b/src/app/pages/component-sidenav/component-sidenav.ts @@ -1,7 +1,10 @@ -import {Component, ViewEncapsulation, ViewChild} from '@angular/core'; +import {Component, ViewEncapsulation, ViewChild, OnInit, NgModule} from '@angular/core'; import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {MdSidenav} from '@angular/material'; -import {Router} from '@angular/router'; +import {MdSidenav, MdSidenavModule} from '@angular/material'; +import {Router, RouterModule} from '@angular/router'; +import {CommonModule} from '@angular/common'; +import {ComponentHeaderModule} from '../component-page-header/component-page-header'; +import {FooterModule} from '../../shared/footer/footer'; const SMALL_WIDTH_BREAKPOINT = 840; @@ -11,7 +14,7 @@ const SMALL_WIDTH_BREAKPOINT = 840; styleUrls: ['./component-sidenav.scss'], encapsulation: ViewEncapsulation.None, }) -export class ComponentSidenav { +export class ComponentSidenav implements OnInit { constructor(public docItems: DocumentationItems, private _router: Router) {} @@ -29,3 +32,12 @@ export class ComponentSidenav { return window.matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`).matches; } } + + +@NgModule({ + imports: [MdSidenavModule, RouterModule, CommonModule, ComponentHeaderModule, FooterModule], + exports: [ComponentSidenav], + declarations: [ComponentSidenav], + providers: [DocumentationItems], +}) +export class ComponentSidenavModule {} diff --git a/src/app/pages/component-viewer/component-viewer.spec.ts b/src/app/pages/component-viewer/component-viewer.spec.ts index b64b6d232..7dcf9f475 100644 --- a/src/app/pages/component-viewer/component-viewer.spec.ts +++ b/src/app/pages/component-viewer/component-viewer.spec.ts @@ -1,50 +1,57 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {RouterTestingModule} from '@angular/router/testing'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {ActivatedRoute} from '@angular/router'; -import {MaterialModule} from '@angular/material'; import {Observable} from 'rxjs/Observable'; +import {ComponentViewer, ComponentViewerModule} from './component-viewer'; +import {DocsAppTestingModule} from '../../testing/testing-module'; -import {DocumentationItems} from '../../shared/documentation-items/documentation-items'; -import {ComponentPageTitle} from '../page-title/page-title'; -import {ComponentViewer} from './component-viewer'; +import {EXAMPLE_COMPONENTS} from '@angular/material-examples'; +import {MdButtonModule} from '@angular/material'; +import {NgModule} from '@angular/core'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -const docItemsID = 'button'; +const docItemsId = 'button'; +const exampleKey = 'button-types'; const mockActivatedRoute = { params: Observable.create(observer => { - observer.next({id: docItemsID}); + observer.next({id: docItemsId}); observer.complete(); }) }; - describe('ComponentViewer', () => { let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ - BrowserAnimationsModule, - MaterialModule, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [ComponentViewer], + imports: [ComponentViewerModule, DocsAppTestingModule, TestExampleModule], providers: [ {provide: ActivatedRoute, useValue: mockActivatedRoute}, - ComponentPageTitle, - DocumentationItems ] - }); + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(ComponentViewer); - })); + }); it('should set page title correctly', () => { const component = fixture.componentInstance; fixture.detectChanges(); - const expected = `${component.docItems.getItemById(docItemsID).name}`; + const expected = `${component.docItems.getItemById(docItemsId).name}`; expect(component._componentPageTitle.title).toEqual(expected); }); }); + + +// Create a version of ExampleModule for testing with only one component so that we odn't have +// to compile all of the examples for these tests. +@NgModule({ + imports: [ + MdButtonModule, + NoopAnimationsModule, + ], + declarations: [EXAMPLE_COMPONENTS[exampleKey].component], + entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component], +}) +class TestExampleModule { } diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts index 914fbd664..55226f903 100644 --- a/src/app/pages/component-viewer/component-viewer.ts +++ b/src/app/pages/component-viewer/component-viewer.ts @@ -1,7 +1,10 @@ -import {Component, ViewEncapsulation} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; +import {Component, NgModule, ViewEncapsulation} from '@angular/core'; +import {ActivatedRoute, RouterModule} from '@angular/router'; import {DocumentationItems, DocItem} from '../../shared/documentation-items/documentation-items'; import {ComponentPageTitle} from '../page-title/page-title'; +import {MdTabsModule} from '@angular/material'; +import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module'; +import {CommonModule} from '@angular/common'; @Component({ @@ -22,3 +25,11 @@ export class ComponentViewer { }); } } + +@NgModule({ + imports: [MdTabsModule, RouterModule, DocViewerModule, CommonModule], + exports: [ComponentViewer], + declarations: [ComponentViewer], + providers: [DocumentationItems, ComponentPageTitle], +}) +export class ComponentViewerModule {} diff --git a/src/app/pages/guide-list/guide-list.spec.ts b/src/app/pages/guide-list/guide-list.spec.ts index 4fd893baa..efec1031e 100644 --- a/src/app/pages/guide-list/guide-list.spec.ts +++ b/src/app/pages/guide-list/guide-list.spec.ts @@ -1,11 +1,6 @@ import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {RouterTestingModule} from '@angular/router/testing'; -import {MaterialModule} from '@angular/material'; - -import {GuideItems} from '../../shared/guide-items/guide-items'; -import {GuideList} from './guide-list'; +import {GuideList, GuideListModule} from './guide-list'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('GuideList', () => { @@ -13,18 +8,13 @@ describe('GuideList', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [ - BrowserAnimationsModule, - MaterialModule, - RouterTestingModule - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [GuideList], - providers: [GuideItems], - }); + imports: [GuideListModule, DocsAppTestingModule], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(GuideList); - })); + }); it('should display a link for each item in guide items', () => { const component = fixture.componentInstance; diff --git a/src/app/pages/guide-list/guide-list.ts b/src/app/pages/guide-list/guide-list.ts index a9cf5cfa3..453c875c6 100644 --- a/src/app/pages/guide-list/guide-list.ts +++ b/src/app/pages/guide-list/guide-list.ts @@ -1,5 +1,9 @@ -import {Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; import {GuideItems} from '../../shared/guide-items/guide-items'; +import {MdListModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; +import {FooterModule} from '../../shared/footer/footer'; +import {CommonModule} from '@angular/common'; @Component({ selector: 'app-guides', @@ -9,3 +13,12 @@ import {GuideItems} from '../../shared/guide-items/guide-items'; export class GuideList { constructor(public guideItems: GuideItems) {} } + + +@NgModule({ + imports: [MdListModule, RouterModule, FooterModule, CommonModule], + exports: [GuideList], + declarations: [GuideList], + providers: [GuideItems], +}) +export class GuideListModule { } diff --git a/src/app/pages/guide-viewer/guide-viewer.spec.ts b/src/app/pages/guide-viewer/guide-viewer.spec.ts index f39ae4610..ad4b327d6 100644 --- a/src/app/pages/guide-viewer/guide-viewer.spec.ts +++ b/src/app/pages/guide-viewer/guide-viewer.spec.ts @@ -1,16 +1,14 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; import {Observable} from 'rxjs/Observable'; -import {MaterialModule} from '@angular/material'; import {ActivatedRoute} from '@angular/router'; +import {GuideViewer, GuideViewerModule} from './guide-viewer'; +import {DocsAppTestingModule} from '../../testing/testing-module'; -import {GuideItems} from '../../shared/guide-items/guide-items'; -import {GuideViewer} from './guide-viewer'; +const guideItemsId = 'getting-started'; -const guideItemsID = 'getting-started'; const mockActivatedRoute = { params: Observable.create(observer => { - observer.next({id: guideItemsID}); + observer.next({id: guideItemsId}); observer.complete(); }) }; @@ -21,22 +19,21 @@ describe('GuideViewer', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [GuideViewer], + imports: [GuideViewerModule, DocsAppTestingModule], providers: [ {provide: ActivatedRoute, useValue: mockActivatedRoute}, - GuideItems ] - }); + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(GuideViewer); - })); + }); it('should set the guide based off route params', () => { const component = fixture.componentInstance; fixture.detectChanges(); expect(component.guide) - .toEqual(component.guideItems.getItemById(guideItemsID)); + .toEqual(component.guideItems.getItemById(guideItemsId)); }); }); diff --git a/src/app/pages/guide-viewer/guide-viewer.ts b/src/app/pages/guide-viewer/guide-viewer.ts index db2bc5c38..96344d62f 100644 --- a/src/app/pages/guide-viewer/guide-viewer.ts +++ b/src/app/pages/guide-viewer/guide-viewer.ts @@ -1,6 +1,8 @@ -import {Component} from '@angular/core'; -import {ActivatedRoute} from '@angular/router'; -import {GuideItems, GuideItem} from '../../shared/guide-items/guide-items'; +import {Component, NgModule} from '@angular/core'; +import {ActivatedRoute, RouterModule} from '@angular/router'; +import {GuideItem, GuideItems} from '../../shared/guide-items/guide-items'; +import {FooterModule} from '../../shared/footer/footer'; +import {DocViewerModule} from '../../shared/doc-viewer/doc-viewer-module'; @Component({ @@ -17,3 +19,11 @@ export class GuideViewer { }); } } + +@NgModule({ + imports: [DocViewerModule, FooterModule, RouterModule], + exports: [GuideViewer], + declarations: [GuideViewer], + providers: [GuideItems], +}) +export class GuideViewerModule {} diff --git a/src/app/pages/homepage/homepage.ts b/src/app/pages/homepage/homepage.ts index 0a32f1c20..8f575885a 100644 --- a/src/app/pages/homepage/homepage.ts +++ b/src/app/pages/homepage/homepage.ts @@ -1,4 +1,8 @@ -import { Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; +import {SvgViewerModule} from '../../shared/svg-viewer/svg-viewer'; +import {MdButtonModule} from '@angular/material'; +import {FooterModule} from '../../shared/footer/footer'; +import {RouterModule} from '@angular/router'; @Component({ selector: 'app-homepage', @@ -6,3 +10,10 @@ import { Component} from '@angular/core'; styleUrls: ['./homepage.scss'] }) export class Homepage {} + +@NgModule({ + imports: [SvgViewerModule, MdButtonModule, FooterModule, RouterModule], + exports: [Homepage], + declarations: [Homepage], +}) +export class HomepageModule { } diff --git a/src/app/pages/page-title/page-title.spec.ts b/src/app/pages/page-title/page-title.spec.ts index d82c03a64..a07a17ea4 100644 --- a/src/app/pages/page-title/page-title.spec.ts +++ b/src/app/pages/page-title/page-title.spec.ts @@ -1,4 +1,3 @@ -import {async, inject, TestBed, ComponentFixture} from '@angular/core/testing'; import {ComponentPageTitle} from './page-title'; diff --git a/src/app/routes.ts b/src/app/routes.ts index 413245a67..848fdc901 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -1,14 +1,13 @@ -import {ModuleWithProviders} from '@angular/core'; import {Homepage} from './pages/homepage'; import {ComponentList} from './pages/component-list'; import {GuideList} from './pages/guide-list'; -import {Routes, RouterModule} from '@angular/router'; +import {Routes} from '@angular/router'; import {ComponentViewer} from './pages/component-viewer/component-viewer'; import {ComponentCategoryList} from './pages/component-category-list/component-category-list'; import {ComponentSidenav} from './pages/component-sidenav/component-sidenav'; import {GuideViewer} from './pages/guide-viewer/guide-viewer'; -const MATERIAL_DOCS_ROUTES: Routes = [ +export const MATERIAL_DOCS_ROUTES: Routes = [ {path: '', component: Homepage, pathMatch: 'full'}, { path: 'components', @@ -22,5 +21,3 @@ const MATERIAL_DOCS_ROUTES: Routes = [ {path: 'guides', component: GuideList}, {path: 'guide/:id', component: GuideViewer}, ]; - -export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES); diff --git a/src/app/shared/doc-viewer/doc-viewer-module.ts b/src/app/shared/doc-viewer/doc-viewer-module.ts new file mode 100644 index 000000000..aa82e253e --- /dev/null +++ b/src/app/shared/doc-viewer/doc-viewer-module.ts @@ -0,0 +1,30 @@ +import {DocViewer} from './doc-viewer'; +import {ExampleViewer} from '../example-viewer/example-viewer'; +import {PlunkerButtonModule} from '../plunker/plunker-button'; +import { + MdButtonModule, + MdIconModule, + MdTabsModule, + MdTooltipModule, + PortalModule +} from '@angular/material'; +import {CommonModule} from '@angular/common'; +import {NgModule} from '@angular/core'; + + +// ExampleViewer is included in the DocViewerModule because they have a circular dependency. +@NgModule({ + imports: [ + MdButtonModule, + MdIconModule, + MdTooltipModule, + MdTabsModule, + CommonModule, + PortalModule, + PlunkerButtonModule + ], + declarations: [DocViewer, ExampleViewer], + entryComponents: [ExampleViewer], + exports: [DocViewer, ExampleViewer], +}) +export class DocViewerModule { } diff --git a/src/app/shared/doc-viewer/doc-viewer.spec.ts b/src/app/shared/doc-viewer/doc-viewer.spec.ts index cac95fe4e..ec64defac 100644 --- a/src/app/shared/doc-viewer/doc-viewer.spec.ts +++ b/src/app/shared/doc-viewer/doc-viewer.spec.ts @@ -1,26 +1,19 @@ import {Component} from '@angular/core'; -import {TestBed, inject, async} from '@angular/core/testing'; +import {async, inject, TestBed} from '@angular/core/testing'; import {MockBackend} from '@angular/http/testing'; -import {Response, ResponseOptions, XHRBackend} from '@angular/http'; +import {Response, ResponseOptions} from '@angular/http'; import {By} from '@angular/platform-browser'; import {DocViewer} from './doc-viewer'; -import {SharedModule} from '../shared-module'; +import {DocsAppTestingModule} from '../../testing/testing-module'; +import {DocViewerModule} from './doc-viewer-module'; describe('DocViewer', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [SharedModule], - declarations: [ - DocViewerTestComponent, - ], - providers: [ - MockBackend, - {provide: XHRBackend, useExisting: MockBackend}, - ] - }); - - TestBed.compileComponents(); + imports: [DocViewerModule, DocsAppTestingModule], + declarations: [DocViewerTestComponent], + }).compileComponents(); })); beforeEach(inject([MockBackend], (mockBackend: MockBackend) => { diff --git a/src/app/shared/doc-viewer/doc-viewer.ts b/src/app/shared/doc-viewer/doc-viewer.ts index c854422fb..acca654e9 100644 --- a/src/app/shared/doc-viewer/doc-viewer.ts +++ b/src/app/shared/doc-viewer/doc-viewer.ts @@ -1,15 +1,15 @@ import { + ApplicationRef, Component, - Input, - ElementRef, ComponentFactoryResolver, - ViewContainerRef, - ApplicationRef, + ElementRef, Injector, + Input, OnDestroy, + ViewContainerRef } from '@angular/core'; import {Http} from '@angular/http'; -import {DomPortalHost, ComponentPortal} from '@angular/material'; +import {ComponentPortal, DomPortalHost} from '@angular/material'; import {ExampleViewer} from '../example-viewer/example-viewer'; diff --git a/src/app/shared/doc-viewer/index.ts b/src/app/shared/doc-viewer/index.ts deleted file mode 100644 index 67c142bb5..000000000 --- a/src/app/shared/doc-viewer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './doc-viewer'; diff --git a/src/app/shared/documentation-items/documentation-items.spec.ts b/src/app/shared/documentation-items/documentation-items.spec.ts index c7f9e520d..c40d9b92d 100644 --- a/src/app/shared/documentation-items/documentation-items.spec.ts +++ b/src/app/shared/documentation-items/documentation-items.spec.ts @@ -7,12 +7,8 @@ describe('DocViewer', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [], - declarations: [], providers: [DocumentationItems] - }); - - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([DocumentationItems], (di: DocumentationItems) => { diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html index fd20b857e..3c771135a 100644 --- a/src/app/shared/example-viewer/example-viewer.html +++ b/src/app/shared/example-viewer/example-viewer.html @@ -19,7 +19,7 @@ -
diff --git a/src/app/shared/example-viewer/example-viewer.spec.ts b/src/app/shared/example-viewer/example-viewer.spec.ts index fb359e737..267822d76 100644 --- a/src/app/shared/example-viewer/example-viewer.spec.ts +++ b/src/app/shared/example-viewer/example-viewer.spec.ts @@ -1,34 +1,16 @@ -import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {CommonModule} from '@angular/common'; import {ReactiveFormsModule} from '@angular/forms'; import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {Http} from '@angular/http'; -import {MaterialModule} from '@angular/material'; -import {EXAMPLE_COMPONENTS, ExampleModule, LiveExample} from '@angular/material-examples'; +import {EXAMPLE_COMPONENTS} from '@angular/material-examples'; import {ExampleViewer} from './example-viewer'; +import {DocsAppTestingModule} from '../../testing/testing-module'; +import {DocViewerModule} from '../doc-viewer/doc-viewer-module'; +import {MdAutocompleteModule, MdInputModule} from '@angular/material'; +import {NgModule} from '@angular/core'; +import {CommonModule} from '@angular/common'; +import {NoopAnimationsModule} from '@angular/platform-browser/animations'; -const exampleComponentString = 'autocomplete-overview'; - - -// Required for the set example function -@NgModule({ - imports: [ - ExampleModule, - BrowserAnimationsModule, - CommonModule, - MaterialModule, - ReactiveFormsModule, - ], - schemas: [CUSTOM_ELEMENTS_SCHEMA], -}) -class TestAutocompleteOverviewModule { -} - - -class MockHTTP { -} +const exampleKey = 'autocomplete-overview'; describe('ExampleViewer', () => { @@ -36,16 +18,18 @@ describe('ExampleViewer', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule, ReactiveFormsModule, TestAutocompleteOverviewModule], - declarations: [ExampleViewer], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - providers: [ - {provide: Http, useClass: MockHTTP} - ] - }); + imports: [ + DocViewerModule, + DocsAppTestingModule, + ReactiveFormsModule, + TestExampleModule + ], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(ExampleViewer); - })); + }); it('should toggle showSource boolean', () => { const component = fixture.componentInstance; @@ -57,11 +41,11 @@ describe('ExampleViewer', () => { it('should set and return example properly', () => { const component = fixture.componentInstance; - component.example = exampleComponentString; + component.example = exampleKey; fixture.detectChanges(); const data = component.exampleData; - // TODO(jelbourn): remove `as any` once LiveExample is updated to hve optional members. - expect(data).toEqual(EXAMPLE_COMPONENTS[exampleComponentString] as any); + // TODO(jelbourn): remove `as any` once LiveExample is updated to have optional members. + expect(data).toEqual(EXAMPLE_COMPONENTS[exampleKey] as any); }); it('should log message about missing example', () => { @@ -76,16 +60,32 @@ describe('ExampleViewer', () => { it('should return assets path for example based on extension', () => { // set example const component = fixture.componentInstance; - component.example = exampleComponentString; + component.example = exampleKey; fixture.detectChanges(); // get example file path for each extension const extensions = ['ts', 'css', 'html']; const basePath = '/assets/examples/'; extensions.forEach(ext => { - const expected = `${basePath}${exampleComponentString}-example-${ext}.html`; + const expected = `${basePath}${exampleKey}-example-${ext}.html`; const actual = component.exampleFileUrl(ext); expect(actual).toEqual(expected); }); }); }); + + +// Create a version of ExampleModule for testing with only one component so that we odn't have +// to compile all of the examples for these tests. +@NgModule({ + imports: [ + MdInputModule, + MdAutocompleteModule, + CommonModule, + ReactiveFormsModule, + NoopAnimationsModule + ], + declarations: [EXAMPLE_COMPONENTS[exampleKey].component], + entryComponents: [EXAMPLE_COMPONENTS[exampleKey].component], +}) +class TestExampleModule { } diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts index 0bf075fad..f8b9c8a95 100644 --- a/src/app/shared/example-viewer/example-viewer.ts +++ b/src/app/shared/example-viewer/example-viewer.ts @@ -1,5 +1,4 @@ import {Component, Input} from '@angular/core'; -import {Http} from '@angular/http'; import {ComponentPortal} from '@angular/material'; import 'rxjs/add/operator/first'; @@ -23,11 +22,6 @@ export class ExampleViewer { /** Whether the source for the example is being displayed. */ showSource: boolean = false; - /** Map of file extension (html|ts|css) to source file content. */ - sourceFileContent: Map = new Map(); - - constructor(private _http: Http) { } - get example() { return this._example; } diff --git a/src/app/shared/footer/footer.html b/src/app/shared/footer/footer.html index 2d18f8517..e1a0371d3 100644 --- a/src/app/shared/footer/footer.html +++ b/src/app/shared/footer/footer.html @@ -8,7 +8,7 @@
diff --git a/src/app/shared/footer/footer.spec.ts b/src/app/shared/footer/footer.spec.ts index fbe875e1d..eea60a733 100644 --- a/src/app/shared/footer/footer.spec.ts +++ b/src/app/shared/footer/footer.spec.ts @@ -1,8 +1,7 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {MaterialModule} from '@angular/material'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {Footer} from './footer'; +import {Footer, FooterModule} from './footer'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('Footer', () => { @@ -11,14 +10,15 @@ describe('Footer', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - declarations: [Footer], - }); + imports: [FooterModule, DocsAppTestingModule], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(Footer); component = fixture.componentInstance; fixture.detectChanges(); - })); + }); it('should have a link to angular.io', () => { const link = fixture diff --git a/src/app/shared/footer/footer.ts b/src/app/shared/footer/footer.ts index b47f446c0..3884fec4b 100644 --- a/src/app/shared/footer/footer.ts +++ b/src/app/shared/footer/footer.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; @Component({ selector: 'app-footer', @@ -6,3 +6,10 @@ import {Component} from '@angular/core'; styleUrls: ['./footer.scss'] }) export class Footer { } + + +@NgModule({ + exports: [Footer], + declarations: [Footer], +}) +export class FooterModule {} diff --git a/src/app/shared/guide-items/guide-items.spec.ts b/src/app/shared/guide-items/guide-items.spec.ts index 7a561114b..cb138fa25 100644 --- a/src/app/shared/guide-items/guide-items.spec.ts +++ b/src/app/shared/guide-items/guide-items.spec.ts @@ -7,12 +7,8 @@ describe('GuideItems', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [], - declarations: [], providers: [GuideItems] - }); - - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([GuideItems], (gi: GuideItems) => { diff --git a/src/app/shared/navbar/navbar.spec.ts b/src/app/shared/navbar/navbar.spec.ts index b4b89744b..be5fd6604 100644 --- a/src/app/shared/navbar/navbar.spec.ts +++ b/src/app/shared/navbar/navbar.spec.ts @@ -1,8 +1,7 @@ -import {async, TestBed, ComponentFixture} from '@angular/core/testing'; -import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core'; -import {MaterialModule} from '@angular/material'; +import {async, ComponentFixture, TestBed} from '@angular/core/testing'; -import {NavBar} from './navbar'; +import {NavBar, NavBarModule} from './navbar'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('NavBar', () => { @@ -11,15 +10,15 @@ describe('NavBar', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - schemas: [CUSTOM_ELEMENTS_SCHEMA], - declarations: [NavBar], - }); + imports: [NavBarModule, DocsAppTestingModule], + }).compileComponents(); + })); + beforeEach(() => { fixture = TestBed.createComponent(NavBar); component = fixture.componentInstance; fixture.detectChanges(); - })); + }); it('should have a link to material github', () => { const githublink = 'https://github.com/angular/material2'; diff --git a/src/app/shared/navbar/navbar.ts b/src/app/shared/navbar/navbar.ts index f9abcd3e1..82d0dcab0 100644 --- a/src/app/shared/navbar/navbar.ts +++ b/src/app/shared/navbar/navbar.ts @@ -1,4 +1,7 @@ -import { Component} from '@angular/core'; +import {Component, NgModule} from '@angular/core'; +import {MdButtonModule} from '@angular/material'; +import {RouterModule} from '@angular/router'; +import {ThemePickerModule} from '../theme-picker/theme-picker'; @Component({ selector: 'app-navbar', @@ -6,3 +9,10 @@ import { Component} from '@angular/core'; styleUrls: ['./navbar.scss'] }) export class NavBar {} + +@NgModule({ + imports: [MdButtonModule, RouterModule, ThemePickerModule], + exports: [NavBar], + declarations: [NavBar], +}) +export class NavBarModule {} diff --git a/src/app/shared/plunker/plunker-button.ts b/src/app/shared/plunker/plunker-button.ts index 8a3c10db7..cee33d7b1 100644 --- a/src/app/shared/plunker/plunker-button.ts +++ b/src/app/shared/plunker/plunker-button.ts @@ -1,6 +1,7 @@ -import {Component, Input} from '@angular/core'; +import {Component, Input, NgModule} from '@angular/core'; import {PlunkerWriter} from './plunker-writer'; import {ExampleData} from '@angular/material-examples'; +import {MdButtonModule, MdIconModule, MdTooltipModule} from '@angular/material'; @Component({ selector: 'plunker-button', @@ -23,6 +24,12 @@ export class PlunkerButton { @Input() set example(example: string) { const exampleData = new ExampleData(example); + + // TODO(jelbourn): remove this when bad defaults are no longer included in the source + exampleData.exampleFiles = []; + exampleData.examplePath = ''; + exampleData.indexFilename = ''; + this.plunkerWriter.constructPlunkerForm(exampleData).then(plunkerForm => { this.plunkerForm = plunkerForm; this.isDisabled = false; @@ -41,3 +48,11 @@ export class PlunkerButton { document.body.removeChild(this.plunkerForm); } } + +@NgModule({ + imports: [MdTooltipModule, MdButtonModule, MdIconModule], + exports: [PlunkerButton], + declarations: [PlunkerButton], + providers: [PlunkerWriter], +}) +export class PlunkerButtonModule {} diff --git a/src/app/shared/plunker/plunker-writer.spec.ts b/src/app/shared/plunker/plunker-writer.spec.ts index 937c1405b..6e7ece07a 100644 --- a/src/app/shared/plunker/plunker-writer.spec.ts +++ b/src/app/shared/plunker/plunker-writer.spec.ts @@ -1,6 +1,9 @@ import {TestBed, inject, async, flushMicrotasks, fakeAsync} from '@angular/core/testing'; import {MockBackend} from '@angular/http/testing'; -import {BaseRequestOptions, Http, Response, ResponseOptions, XHRBackend} from '@angular/http'; +import { + BaseRequestOptions, Http, HttpModule, Response, ResponseOptions, + XHRBackend +} from '@angular/http'; import {PlunkerWriter} from './plunker-writer'; import {ExampleData} from '@angular/material-examples'; @@ -10,24 +13,15 @@ describe('PlunkerWriter', () => { let data: ExampleData; beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [], + imports: [HttpModule], declarations: [], providers: [ PlunkerWriter, - MockBackend, BaseRequestOptions, + MockBackend, {provide: XHRBackend, useExisting: MockBackend}, - { - provide: Http, - useFactory: (backendInstance: MockBackend, defaultOptions: BaseRequestOptions) => { - return new Http(backendInstance, defaultOptions); - }, - deps: [MockBackend, BaseRequestOptions] - }, ] - }); - - TestBed.compileComponents(); + }).compileComponents(); })); beforeEach(inject([MockBackend], (mockBackend: MockBackend, http: Http) => { diff --git a/src/app/shared/shared-module.ts b/src/app/shared/shared-module.ts deleted file mode 100644 index b2475a0d0..000000000 --- a/src/app/shared/shared-module.ts +++ /dev/null @@ -1,32 +0,0 @@ -import {NgModule} from '@angular/core'; -import {HttpModule} from '@angular/http'; -import {BrowserModule} from '@angular/platform-browser'; -import {RouterModule} from '@angular/router'; - -import {ExampleViewer} from './example-viewer/example-viewer'; -import {DocViewer} from './doc-viewer/doc-viewer'; -import {DocumentationItems} from './documentation-items/documentation-items'; -import {PlunkerButton} from './plunker'; -import {GuideItems} from './guide-items/guide-items'; -import {ThemeStorage} from './theme-picker/theme-storage/theme-storage'; -import {ThemePicker} from './theme-picker/theme-picker'; -import {NavBar} from './navbar/navbar'; -import {SvgViewer} from './svg-viewer/svg-viewer'; -import {DocsMaterialModule} from '../app-module'; - - -@NgModule({ - imports: [ - HttpModule, - RouterModule, - BrowserModule, - DocsMaterialModule, - ], - declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer], - exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer], - providers: [DocumentationItems, GuideItems, ThemeStorage], - entryComponents: [ - ExampleViewer, - ], -}) -export class SharedModule {} diff --git a/src/app/shared/style-manager/style-manager.spec.ts b/src/app/shared/style-manager/style-manager.spec.ts index df2cc14b1..fecbb1f10 100644 --- a/src/app/shared/style-manager/style-manager.spec.ts +++ b/src/app/shared/style-manager/style-manager.spec.ts @@ -1,4 +1,5 @@ -import {TestBed, inject} from '@angular/core/testing'; +import {inject, TestBed} from '@angular/core/testing'; +import {HttpModule} from '@angular/http'; import {StyleManager} from './style-manager'; @@ -6,6 +7,7 @@ describe('StyleManager', () => { let styleManager: StyleManager; beforeEach(() => TestBed.configureTestingModule({ + imports: [HttpModule], providers: [StyleManager] })); diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts index 87ed79002..fa3f4cb45 100644 --- a/src/app/shared/svg-viewer/svg-viewer.ts +++ b/src/app/shared/svg-viewer/svg-viewer.ts @@ -1,10 +1,10 @@ -import {Component, ElementRef, Input, OnInit} from '@angular/core'; +import {Component, ElementRef, Input, NgModule, OnInit} from '@angular/core'; import {Http} from '@angular/http'; @Component({ selector: 'docs-svg-viewer', - template: '
', + template: '', }) export class SvgViewer implements OnInit { @Input() src: string; @@ -38,3 +38,9 @@ export class SvgViewer implements OnInit { function getAbsolutePathFromSrc(src: string) { return src.slice(src.indexOf('assets/') - 1); } + +@NgModule({ + exports: [SvgViewer], + declarations: [SvgViewer], +}) +export class SvgViewerModule { } diff --git a/src/app/shared/theme-picker/theme-picker.spec.ts b/src/app/shared/theme-picker/theme-picker.spec.ts index 5cfd97033..6eb337955 100644 --- a/src/app/shared/theme-picker/theme-picker.spec.ts +++ b/src/app/shared/theme-picker/theme-picker.spec.ts @@ -1,20 +1,13 @@ -import {MaterialModule} from '@angular/material'; import {async, TestBed} from '@angular/core/testing'; - -import {ThemeStorage} from './theme-storage/theme-storage'; -import {ThemePicker} from './theme-picker'; -import {StyleManager} from '../style-manager'; +import {ThemePicker, ThemePickerModule} from './theme-picker'; +import {DocsAppTestingModule} from '../../testing/testing-module'; describe('ThemePicker', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - imports: [MaterialModule], - declarations: [ThemePicker], - providers: [StyleManager, ThemeStorage] - }); - - TestBed.compileComponents(); + imports: [ThemePickerModule, DocsAppTestingModule], + }).compileComponents(); })); it('should install theme based on href', () => { diff --git a/src/app/shared/theme-picker/theme-picker.ts b/src/app/shared/theme-picker/theme-picker.ts index 643ab0544..b871acd8d 100644 --- a/src/app/shared/theme-picker/theme-picker.ts +++ b/src/app/shared/theme-picker/theme-picker.ts @@ -1,6 +1,8 @@ -import {Component, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core'; +import {Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule} from '@angular/core'; import {StyleManager} from '../style-manager/style-manager'; import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage'; +import {MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule} from '@angular/material'; +import {CommonModule} from '@angular/common'; @Component({ @@ -70,3 +72,11 @@ export class ThemePicker { return this.themes.find(theme => theme.href === href); } } + +@NgModule({ + imports: [MdButtonModule, MdIconModule, MdMenuModule, MdGridListModule, CommonModule], + exports: [ThemePicker], + declarations: [ThemePicker], + providers: [StyleManager, ThemeStorage], +}) +export class ThemePickerModule { } diff --git a/src/app/testing/testing-module.ts b/src/app/testing/testing-module.ts new file mode 100644 index 000000000..1828d78a5 --- /dev/null +++ b/src/app/testing/testing-module.ts @@ -0,0 +1,16 @@ +import {NgModule} from '@angular/core'; +import {HttpModule, XHRBackend} from '@angular/http'; +import {MockBackend} from '@angular/http/testing'; +import {RouterTestingModule} from '@angular/router/testing'; +import {MATERIAL_SANITY_CHECKS} from '@angular/material'; + +@NgModule({ + imports: [RouterTestingModule, HttpModule], + exports: [RouterTestingModule], + providers: [ + MockBackend, + {provide: XHRBackend, useExisting: MockBackend}, + {provide: MATERIAL_SANITY_CHECKS, useValue: false}, + ], +}) +export class DocsAppTestingModule {} From 83274c8e1b29295aafe337e60b35b513e7265576 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 09:18:00 -0700 Subject: [PATCH 10/15] Update SauceConnect version --- scripts/saucelabs/start-tunnel.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/saucelabs/start-tunnel.sh b/scripts/saucelabs/start-tunnel.sh index 21f5f9091..c01a890c5 100755 --- a/scripts/saucelabs/start-tunnel.sh +++ b/scripts/saucelabs/start-tunnel.sh @@ -2,7 +2,7 @@ set -e -o pipefail -TUNNEL_FILE="sc-4.4.1-linux.tar.gz" +TUNNEL_FILE="sc-4.4.7-linux.tar.gz" TUNNEL_URL="https://saucelabs.com/downloads/$TUNNEL_FILE" TUNNEL_DIR="/tmp/saucelabs-connect" From 56266e21ab5e4b948f96799903456846410d6986 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 09:27:31 -0700 Subject: [PATCH 11/15] Change Karma reporter to "dots" --- karma.conf.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 63a6b6252..d4081d884 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -36,8 +36,8 @@ module.exports = function (config) { environment: 'dev' }, reporters: config.angularCli && config.angularCli.codeCoverage - ? ['progress', 'karma-remap-istanbul'] - : ['progress'], + ? ['dots', 'karma-remap-istanbul'] + : ['dots'], port: 9876, colors: true, logLevel: config.LOG_INFO, From 200dfeac3a1b76675aebb993dadeec22b06f27c3 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 11:32:20 -0700 Subject: [PATCH 12/15] Reset scroll position when the route changes --- src/app/material-docs-app.ts | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts index dd9fd9b01..f2dc4c6b6 100644 --- a/src/app/material-docs-app.ts +++ b/src/app/material-docs-app.ts @@ -6,20 +6,24 @@ import {Router, NavigationStart} from '@angular/router'; selector: 'material-docs-app', templateUrl: './material-docs-app.html', styleUrls: ['./material-docs-app.scss'], - host: { - '[class.docs-dark-theme]': 'isDarkTheme', - }, encapsulation: ViewEncapsulation.None, }) export class MaterialDocsApp { - isDarkTheme = false; showShadow = false; - constructor( - router: Router, - ) { + constructor(router: Router) { router.events.subscribe((data: NavigationStart) => { this.showShadow = data.url.startsWith('/components'); + resetScrollPosition(); }); } } + +function resetScrollPosition() { + if (typeof document === 'object' && document) { + const sidenavContent = document.querySelector('.mat-sidenav-content'); + if (sidenavContent) { + sidenavContent.scrollTop = 0; + } + } +} From afe6a0a253d6e4bb8fc8506fb7063d28f9b22268 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 12:13:26 -0700 Subject: [PATCH 13/15] Simplify application routes --- .../component-category-list.html | 2 +- src/app/pages/component-list/component-list.html | 2 +- .../pages/component-sidenav/component-sidenav.html | 2 +- src/app/routes.ts | 13 +++++++++++-- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/app/pages/component-category-list/component-category-list.html b/src/app/pages/component-category-list/component-category-list.html index 601096db3..740f47926 100644 --- a/src/app/pages/component-category-list/component-category-list.html +++ b/src/app/pages/component-category-list/component-category-list.html @@ -2,7 +2,7 @@ + [routerLink]="['/categories/', category.id]"> {{category.name}}

{{category.summary}}

+ [routerLink]="['/components/', component.id]"> diff --git a/src/app/pages/component-sidenav/component-sidenav.html b/src/app/pages/component-sidenav/component-sidenav.html index a91534557..c36bc03ea 100644 --- a/src/app/pages/component-sidenav/component-sidenav.html +++ b/src/app/pages/component-sidenav/component-sidenav.html @@ -6,7 +6,7 @@

{{category.name}}

  • - {{component.name}} diff --git a/src/app/routes.ts b/src/app/routes.ts index 848fdc901..1a7ebec92 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -9,13 +9,22 @@ import {GuideViewer} from './pages/guide-viewer/guide-viewer'; export const MATERIAL_DOCS_ROUTES: Routes = [ {path: '', component: Homepage, pathMatch: 'full'}, + { + path: 'categories', + component: ComponentSidenav, + children: [ + {path: '', component: ComponentCategoryList}, + {path: ':id', component: ComponentList}, + ], + }, { path: 'components', component: ComponentSidenav, children: [ {path: '', component: ComponentCategoryList}, - {path: 'category/:id', component: ComponentList}, - {path: 'component/:id', component: ComponentViewer}, + {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'}, + {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'}, + {path: ':id', component: ComponentViewer}, ], }, {path: 'guides', component: GuideList}, From 98c23b1f55646e697f8be5f2ad1da5ed416e3a26 Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 14:19:40 -0700 Subject: [PATCH 14/15] Change ComponentViewer to use nav-tabs --- src/app/app-module.ts | 1 - src/app/material-docs-app.ts | 19 ++++++++++- .../pages/component-viewer/component-api.html | 3 ++ .../component-viewer/component-examples.html | 3 ++ .../component-viewer/component-overview.html | 3 ++ .../component-viewer/component-viewer.html | 32 +++++++------------ .../component-viewer/component-viewer.scss | 25 ++++++--------- .../component-viewer/component-viewer.spec.ts | 1 + .../component-viewer/component-viewer.ts | 27 +++++++++++++++- src/app/pages/page-title/page-title.ts | 2 +- src/app/routes.ts | 18 +++++++++-- .../shared/example-viewer/example-viewer.ts | 2 +- src/app/shared/svg-viewer/svg-viewer.ts | 2 +- src/app/shared/theme-picker/theme-picker.ts | 2 +- .../theme-storage/theme-storage.ts | 3 +- 15 files changed, 95 insertions(+), 48 deletions(-) create mode 100644 src/app/pages/component-viewer/component-api.html create mode 100644 src/app/pages/component-viewer/component-examples.html create mode 100644 src/app/pages/component-viewer/component-overview.html diff --git a/src/app/app-module.ts b/src/app/app-module.ts index 9937d934c..e14f0302d 100644 --- a/src/app/app-module.ts +++ b/src/app/app-module.ts @@ -23,7 +23,6 @@ import {SvgViewerModule} from './shared/svg-viewer/svg-viewer'; import {ThemePickerModule} from './shared/theme-picker/theme-picker'; import {PlunkerButtonModule} from './shared/plunker/plunker-button'; import {NavBarModule} from './shared/navbar/navbar'; -import {ExampleViewer} from './shared/example-viewer/example-viewer'; import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage'; import {GuideItems} from './shared/guide-items/guide-items'; import {DocumentationItems} from './shared/documentation-items/documentation-items'; diff --git a/src/app/material-docs-app.ts b/src/app/material-docs-app.ts index f2dc4c6b6..7596e28b0 100644 --- a/src/app/material-docs-app.ts +++ b/src/app/material-docs-app.ts @@ -12,13 +12,30 @@ export class MaterialDocsApp { showShadow = false; constructor(router: Router) { + let previousRoute = router.routerState.snapshot.url; + router.events.subscribe((data: NavigationStart) => { this.showShadow = data.url.startsWith('/components'); - resetScrollPosition(); + + // We want to reset the scroll position on navigation except when navigating within + // the documentation for a single component. + if (!isNavigationWithinComponentView(previousRoute, data.url)) { + resetScrollPosition(); + } + + previousRoute = data.url; }); } } +function isNavigationWithinComponentView(oldUrl: string, newUrl: string) { + const componentViewExpression = /components\/(\w+)/; + return oldUrl && newUrl + && componentViewExpression.test(oldUrl) + && componentViewExpression.test(newUrl) + && oldUrl.match(componentViewExpression)[1] === newUrl.match(componentViewExpression)[1]; +} + function resetScrollPosition() { if (typeof document === 'object' && document) { const sidenavContent = document.querySelector('.mat-sidenav-content'); diff --git a/src/app/pages/component-viewer/component-api.html b/src/app/pages/component-viewer/component-api.html new file mode 100644 index 000000000..9ec283162 --- /dev/null +++ b/src/app/pages/component-viewer/component-api.html @@ -0,0 +1,3 @@ + diff --git a/src/app/pages/component-viewer/component-examples.html b/src/app/pages/component-viewer/component-examples.html new file mode 100644 index 000000000..93a6a6173 --- /dev/null +++ b/src/app/pages/component-viewer/component-examples.html @@ -0,0 +1,3 @@ + diff --git a/src/app/pages/component-viewer/component-overview.html b/src/app/pages/component-viewer/component-overview.html new file mode 100644 index 000000000..92b265540 --- /dev/null +++ b/src/app/pages/component-viewer/component-overview.html @@ -0,0 +1,3 @@ + diff --git a/src/app/pages/component-viewer/component-viewer.html b/src/app/pages/component-viewer/component-viewer.html index 8008b732c..5abf6152b 100644 --- a/src/app/pages/component-viewer/component-viewer.html +++ b/src/app/pages/component-viewer/component-viewer.html @@ -1,22 +1,12 @@ - - - - - - - - - - - - - - - - - + + +
    + +
    diff --git a/src/app/pages/component-viewer/component-viewer.scss b/src/app/pages/component-viewer/component-viewer.scss index a7187aa91..9ff3b2329 100644 --- a/src/app/pages/component-viewer/component-viewer.scss +++ b/src/app/pages/component-viewer/component-viewer.scss @@ -2,26 +2,19 @@ app-component-viewer { font-weight: 400; + margin: 20px 70px 50px 70px; } -.docs-component-viewer-tabbed-content { - margin: 50px 70px; - @media (max-width: $small-breakpoint-width) { - margin: 16px; - } +.docs-component-viewer-section-tab { + text-transform: uppercase; +} - // Direct chain is necessary to avoid styling tabs in the example viewer - & > .mat-tab-header { - border: none; - margin-bottom: 30px; +.docs-component-viewer-tabbed-content { + margin-bottom: 50px; +} - & > .mat-tab-label-container > .mat-tab-list > .mat-tab-labels > .mat-tab-label { - font-weight: 400; - margin: 0 10px; - min-width: 0; - padding: 0 5px; - } - } +.docs-component-viewer-content { + min-height: 500px; } .docs-example-source { diff --git a/src/app/pages/component-viewer/component-viewer.spec.ts b/src/app/pages/component-viewer/component-viewer.spec.ts index 7dcf9f475..3fd417335 100644 --- a/src/app/pages/component-viewer/component-viewer.spec.ts +++ b/src/app/pages/component-viewer/component-viewer.spec.ts @@ -13,6 +13,7 @@ const docItemsId = 'button'; const exampleKey = 'button-types'; const mockActivatedRoute = { + snapshot: {}, params: Observable.create(observer => { observer.next({id: docItemsId}); observer.complete(); diff --git a/src/app/pages/component-viewer/component-viewer.ts b/src/app/pages/component-viewer/component-viewer.ts index 55226f903..97dea0752 100644 --- a/src/app/pages/component-viewer/component-viewer.ts +++ b/src/app/pages/component-viewer/component-viewer.ts @@ -26,10 +26,35 @@ export class ComponentViewer { } } +@Component({ + selector: 'component-overview', + templateUrl: './component-overview.html', + encapsulation: ViewEncapsulation.None, +}) +export class ComponentOverview { + constructor(public componentViewer: ComponentViewer) {} +} + +@Component({ + selector: 'component-api', + templateUrl: './component-api.html', + encapsulation: ViewEncapsulation.None, +}) +export class ComponentApi extends ComponentOverview {} + +@Component({ + selector: 'component-examples', + templateUrl: './component-examples.html', + encapsulation: ViewEncapsulation.None, +}) +export class ComponentExamples extends ComponentOverview {} + + + @NgModule({ imports: [MdTabsModule, RouterModule, DocViewerModule, CommonModule], exports: [ComponentViewer], - declarations: [ComponentViewer], + declarations: [ComponentViewer, ComponentOverview, ComponentApi, ComponentExamples], providers: [DocumentationItems, ComponentPageTitle], }) export class ComponentViewerModule {} diff --git a/src/app/pages/page-title/page-title.ts b/src/app/pages/page-title/page-title.ts index 8c93fe27b..fd509fbaf 100644 --- a/src/app/pages/page-title/page-title.ts +++ b/src/app/pages/page-title/page-title.ts @@ -5,7 +5,7 @@ import {Injectable} from '@angular/core'; */ @Injectable() export class ComponentPageTitle { - _title: string = ''; + _title = ''; get title(): string { return this._title; } set title(title: string) { this._title = title; } diff --git a/src/app/routes.ts b/src/app/routes.ts index 1a7ebec92..28aeb63f5 100644 --- a/src/app/routes.ts +++ b/src/app/routes.ts @@ -2,7 +2,12 @@ import {Homepage} from './pages/homepage'; import {ComponentList} from './pages/component-list'; import {GuideList} from './pages/guide-list'; import {Routes} from '@angular/router'; -import {ComponentViewer} from './pages/component-viewer/component-viewer'; +import { + ComponentApi, + ComponentExamples, + ComponentOverview, + ComponentViewer +} from './pages/component-viewer/component-viewer'; import {ComponentCategoryList} from './pages/component-category-list/component-category-list'; import {ComponentSidenav} from './pages/component-sidenav/component-sidenav'; import {GuideViewer} from './pages/guide-viewer/guide-viewer'; @@ -24,7 +29,16 @@ export const MATERIAL_DOCS_ROUTES: Routes = [ {path: '', component: ComponentCategoryList}, {path: 'component/:id', redirectTo: ':id', pathMatch: 'full'}, {path: 'category/:id', redirectTo: '/categories/:id', pathMatch: 'full'}, - {path: ':id', component: ComponentViewer}, + { + path: ':id', + component: ComponentViewer, + children: [ + {path: '', redirectTo: 'overview', pathMatch: 'full'}, + {path: 'overview', component: ComponentOverview, pathMatch: 'full'}, + {path: 'api', component: ComponentApi, pathMatch: 'full'}, + {path: 'examples', component: ComponentExamples, pathMatch: 'full'}, + ], + }, ], }, {path: 'guides', component: GuideList}, diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts index f8b9c8a95..a49bbd9b8 100644 --- a/src/app/shared/example-viewer/example-viewer.ts +++ b/src/app/shared/example-viewer/example-viewer.ts @@ -20,7 +20,7 @@ export class ExampleViewer { exampleData: LiveExample; /** Whether the source for the example is being displayed. */ - showSource: boolean = false; + showSource = false; get example() { return this._example; diff --git a/src/app/shared/svg-viewer/svg-viewer.ts b/src/app/shared/svg-viewer/svg-viewer.ts index fa3f4cb45..c3c0498e5 100644 --- a/src/app/shared/svg-viewer/svg-viewer.ts +++ b/src/app/shared/svg-viewer/svg-viewer.ts @@ -30,7 +30,7 @@ export class SvgViewer implements OnInit { private fetchAndInlineSvgContent(path: string): void { const svgAbsPath = getAbsolutePathFromSrc(path); this.http.get(svgAbsPath).subscribe(svgResponse => { - this.inlineSvgContent(svgResponse.text()) + this.inlineSvgContent(svgResponse.text()); }); } } diff --git a/src/app/shared/theme-picker/theme-picker.ts b/src/app/shared/theme-picker/theme-picker.ts index b871acd8d..7e4d16d8e 100644 --- a/src/app/shared/theme-picker/theme-picker.ts +++ b/src/app/shared/theme-picker/theme-picker.ts @@ -45,7 +45,7 @@ export class ThemePicker { ]; constructor( - public styleManager : StyleManager, + public styleManager: StyleManager, private _themeStorage: ThemeStorage ) { const currentTheme = this._themeStorage.getStoredTheme(); diff --git a/src/app/shared/theme-picker/theme-storage/theme-storage.ts b/src/app/shared/theme-picker/theme-storage/theme-storage.ts index dad6a3cc5..3ff581459 100644 --- a/src/app/shared/theme-picker/theme-storage/theme-storage.ts +++ b/src/app/shared/theme-picker/theme-storage/theme-storage.ts @@ -21,8 +21,7 @@ export class ThemeStorage { } public getStoredTheme(): DocsSiteTheme { - const theme = JSON.parse(window.localStorage[ThemeStorage.storageKey] || null); - return theme + return JSON.parse(window.localStorage[ThemeStorage.storageKey] || null); } public clearStorage() { From c699fc0c06b7dc77572dbb4dbdaeed910503074e Mon Sep 17 00:00:00 2001 From: Jeremy Elbourn Date: Sun, 18 Jun 2017 14:35:26 -0700 Subject: [PATCH 15/15] Add missing tooltip module to theme picker --- src/app/shared/theme-picker/theme-picker.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/app/shared/theme-picker/theme-picker.ts b/src/app/shared/theme-picker/theme-picker.ts index 7e4d16d8e..c721f45ee 100644 --- a/src/app/shared/theme-picker/theme-picker.ts +++ b/src/app/shared/theme-picker/theme-picker.ts @@ -1,7 +1,10 @@ import {Component, ViewEncapsulation, ChangeDetectionStrategy, NgModule} from '@angular/core'; import {StyleManager} from '../style-manager/style-manager'; import {ThemeStorage, DocsSiteTheme} from './theme-storage/theme-storage'; -import {MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule} from '@angular/material'; +import { + MdButtonModule, MdGridListModule, MdIconModule, MdMenuModule, + MdTooltipModule +} from '@angular/material'; import {CommonModule} from '@angular/common'; @@ -74,7 +77,14 @@ export class ThemePicker { } @NgModule({ - imports: [MdButtonModule, MdIconModule, MdMenuModule, MdGridListModule, CommonModule], + imports: [ + MdButtonModule, + MdIconModule, + MdMenuModule, + MdGridListModule, + MdTooltipModule, + CommonModule + ], exports: [ThemePicker], declarations: [ThemePicker], providers: [StyleManager, ThemeStorage],