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
PatrickJS · May 19, 2016 · 4e4f719 · 4e4f719
1 parent ddec25a
commit 4e4f719
Show file tree

Hide file tree

Showing 14 changed files with 45 additions and 196 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
+}
diff --git 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
@@ -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;
-}
+/*styles for home content only*/
diff --git 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>
diff --git 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
diff --git 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
@@ -9,18 +9,13 @@ 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
 */
 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
@@ -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