Rename "theme-chooser" to "theme-picker"

Author: jelbourn

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({

src/app/shared/navbar/navbar.html

@@ -9,7 +9,7 @@
   <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>
+  <theme-picker></theme-picker>
   <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"

src/app/shared/shared-module.ts

@@ -1,6 +1,5 @@
 import {NgModule} from '@angular/core';
 import {HttpModule} from '@angular/http';
-import {MaterialModule} from '@angular/material';
 import {BrowserModule} from '@angular/platform-browser';
 import {RouterModule} from '@angular/router';
 
@@ -9,22 +8,23 @@ 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 {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';
 
 
 @NgModule({
   imports: [
     HttpModule,
     RouterModule,
     BrowserModule,
-    MaterialModule,
+    DocsMaterialModule,
   ],
-  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
-  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemeChooser, SvgViewer],
+  declarations: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
+  exports: [DocViewer, ExampleViewer, NavBar, PlunkerButton, ThemePicker, SvgViewer],
   providers: [DocumentationItems, GuideItems, ThemeStorage, SvgBuilder],
   entryComponents: [
     ExampleViewer,

src/app/shared/svg-viewer/svg-builder.spec.ts

@@ -3,7 +3,7 @@ import {async, inject, TestBed} from '@angular/core/testing';
 import {HttpModule} from '@angular/http';
 import {MaterialModule} from '@angular/material';
 
-import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
+import {DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage';
 import {SvgBuilder} from './svg-builder';
 
 

src/app/shared/svg-viewer/svg-builder.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 
-import {DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
+import {DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage';
 
 import * as Color from 'color';
 

src/app/shared/svg-viewer/svg-viewer.ts

@@ -4,7 +4,7 @@ import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 
 import {ThemeColors, SvgBuilder} from './svg-builder';
-import {ThemeStorage, DocsSiteTheme} from '../theme-chooser/theme-storage/theme-storage';
+import {ThemeStorage, DocsSiteTheme} from '../theme-picker/theme-storage/theme-storage';
 
 
 @Component({

src/app/shared/theme-chooser/index.ts

@@ -0,0 +1 @@
+export * from './theme-picker';

src/app/shared/theme-picker/index.ts

@@ -3,13 +3,13 @@
 </button>
 
 <!-- TODO: replace use of `md-menu` here with a custom overlay -->
-<md-menu class="docs-theme-chooser-menu" #themeMenu="mdMenu" x-position="before">
+<md-menu class="docs-theme-picker-menu" #themeMenu="mdMenu" x-position="before">
   <md-grid-list cols="2">
     <md-grid-tile *ngFor="let theme of themes">
       <div md-menu-item (click)="installTheme(theme.href)">
-        <div class="docs-theme-chooser-swatch">
+        <div class="docs-theme-picker-swatch">
           <md-icon class="docs-theme-chosen-icon" *ngIf="currentTheme === theme">check_circle</md-icon>
-          <div class="docs-theme-chooser-primary" [style.background]="theme.primary"></div>
+          <div class="docs-theme-picker-primary" [style.background]="theme.primary"></div>
         </div>
       </div>
     </md-grid-tile>

src/app/shared/theme-chooser/theme-chooser.html renamed to src/app/shared/theme-picker/theme-picker.html

@@ -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;
   }
 }