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

Author: riavalon

.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);