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

.gitignore

@@ -6,6 +6,8 @@
 /src/assets/documents
 /src/assets/examples
 /src/assets/plunker/examples
+/src/assets/*.css
+/src/assets/*.html
 
 # dependencies
 /node_modules

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": {
@@ -26,6 +27,7 @@
     "@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"
@@ -44,6 +46,7 @@
     "karma-jasmine": "^1.1.0",
     "karma-remap-istanbul": "^0.2.1",
     "karma-sauce-launcher": "^1.1.0",
+    "node-sass": "^4.5.3",
     "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

@@ -20,6 +20,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({
@@ -33,7 +34,11 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
     GuideList,
     GuideViewer,
     Homepage,
-    Footer
+    Footer,
+  ],
+  exports: [
+    MaterialDocsApp,
+    Homepage,
   ],
   imports: [
     BrowserModule,
@@ -49,6 +54,7 @@ import {ComponentPageHeader} from './pages/component-page-header/component-page-
   providers: [
     Location,
     ComponentPageTitle,
+    StyleManager,
     {provide: LocationStrategy, useClass: PathLocationStrategy},
   ],
   bootstrap: [MaterialDocsApp],

src/app/material-docs-app.ts

@@ -15,7 +15,9 @@ export class MaterialDocsApp {
   isDarkTheme = false;
   showShadow = false;
 
-  constructor(router: Router) {
+  constructor(
+    router: Router,
+  ) {
     router.events.subscribe((data: NavigationStart) => {
       this.showShadow = data.url.startsWith('/components');
     });

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

@@ -1,43 +1,35 @@
 @import '../../../styles/constants';
 
 .docs-component-category-list {
+  display: flex;
+  flex-wrap: wrap;
   padding: 20px;
 
   @media (max-width: $small-breakpoint-width) {
-    display: flex;
-    flex-wrap: wrap;
     justify-content: center;
   }
 }
 
 .docs-component-category-list-card {
+  cursor: pointer;
   display: inline-block;
-  width: 260px;
   margin: 20px;
   vertical-align: top;
-  cursor: pointer;
+  width: 260px;
 
   .mat-card-title {
     font-size: 20px;
   }
 }
 
-.docs-component-category-list-card-image {
-  width: 100%;
-  height: 160px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
-}
-
 .docs-component-category-list-card-summary {
   height: 2.4em;
 }
 
 .docs-component-category-list-header {
-  padding-left: 20px;
-  display: flex;
   align-items: center;
+  display: flex;
+  padding-left: 20px;
 
   h1 {
     font-size: 30px;

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-sidenav/_component-sidenav-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../../../node_modules/@angular/material/theming';
 
 @mixin component-viewer-sidenav-theme($theme) {
   $primary: map-get($theme, primary);

src/app/pages/component-viewer/_component-viewer-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../../../node_modules/@angular/material/theming';
 
 @mixin component-viewer-theme($theme) {
   $primary: map-get($theme, primary);

src/app/pages/guide-list/_guide-list-theme.scss

@@ -1,4 +1,4 @@
-@import '~@angular/material/theming';
+@import '../../../../node_modules/@angular/material/theming';
 
 @mixin guide-list-theme($theme) {
   $primary: map-get($theme, primary);

src/app/pages/guide-viewer/guide-viewer.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/theming";
+@import "../../../../node_modules/@angular/material/theming";
 
 /* For desktop, the content should be aligned with the page title. */
 $guide-content-margin-side: 70px;

src/app/pages/homepage/_homepage-theme.scss

@@ -7,7 +7,7 @@
 
   app-homepage {
     .docs-header-background {
-      background: url('assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
+      background: url('/assets/img/homepage/material_splash.svg') repeat-x center center, mat-color($primary);
     }
 
     .docs-header-headline {

src/app/pages/homepage/homepage.html

@@ -13,7 +13,7 @@ <h2> Material Design components for Angular apps</h2>
 <div class="docs-homepage-promo">
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
-      <img src="../assets/img/homepage/sprintzerotoapp.svg" alt="Sprint from Zero to App" />
+      <docs-svg-viewer svgHref="../assets/img/homepage/sprintzerotoapp.svg"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Sprint from Zero to App</h2>
@@ -23,7 +23,7 @@ <h2>Sprint from Zero to App</h2>
   </div>
   <div class="docs-homepage-row docs-homepage-reverse-row">
     <div class="docs-homepage-promo-img">
-      <img src="../assets/img/homepage/fastandconsistent.svg" alt="Fast and Consistent" />
+      <docs-svg-viewer svgHref="../assets/img/homepage/fastandconsistent.svg"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Fast and Consistent</h2>
@@ -33,7 +33,7 @@ <h2>Fast and Consistent</h2>
   </div>
   <div class="docs-homepage-row">
     <div class="docs-homepage-promo-img">
-      <img src="../assets/img/homepage/versatile.svg" alt="Versatile" />
+      <docs-svg-viewer svgHref="../assets/img/homepage/versatile.svg"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Versatile</h2>
@@ -43,7 +43,7 @@ <h2>Versatile</h2>
   </div>
   <div class="docs-homepage-row docs-homepage-reverse-row">
     <div class="docs-homepage-promo-img">
-      <img src="../assets/img/homepage/optimized.svg" alt="Optimized for Angular" />
+      <docs-svg-viewer svgHref="../assets/img/homepage/optimized.svg"></docs-svg-viewer>
     </div>
     <div class="docs-homepage-promo-desc">
       <h2>Optimized for Angular</h2>

src/app/pages/homepage/homepage.scss

@@ -56,7 +56,7 @@ $margin-promotion-sections: 60px;
   margin: $margin-promotion-sections 0;
 }
 
-.docs-homepage-row  img {
+.docs-homepage-row .docs-svg-image{
   max-width: 90%;
 }
 

src/app/shared/footer/footer.html

@@ -2,8 +2,8 @@
   <div class="docs-footer-list">
     <div class="footer-logo">
       <img class="docs-footer-angular-logo"
-          src="../../../assets/img/homepage/angular-white-transparent.svg"
-          alt="Angular">
+        src="../../../assets/img/homepage/angular-white-transparent.svg"
+        alt="angular">
     </div>
 
     <div class="docs-footer-links">

src/app/shared/navbar/navbar.html

@@ -2,16 +2,18 @@
 <nav class="docs-navbar">
   <a md-button class="docs-button" routerLink="/" aria-label="Angular Material">
     <img class="docs-angular-logo"
-         src="../../../assets/img/homepage/angular-white-transparent.svg"
-         alt="Angular">
+      src="../../../assets/img/homepage/angular-white-transparent.svg"
+      alt="angular">
     <span>Material</span>
   </a>
   <a md-button class="docs-button" routerLink="components">Components</a>
   <a md-button class="docs-button" routerLink="guides">Guides</a>
+  <div class="flex-spacer"></div>
+  <theme-chooser></theme-chooser>
   <a md-button class="docs-button" href="https://github.com/angular/material2" aria-label="GitHub Repository">
     <img class="docs-github-logo"
-         src="../../../assets/img/homepage/github-circle-white-transparent.svg"
-         alt="GitHub">
+      src="../../../assets/img/homepage/github-circle-white-transparent.svg"
+      alt="GitHub">
     GitHub
   </a>
 </nav>

src/app/shared/navbar/navbar.scss

@@ -1,6 +1,7 @@
 .docs-navbar {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
   padding: 8px 16px;
 
   > .mat-button {
@@ -10,6 +11,10 @@
   }
 }
 
+.flex-spacer {
+  flex-grow: 1;
+}
+
 .docs-angular-logo {
   height: 26px;
   margin: 0 4px 3px 0;

src/app/shared/shared-module.ts

@@ -1,14 +1,19 @@
 import {NgModule} from '@angular/core';
 import {HttpModule} from '@angular/http';
-import {DocViewer} from './doc-viewer/doc-viewer';
-import {ExampleViewer} from './example-viewer/example-viewer';
-import {DocumentationItems} from './documentation-items/documentation-items';
-import {NavBar} from './navbar/navbar';
 import {MaterialModule} from '@angular/material';
 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-chooser/theme-storage/theme-storage';
+import {ThemeChooser} from './theme-chooser/theme-chooser';
+import {NavBar} from './navbar/navbar';
+import {SvgBuilder} from './svg-viewer/svg-builder';
+import {SvgViewer} from './svg-viewer/svg-viewer';
 
 
 @NgModule({
@@ -18,9 +23,9 @@ import {GuideItems} from './guide-items/guide-items';
     BrowserModule,
     MaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
-  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton],
-  providers: [DocumentationItems, GuideItems],
+  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
+  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
+  providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
   entryComponents: [
     ExampleViewer,
   ],

src/app/shared/style-manager/index.ts

@@ -0,0 +1 @@
+export * from './style-manager';