feat(navbar): Add themepicker component with lazy loaded themes

Author: mmalerba

angular-cli.json

@@ -19,7 +19,11 @@
       "mobile": false,
       "styles": [
         "main.scss",
-        "highlightjs/solarized-light.css"
+        "highlightjs/solarized-light.css",
+        {"input": "assets/pink-bluegrey.css", "lazy": true},
+        {"input": "assets/deeppurple-amber.css", "lazy": true},
+        {"input": "assets/indigo-pink.css", "lazy": true},
+        {"input": "assets/purple-green.css", "lazy": true}
       ],
       "scripts": [],
       "environmentSource": "environments/environment.ts",

package.json

@@ -4,15 +4,16 @@
   "license": "MIT",
   "angular-cli": {},
   "scripts": {
-    "start": "ng serve",
+    "start": "npm run build-themes && ng serve",
     "lint": "tslint \"src/**/*.ts\"",
     "test": "ng test",
     "pree2e": "webdriver-manager update",
     "e2e": "protractor",
-    "prod-build": "ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
+    "build-themes": "./tools/build-themes.sh",
+    "prod-build": "npm run build-themes && ng build --aot --prod && npm run prerender && cp -r tmp/prerendered/* dist/",
     "postinstall": "webdriver-manager update && tools/fetch-assets.sh",
-    "publish-prod": "ng build --aot --prod && firebase use material-angular-io && firebase deploy",
-    "publish-dev": "ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
+    "publish-prod": "npm run build-themes && ng build --aot --prod && firebase use material-angular-io && firebase deploy",
+    "publish-dev": "npm run build-themes && ng build --aot --prod && firebase use material2-docs-dev && firebase deploy"
   },
   "private": true,
   "dependencies": {
@@ -35,6 +36,7 @@
     "@angular/compiler-cli": "^4.0.0",
     "@types/jasmine": "^2.5.41",
     "@types/node": "^7.0.5",
+    "color": "^1.0.3",
     "highlight.js": "^9.9.0",
     "jasmine-core": "2.4.1",
     "jasmine-spec-reporter": "2.5.0",
@@ -44,6 +46,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-remap-istanbul": "^0.2.1",
     "karma-sauce-launcher": "^1.1.0",
+    "ng-inline-svg": "^3.0.0",
     "protractor": "^5.1.1",
     "ts-node": "^2.0.0",
     "tslint": "^4.4.2",

src/_app-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../node_modules/@angular/material/theming';
 @import './app/pages/homepage/homepage-theme';
 @import './app/pages/component-sidenav/component-sidenav-theme';
 @import './app/pages/component-viewer/component-viewer-theme';

src/app/app-module.ts

@@ -1,10 +1,12 @@
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 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 {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {MaterialModule} from '@angular/material';
+import {InlineSVGModule} from 'ng-inline-svg';
 import {MaterialDocsApp} from './material-docs-app';
 import {Homepage} from './pages/homepage/homepage';
 import {routing} from './routes';
@@ -19,6 +21,7 @@ import {ComponentSidenav} from './pages/component-sidenav/component-sidenav';
 import {Footer} from './shared/footer/footer';
 import {ComponentPageTitle} from './pages/page-title/page-title';
 import {ComponentPageHeader} from './pages/component-page-header/component-page-header';
+import {StyleManager} from './shared/style-manager/style-manager';
 
 
 @NgModule({
@@ -32,7 +35,14 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     GuideList,
     GuideViewer,
     Homepage,
-    Footer
+    Footer,
+  ],
+  schemas: [
+    CUSTOM_ELEMENTS_SCHEMA,
+  ],
+  exports: [
+    MaterialDocsApp,
+    Homepage,
   ],
   imports: [
     BrowserModule,
@@ -43,10 +53,12 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     HttpModule,
     MaterialModule.forRoot(),
     routing,
+    InlineSVGModule,
   ],
   providers: [
     Location,
     ComponentPageTitle,
+    StyleManager,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],

src/app/material-docs-app.ts

@@ -1,6 +1,8 @@
 import {Component, ViewEncapsulation} from '@angular/core';
 import {Router, NavigationStart} from '@angular/router';
 
+// import {ThemeStorage} from './shared/theme-chooser/theme-storage/theme-storage';
+
 
 @Component({
   selector: 'material-docs-app',
@@ -15,9 +17,19 @@ export class MaterialDocsApp {
   isDarkTheme = false;
   showShadow = false;
 
-  constructor(router: Router) {
+  constructor(
+    router: Router,
+  ) {
     router.events.subscribe((data: NavigationStart) => {
       this.showShadow = data.url.startsWith('/components');
     });
+
+    // _themeStorage
+    //   .onThemeUpdate
+    //   .subscribe((theme) => this._setIsDarkTheme(theme));
   }
+
+  // public _setIsDarkTheme(theme) {
+  //   this.isDarkTheme = theme ? theme.isDark : this.isDarkTheme;
+  // }
 }

src/app/pages/component-category-list/component-category-list.html

@@ -5,8 +5,8 @@
       [routerLink]="['/components/category/', category.id]">
     <md-card-title>{{category.name}}</md-card-title>
     <p class="docs-component-category-list-card-summary">{{category.summary}}</p>
-    <div class="docs-component-category-list-card-image"
-         [style.backgroundImage]="'url(\'../../../assets/img/component-categories/' + category.id +'.svg\')'">
-    </div>
+    <docs-svg-viewer class="docs-component-category-list-card-image"
+      [svgHref]="'../../../assets/img/component-categories/' + category.id + '.svg'">
+    </docs-svg-viewer>
   </md-card>
 </div>

src/app/pages/component-category-list/component-category-list.scss

@@ -2,10 +2,10 @@
 
 .docs-component-category-list {
   padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
 
   @media (max-width: $small-breakpoint-width) {
-    display: flex;
-    flex-wrap: wrap;
     justify-content: center;
   }
 }
@@ -22,12 +22,9 @@
   }
 }
 
-.docs-component-category-list-card-image {
-  width: 100%;
-  height: 160px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+:host /deep/ .docs-component-category-list-card-image svg {
+  width: 100% !important;
+  height: 100% !important;
 }
 
 .docs-component-category-list-card-summary {

src/app/pages/component-category-list/component-category-list.spec.ts

@@ -1,5 +1,6 @@
 import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {MaterialModule} from '@angular/material';
+import {InlineSVGModule} from 'ng-inline-svg';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 
 import {DocumentationItems} from '../../shared/documentation-items/documentation-items';
@@ -12,7 +13,7 @@ describe('ComponentCategoryList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule],
+      imports: [MaterialModule, InlineSVGModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [ComponentCategoryList],
       providers: [

src/app/pages/component-list/component-list.html

@@ -1,11 +1,11 @@
 <div class="docs-component-list-category">
   <a *ngFor="let component of category.items"
-      class="docs-component-list-item"
-      [routerLink]="['/components/component/', component.id]">
-    <div class="docs-component-list-item-icon"
-         [attr.aria-label]="component.name"
-         [style.backgroundImage]="'url(\'../../../assets/img/components/' + component.id + '.svg\')'">
-    </div>
+    class="docs-component-list-item"
+    [routerLink]="['/components/component/', component.id]">
+    <docs-svg-viewer class="docs-component-list-item-icon"
+      [attr.aria-label]="component.name"
+      [svgHref]="'../../../assets/img/components/' + component.id + '.svg'">
+    </docs-svg-viewer>
     {{component.name}}
   </a>
 </div>

src/app/pages/component-list/component-list.spec.ts

@@ -1,6 +1,7 @@
 import {async, TestBed, ComponentFixture} from '@angular/core/testing';
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {MaterialModule} from '@angular/material';
+import {InlineSVGModule} from 'ng-inline-svg';
 import {ActivatedRoute, Router} from '@angular/router';
 import {RouterTestingModule} from '@angular/router/testing';
 import {Observable} from 'rxjs/Observable';
@@ -22,7 +23,7 @@ describe('ComponentList', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [MaterialModule, RouterTestingModule],
+      imports: [MaterialModule, RouterTestingModule, InlineSVGModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
       declarations: [ComponentList],
       providers: [