From ef19fabc5a980deb72d3e50f4eec9c34c9ed2d80 Mon Sep 17 00:00:00 2001
From: Max Lynch <ihasmax@gmail.com>
Date: Mon, 1 Jun 2015 21:30:36 -0500
Subject: [PATCH] Form and aside flex

---
 ionic/components/app/test/sink/main.html      | 15 +++++++----
 ionic/components/app/test/sink/pages/form.js  | 26 +++++++++++++++++--
 .../components/app/test/sink/pages/segment.js |  2 --
 ionic/components/aside/aside.scss             |  3 +++
 4 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/ionic/components/app/test/sink/main.html b/ionic/components/app/test/sink/main.html
index 4bc0dfe4fd..48f3b46c6b 100644
--- a/ionic/components/app/test/sink/main.html
+++ b/ionic/components/app/test/sink/main.html
@@ -1,9 +1,14 @@
 <ion-aside #aside [content]="content">
-  <ion-list inset>
-    <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
-      {{c.title}}
-    </ion-item>
-  </ion-list>
+  <ion-toolbar>
+    <ion-title>Ionic 2.0</ion-title>
+  </ion-toolbar>
+  <ion-content>
+    <ion-list inset>
+      <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
+        {{c.title}}
+      </ion-item>
+    </ion-list>
+  </ion-content>
 </ion-aside>
 
 <ion-nav #content [initial]="firstPage"></ion-nav>
diff --git a/ionic/components/app/test/sink/pages/form.js b/ionic/components/app/test/sink/pages/form.js
index 85089e93c3..0d263c564e 100644
--- a/ionic/components/app/test/sink/pages/form.js
+++ b/ionic/components/app/test/sink/pages/form.js
@@ -3,7 +3,9 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {List, Item, ActionMenu, Modal, ModalRef,
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {List, Item, Input, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
 @Component({
@@ -23,11 +25,31 @@ import {List, Item, ActionMenu, Modal, ModalRef,
       Ionic comes with a variety of useful from controls, like
       text inputs, text areas, toggle switches, and sliders.
     </p>
+    <form (^submit)="doSubmit($event)" [control-group]="form">
+      <ion-input>
+        <input control="email" type="email" placeholder="Your email">
+      </ion-input>
+      <ion-input>
+        <input control="password" type="password" placeholder="Your password">
+      </ion-input>
+      <button ion-button primary block type="submit">Submit</button>
+    </form>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input, Button]
 })
 export class FormPage {
   constructor() {
+    var fb = new FormBuilder()
+
+    this.form = fb.group({
+      email: ['', Validators.required],
+      password: ['', Validators.required],
+    });
+  }
+
+  doSubmit(event) {
+    console.log('Submitted:', this.form.value);
+    event.preventDefault();
   }
 }
diff --git a/ionic/components/app/test/sink/pages/segment.js b/ionic/components/app/test/sink/pages/segment.js
index 99ad6341fd..f19a83462a 100644
--- a/ionic/components/app/test/sink/pages/segment.js
+++ b/ionic/components/app/test/sink/pages/segment.js
@@ -7,8 +7,6 @@ import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/fo
 import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
-console.log('imporrted', formDirectives, Segment, SegmentButton);
-
 @Component({
   selector: 'ion-view'
 })
diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss
index c72069c6d6..c59ddb05ac 100644
--- a/ionic/components/aside/aside.scss
+++ b/ionic/components/aside/aside.scss
@@ -10,6 +10,9 @@ $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !def
 
   background: $aside-background;
 
+  display: flex;
+  flex-direction: column;
+
 
   &[type=overlay] {
     z-index: $z-index-aside-overlay;