Merge remote-tracking branch 'origin/master'

Conflicts:
	ionic/components/nav/nav-item.js
	ionic/components/view/view.scss

ionic/components/app/structure.scss

@@ -117,7 +117,8 @@ ion-content {
   right: 0;
   bottom: 0;
   left: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
+  overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   will-change: scroll-position;
 }

ionic/components/app/test/sink/index.js

@@ -6,7 +6,7 @@ import {Query} from 'angular2/src/core/annotations_impl/di';
 
 console.log(Query, QueryList);
 
-import {Ionic, Nav, Toolbar, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
+import {Ionic, Nav, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
@@ -14,19 +14,22 @@ import {ListPage} from './pages/list'
 import {CardPage} from './pages/card'
 import {FormPage} from './pages/form'
 import {SegmentPage} from './pages/segment'
-import {SearchBar} from './pages/search-bar'
+import {SearchBarPage} from './pages/search-bar'
 import {IconsPage} from './pages/ionicons'
+import {TabsPage} from './pages/tabs'
 import {AsidePage} from './pages/aside'
 import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
 
+console.log('Loaded', Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button);
+
 @Component({
   selector: 'ion-app',
 })
 @View({
   templateUrl: 'main.html',
-  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Toolbar, Item, Content, Button]
+  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button]
 })
 export class IonicApp {
   constructor(elementRef: ElementRef) {//, @Query(Aside) nav: QueryList) {//, @Descendant() aside: Aside) {
@@ -39,8 +42,9 @@ export class IonicApp {
       { title: 'Cards', component: CardPage },
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },
-      { title: 'Search Bar', component: SearchBar},
+      { title: 'Search Bar', component: SearchBarPage },
       { title: 'Icons', component: IconsPage },
+      { title: 'Tabs', component: TabsPage },
       { title: 'Aside', component: AsidePage },
       { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },

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>

ionic/components/app/test/sink/pages/button.js

@@ -3,7 +3,7 @@ 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 {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+import {Routable, NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -43,3 +43,8 @@ export class ButtonPage {
     window.nav = nav;
   }
 }
+
+new Routable(ButtonPage, {
+  url: '/components/button',
+  tag: 'button'
+})

ionic/components/app/test/sink/pages/card.js

@@ -20,8 +20,8 @@ import {List, Item, ActionMenu, Modal, ModalRef,
       like it would be on an index card or a piece of paper.
     </p>
     <p>
-      Cards are great for displaying contextual informaion in a small amount of space,
-      like a Tweet, today's weather report, and a photo.
+      Cards are great for displaying contextual information in a small space,
+      like a Tweet, today's weather report, or a photo.
     </p>
     <div class="card">
 

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();
   }
 }

ionic/components/app/test/sink/pages/search-bar.js

@@ -2,17 +2,19 @@ import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from '
 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 {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
+import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
   NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
 
+  console.log(NavbarTemplate, Navbar, Content, formDirectives);
+
 @Component({
   selector: 'ion-view'
 })
 @View({
   template: `
-  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+  <ion-navbar *navbar><ion-title>Search Bar</ion-title></ion-navbar>
 
   <ion-content class="padding">
     <h2>Search Bar</h2>
@@ -25,17 +27,20 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
     </p>
 
     <form (^submit)="doSubmit($event)" [control-group]="form">
+      <ion-search-bar control="searchQuery"></ion-search-bar>
+      <div>
+        Query: <b>{{form.controls.searchQuery.value}}</b>
+      </div>
     </form>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
 })
-export class SegmentPage {
+export class SearchBarPage {
   constructor() {
     var fb = new FormBuilder();
     this.form = fb.group({
-      mapStyle: ['hybrid', Validators.required]
+      searchQuery: ['', Validators.required]
     });
-
   }
 }

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'
 })

ionic/components/app/test/sink/pages/tabs.js

@@ -0,0 +1,25 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+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 {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Tabs</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content]
+})
+export class TabsPage {
+  constructor() {
+  }
+}