changeset 3:b4a1e0a67389

Playing around with material2

--- a/package.json	Tue Oct 25 14:43:01 2016 +0100
+++ b/package.json	Wed Oct 26 11:42:58 2016 +0100
@@ -17,10 +17,13 @@
     "@angular/core": "~2.1.0",
     "@angular/forms": "~2.1.0",
     "@angular/http": "~2.1.0",
+    "@angular/material": "^2.0.0-alpha.9-3",
     "@angular/platform-browser": "~2.1.0",
     "@angular/platform-browser-dynamic": "~2.1.0",
     "@angular/router": "~3.1.0",
+    "@types/hammerjs": "^2.0.33",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "5.0.0-beta.12",
     "ts-helpers": "^1.1.1",
     "zone.js": "^0.6.23"

--- a/src/app/app.component.html	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/app/app.component.html	Wed Oct 26 11:42:58 2016 +0100
@@ -1,18 +1,27 @@
-<h1>
-  {{title}}
-</h1>
-<div>
-  <ul>
-    <li *ngFor="let message of mail.messages">{{message.text}}</li>
-  </ul>
+<md-toolbar color="primary">
+  <span>{{title}}</span>
+  <!-- This fills the remaining space of the current row -->
+  <span class="example-fill-remaining-space"></span>
 
-  <ul>
-    <app-simple-form
-      *ngFor="let message of mail.messages"
-      [message]="message.text"
-      (update)="onUpdate(message.id, $event.text)"
-    >{{message}}</app-simple-form>
-  </ul>
-  <hr>
-  {{serverUri}}
-</div>
+  <span>Right Aligned Text</span>
+</md-toolbar>
+
+<md-slider min="1" max="5"></md-slider>
+<!--<h1>-->
+  <!--{{title}}-->
+<!--</h1>-->
+<!--<div>-->
+  <!--<ul>-->
+    <!--<li *ngFor="let message of mail.messages">{{message.text}}</li>-->
+  <!--</ul>-->
+
+  <!--<ul>-->
+    <!--<app-simple-form-->
+      <!--*ngFor="let message of mail.messages"-->
+      <!--[message]="message.text"-->
+      <!--(update)="onUpdate(message.id, $event.text)"-->
+    <!--&gt;{{message}}</app-simple-form>-->
+  <!--</ul>-->
+  <!--<hr>-->
+  <!--{{serverUri}}-->
+<!--</div>-->

--- a/src/app/app.component.ts	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/app/app.component.ts	Wed Oct 26 11:42:58 2016 +0100
@@ -7,7 +7,7 @@
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app works!';
+  title = 'Ugly';
 
   constructor(
     private mail: MailService,

--- a/src/app/app.module.ts	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/app/app.module.ts	Wed Oct 26 11:42:58 2016 +0100
@@ -6,6 +6,7 @@
 import { AppComponent } from './app.component';
 import { SimpleFormComponent } from './simple-form/simple-form.component';
 import {MailService} from "./mail.service";
+import {MaterialModule} from "@angular/material";
 
 @NgModule({
   declarations: [
@@ -15,7 +16,8 @@
   imports: [
     BrowserModule,
     FormsModule,
-    HttpModule
+    HttpModule,
+    MaterialModule.forRoot()
   ],
   providers: [
     MailService,

--- a/src/app/simple-form/simple-form.component.ts	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/app/simple-form/simple-form.component.ts	Wed Oct 26 11:42:58 2016 +0100
@@ -1,6 +1,6 @@
 import {
   Component, OnInit, Input, Output, EventEmitter,
-  ViewEncapsulation
+  ViewEncapsulation, ViewChild, ElementRef
 } from '@angular/core';
 
 @Component({
@@ -14,30 +14,18 @@
       (mouseup)="isMousedown = false"
       (mouseleave)="isMousedown = false"
     />
+    <pre #testPre>Hi</pre>
+    <pre>{{testHi}}</pre>
     <button (click)="update.emit({text:message})">Click me!</button>
-  `,
-  styles: [`
-:host {
-  display: flex;
-  flex-direction: column;
-}
-
-.mousedown {
-  border: 2px solid green;
-}
-
-input:focus {
-  font-weight: bold;
-  outline: none;
-}
-
-button {
-  border: none;
-}
-`]
+  
+`,
+  styleUrls: ['./simple-form.component.css']
 })
 export class SimpleFormComponent implements OnInit {
 
+  @ViewChild('testPre') testPre: ElementRef;
+  testHi = 'Hi';
+
   isMousedown;
 
   @Input() message;
@@ -49,6 +37,7 @@
   }
 
   ngOnInit() {
+    this.testPre.nativeElement.innerHTML = Math.random().toString();
   }
 
 }

--- a/src/index.html	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/index.html	Wed Oct 26 11:42:58 2016 +0100
@@ -7,7 +7,7 @@
 
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.5.3/css/tachyons.min.css"/>
+  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body>
   <app-root>Loading...</app-root>

--- a/src/polyfills.ts	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/polyfills.ts	Wed Oct 26 11:42:58 2016 +0100
@@ -17,3 +17,4 @@
 
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
+import 'hammerjs';

--- a/src/styles.css	Tue Oct 25 14:43:01 2016 +0100
+++ b/src/styles.css	Wed Oct 26 11:42:58 2016 +0100
@@ -1,1 +1,10 @@
 /* You can add global styles to this file, and also import other style files */
+@import '~@angular/material/core/theming/prebuilt/indigo-pink.css';
+
+body {
+  margin: 0;
+}
+
+.example-fill-remaining-space {
+  flex: 1 1 auto;
+}