From 661c97e0206b8e11aec076545f0382c03b8778eb Mon Sep 17 00:00:00 2001
From: Elle Beal <elle.beal@gmail.com>
Date: Thu, 19 May 2016 16:40:03 -0700
Subject: [PATCH] Material remove (#613)

* Remove material2 and simplify html and css

* add form back to home

* add exterior state back to app

* add about content back in

* update e2e test
---
 config/webpack.common.js                      |  1 -
 config/webpack.test.js                        |  1 -
 package.json                                  | 12 ------
 src/app/about/about.component.ts              | 26 +++++-------
 src/app/app.component.ts                      | 36 +++++-----------
 src/app/app.css                               | 34 +--------------
 src/app/app.e2e.ts                            | 14 +++----
 src/app/home/home.css                         | 15 +------
 src/app/home/home.html                        | 34 +++++++--------
 src/index.html                                |  1 -
 .../browser/angular2-material2/index.ts       | 42 -------------------
 src/platform/browser/directives.ts            |  7 +---
 src/platform/browser/providers.ts             |  5 ---
 src/vendor.ts                                 | 13 ------
 14 files changed, 45 insertions(+), 196 deletions(-)
 delete mode 100644 src/platform/browser/angular2-material2/index.ts

diff --git a/config/webpack.common.js b/config/webpack.common.js
index 634b38bd8f..be0402e750 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -123,7 +123,6 @@ module.exports = {
         exclude: [
           // these packages have problems with their sourcemaps
           helpers.root('node_modules/rxjs'),
-          helpers.root('node_modules/@angular2-material'),
           helpers.root('node_modules/@angular'),
         ]
       }
diff --git a/config/webpack.test.js b/config/webpack.test.js
index fd51979c7d..1a56bb2e39 100644
--- a/config/webpack.test.js
+++ b/config/webpack.test.js
@@ -88,7 +88,6 @@ module.exports = {
         exclude: [
         // these packages have problems with their sourcemaps
         helpers.root('node_modules/rxjs'),
-        helpers.root('node_modules/@angular2-material'),
         helpers.root('node_modules/@angular')
       ]}
 
diff --git a/package.json b/package.json
index d8b50c22c4..5504df643b 100644
--- a/package.json
+++ b/package.json
@@ -66,18 +66,6 @@
 
    },
   "dependencies": {
-    "@angular2-material/button": "2.0.0-alpha.4",
-    "@angular2-material/card": "2.0.0-alpha.4",
-    "@angular2-material/checkbox": "2.0.0-alpha.4",
-    "@angular2-material/icon": "2.0.0-alpha.4",
-    "@angular2-material/core": "2.0.0-alpha.4",
-    "@angular2-material/input": "2.0.0-alpha.4",
-    "@angular2-material/list": "2.0.0-alpha.4",
-    "@angular2-material/progress-bar": "2.0.0-alpha.4",
-    "@angular2-material/progress-circle": "2.0.0-alpha.4",
-    "@angular2-material/radio": "2.0.0-alpha.4",
-    "@angular2-material/sidenav": "2.0.0-alpha.4",
-    "@angular2-material/toolbar": "2.0.0-alpha.4",
     "@angular/http": "2.0.0-rc.1",
     "@angular/common": "2.0.0-rc.1",
     "@angular/compiler": "2.0.0-rc.1",
diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts
index c31de54356..ab5a334aef 100644
--- a/src/app/about/about.component.ts
+++ b/src/app/about/about.component.ts
@@ -11,24 +11,18 @@ console.log('`About` component loaded asynchronously');
 @Component({
   selector: 'about',
   styles: [`
-    h1 {
-      font-family: Arial, Helvetica, sans-serif
-    }
-    md-card{
-      margin: 25px;
-    }
   `],
   template: `
-  <md-card>
-    For hot module reloading run
-    <pre>npm run start:hmr</pre>
-  </md-card>
-  <md-card>
-    <h3>
-      patrick@AngularClass.com
-    </h3>
-  </md-card>
-
+    <h1>About</h1>
+    <div>
+      For hot module reloading run
+      <pre>npm run start:hmr</pre>
+    </div>
+    <div>
+      <h3>
+        patrick@AngularClass.com
+      </h3>
+    </div>
   `
 })
 export class About {
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 6782958a1a..c3b15dcc8f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -19,37 +19,21 @@ import { RouterActive } from './router-active';
   directives: [ RouterActive ],
   encapsulation: ViewEncapsulation.None,
   styles: [
-    require('normalize.css'),
     require('./app.css')
   ],
   template: `
-    <md-content>
-      <md-toolbar color="primary">
-          <span>{{ name }}</span>
-          <span class="fill"></span>
-          <button md-button router-active [routerLink]=" ['Index'] ">
-            Index
-          </button>
-          <button md-button router-active [routerLink]=" ['Home'] ">
-            Home
-          </button>
-          <button md-button router-active [routerLink]=" ['About'] ">
-            About
-          </button>
-      </md-toolbar>
-
-      <md-progress-bar mode="indeterminate" color="primary" *ngIf="loading"></md-progress-bar>
-
+      <button router-active [routerLink]=" ['Index'] ">
+        Index
+      </button>
+      <button router-active [routerLink]=" ['Home'] ">
+        Home
+      </button>
+      <button router-active [routerLink]=" ['About'] ">
+        About
+      </button>
       <router-outlet></router-outlet>
-
       <pre class="app-state">this.appState.state = {{ appState.state | json }}</pre>
-
-      <footer>
-        <img [src]="angularclassLogo" width="6%">
-        WebPack Angular 2 Starter by <a [href]="url">@AngularClass</a>
-      </footer>
-      </md-content>
-  `
+    `
 })
 @RouteConfig([
   { path: '/',      name: 'Index', component: Home, useAsDefault: true },
diff --git a/src/app/app.css b/src/app/app.css
index 7201173393..c5721b117e 100644
--- a/src/app/app.css
+++ b/src/app/app.css
@@ -1,34 +1,4 @@
 html, body{
   height: 100%;
-  background: #F4FAFA;
-}
-button.active{
-  background: #fff;
-  color: #009688;
-}
-button.active:hover{
-  color: #fff;
-}
-.fill{
-  flex: 1 1 auto;
-}
-.app-state{
-  margin: 15px;
-  flex: 1;
-}
-.home{
-  flex: 1;
-}
-md-content{
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-footer{
-  flex: 0 0 60px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #fff;
-}
+  font-family: Arial, Helvetica, sans-serif
+}
\ No newline at end of file
diff --git a/src/app/app.e2e.ts b/src/app/app.e2e.ts
index ecc503e12d..1d41054370 100644
--- a/src/app/app.e2e.ts
+++ b/src/app/app.e2e.ts
@@ -11,21 +11,21 @@ describe('App', () => {
     expect(subject).toEqual(result);
   });
 
-  it('should have <header>', () => {
-    let subject = element(by.css('app header')).isPresent();
+  it('should have header', () => {
+    let subject = element(by.css('h1')).isPresent();
     let result  = true;
     expect(subject).toEqual(result);
   });
 
-  it('should have <main>', () => {
-    let subject = element(by.css('app main')).isPresent();
+  it('should have <home>', () => {
+    let subject = element(by.css('app home')).isPresent();
     let result  = true;
     expect(subject).toEqual(result);
   });
 
-  it('should have <footer>', () => {
-    let subject = element(by.css('app footer')).getText();
-    let result  = 'WebPack Angular 2 Starter by @AngularClass';
+  it('should have buttons', () => {
+    let subject = element(by.css('button')).getText();
+    let result  = 'Index';
     expect(subject).toEqual(result);
   });
 
diff --git a/src/app/home/home.css b/src/app/home/home.css
index d465808a83..4511e22d14 100644
--- a/src/app/home/home.css
+++ b/src/app/home/home.css
@@ -1,14 +1 @@
-/*styles for home content only*/
-.card-container{
-    display: flex;
-    flex-direction: column;
-    margin: 15px;
-    
-    border: 2px dashed #FBC02D;
-}
-.sample-content{
-    flex: 1;
-}
-.card-container md-card{
-    margin: 5px;
-}
\ No newline at end of file
+/*styles for home content only*/
\ No newline at end of file
diff --git a/src/app/home/home.html b/src/app/home/home.html
index 9901fa412f..2041e546c8 100644
--- a/src/app/home/home.html
+++ b/src/app/home/home.html
@@ -1,34 +1,28 @@
 <div class="card-container">
-  <md-card x-large class="sample-content">Your Content Here</md-card>
-  <md-card>
+  <h1 x-large class="sample-content">Your Content Here</h1>
+  <div>
     For hot module reloading run
     <pre>npm run start:hmr</pre>
-  </md-card>
-  <md-card>
-    <md-card-title>Local State</md-card-title>
-    <md-card-content>
+  </div>
+  <div>
+    <h4>Local State</h4>
 
-      <form (ngSubmit)="submitState(localState.value)" autocomplete="off">
+    <form (ngSubmit)="submitState(localState.value)" autocomplete="off">
 
-        <md-input
-          placeholder="Submit Local State to App State"
-          [value]="localState.value"
-          (input)="localState.value = $event.target.value"
-          autofocus>
-        </md-input>
+      <input placeholder="Submit Local State to App State" [value]="localState.value" (input)="localState.value = $event.target.value"
+        autofocus>
 
-        <button md-raised-button color="primary">Submit Value</button>
-      </form>
-      <!--
+      <button md-raised-button color="primary">Submit Value</button>
+    </form>
+    <!--
         <input type="text" [value]="localState.value" (input)="localState.value = $event.target.value" autofocus>
         Rather than wiring up two-way data-binding ourselves with [value] and (input)
         we can use Angular's [(ngModel)] syntax
         <input type="text" [(ngModel)]="localState.value" autofocus>
       -->
 
-      <pre>this.localState = {{ localState | json }}</pre>
+    <pre>this.localState = {{ localState | json }}</pre>
 
-    </md-card-content>
-  </md-card>
+  </div>
 
-</div>
+</div>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 96687bf2ae..6e70f48fc3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -57,7 +57,6 @@
   <script src="/webpack-dev-server.js"></script>
   <% } %>
   
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
 </body>
 </html>
diff --git a/src/platform/browser/angular2-material2/index.ts b/src/platform/browser/angular2-material2/index.ts
deleted file mode 100644
index 7cbcc4d37f..0000000000
--- a/src/platform/browser/angular2-material2/index.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { MdAnchor, MdButton } from '@angular2-material/button';
-import { MD_CARD_DIRECTIVES } from '@angular2-material/card';
-import { MdCheckbox } from '@angular2-material/checkbox';
-import { MD_INPUT_DIRECTIVES } from '@angular2-material/input';
-import { MD_LIST_DIRECTIVES } from '@angular2-material/list';
-import { MdProgressBar } from '@angular2-material/progress-bar';
-import { MdProgressCircle, MdSpinner } from '@angular2-material/progress-circle';
-import { MdRadioButton, MdRadioDispatcher, MdRadioGroup } from '@angular2-material/radio';
-import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav';
-import { MdToolbar } from '@angular2-material/toolbar';
-import { MdIcon, MdIconRegistry } from '@angular2-material/icon';
-/*
- * we are grouping the module so we only need to manage the imports in one location
- */
-
-export const MATERIAL_PIPES = [
-
-];
-
-export const MATERIAL_DIRECTIVES = [
-  ...MD_SIDENAV_DIRECTIVES,
-  ...[
-    MdAnchor,
-    MdButton,
-    MdToolbar,
-    MdCheckbox,
-    MdRadioButton,
-    MdRadioGroup,
-    MdSpinner,
-    MdProgressBar,
-    MdProgressCircle,
-    MdIcon
-  ],
-  ...MD_INPUT_DIRECTIVES,
-  ...MD_LIST_DIRECTIVES,
-  ...MD_CARD_DIRECTIVES
-];
-
-export const MATERIAL_PROVIDERS = [
-  MdRadioDispatcher,
-  MdIconRegistry
-];
diff --git a/src/platform/browser/directives.ts b/src/platform/browser/directives.ts
index c3956a3e91..9448089903 100644
--- a/src/platform/browser/directives.ts
+++ b/src/platform/browser/directives.ts
@@ -6,14 +6,9 @@ import { PLATFORM_DIRECTIVES } from '@angular/core';
 // Angular 2 Router
 import { ROUTER_DIRECTIVES } from '@angular/router-deprecated';
 
-// Angular 2 Material 2
-// TODO(gdi2290): replace with @angular2-material/all
-import { MATERIAL_DIRECTIVES } from './angular2-material2';
-
 // application_directives: directives that are global through out the application
 export const APPLICATION_DIRECTIVES = [
-  ...ROUTER_DIRECTIVES,
-  ...MATERIAL_DIRECTIVES
+  ...ROUTER_DIRECTIVES
 ];
 
 export const DIRECTIVES = [
diff --git a/src/platform/browser/providers.ts b/src/platform/browser/providers.ts
index 3f083f9b45..113cec6ca6 100644
--- a/src/platform/browser/providers.ts
+++ b/src/platform/browser/providers.ts
@@ -9,10 +9,6 @@ import { HTTP_PROVIDERS } from '@angular/http';
 // Angular 2 Router
 import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
 
-// Angular 2 Material
-// TODO(gdi2290): replace with @angular2-material/all
-import { MATERIAL_PROVIDERS } from './angular2-material2';
-
 /*
 * Application Providers/Directives/Pipes
 * providers/directives/pipes that only live in our browser environment
@@ -20,7 +16,6 @@ import { MATERIAL_PROVIDERS } from './angular2-material2';
 export const APPLICATION_PROVIDERS = [
   ...FORM_PROVIDERS,
   ...HTTP_PROVIDERS,
-  ...MATERIAL_PROVIDERS,
   ...ROUTER_PROVIDERS,
   {provide: LocationStrategy, useClass: HashLocationStrategy }
 ];
diff --git a/src/vendor.ts b/src/vendor.ts
index 25fd182207..5992bebd75 100644
--- a/src/vendor.ts
+++ b/src/vendor.ts
@@ -15,19 +15,6 @@ import '@angular/router-deprecated';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/mergeMap';
 
-// Angular 2 Material 2
-import '@angular2-material/button';
-import '@angular2-material/card';
-import '@angular2-material/checkbox';
-import '@angular2-material/sidenav';
-import '@angular2-material/input';
-import '@angular2-material/list';
-import '@angular2-material/radio';
-import '@angular2-material/progress-bar';
-import '@angular2-material/progress-circle';
-import '@angular2-material/toolbar';
-// look in src/platform/angular2-material2 and src/platform/providers
-
 if ('production' === ENV) {
   // Production