Tabs for bark park

src/components/app/test/barkpark/main.js

@@ -4,7 +4,7 @@ import {FormBuilder, Validators, FormDirectives, CongrolGroup} from 'angular2/fo
 
 import {Log} from 'ionic2/util'
 
-import {NavViewport, View, Button, Input} from 'ionic2/ionic2'
+import {NavViewport, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic2/ionic2'
 
 @Component({
   selector: 'login-page'
@@ -15,6 +15,7 @@ import {NavViewport, View, Button, Input} from 'ionic2/ionic2'
 })
 export class LoginPage {
   constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+
     this.viewport = viewport
     Log.log('LOGIN PAGE')
 
@@ -34,6 +35,7 @@ export class LoginPage {
   }
   doSignup(event) {
     this.viewport.push(SignupPage)
+
   }
 }
 
@@ -46,6 +48,7 @@ export class LoginPage {
 })
 export class SignupPage {
   constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+
     this.viewport = viewport
     Log.log('SIGNUP PAGE')
 
@@ -65,10 +68,90 @@ export class SignupPage {
     Log.log('Doing signup')
     event.preventDefault();
     console.log(this.signupForm.value);
+
+    this.viewport.push(AppPage)
     //this.viewport.push(SecondPage)
   }
 }
 
+
+
+@Component({
+  selector: 'app-page'
+})
+@Template({
+  url: 'pages/app.html',
+  directives: [View, FormDirectives, Button, Input, Tabs, Tab]
+})
+export class AppPage {
+  constructor( @Parent() viewport: NavViewport ) { //, fb: FormBuilder ) {
+    this.viewport = viewport
+    this.streamTab = StreamTab
+  }
+}
+
+@Component({ selector: 'stream-tab' })
+@Template({
+  url: 'pages/tabs/home.html',
+  directives: [View, Content]
+})
+class StreamTab {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
+  }
+  selectPost(post) {
+    this.navPane.push(PostDetail, {
+      post
+    }, {
+      transition: '3dflip'
+    })
+  }
+}
+
+@Component({ selector: 'post-detail-tab' })
+@Template({
+  url: 'pages/posts/detail.html',
+  directives: [View, Content]
+})
+class PostDetail {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
+  }
+  selectItem() {
+    this.navPane.push(PostDetailTab)
+  }
+}
+
+//
+// tab 2
+//
+@Component({ selector: 't2p1' })
+@Template({
+  inline: `
+    <ion-aside side="left" [content]="view">
+      Left aside for Tab 2 Page 1
+    </ion-aside>
+    <ion-view nav-title="Tab 2 Page 1" #view>
+      <ion-content class="padding">
+        <p>Tab 2 Page 1.</p>
+        <button class="button button-primary" (click)="next()">
+          Go to Tab 2 Page 2 (push)
+        </button>
+        <br/><span style="color:red">I have got an aside on the left.</span>
+        <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
+      </ion-content>
+    </ion-view>
+  `,
+  directives: [View, Aside, Content]
+})
+class Tab2Page1 {
+  constructor(navPane: NavPane) {
+    this.navPane = navPane
+  }
+  next() {
+  }
+}
+
 @Component({ selector: '[ion-app]' })
 @Template({
   directives: [NavViewport],
@@ -76,7 +159,7 @@ export class SignupPage {
 })
 class IonicApp {
   constructor() {
-    this.firstPage = LoginPage
+    this.firstPage = AppPage//LoginPage
     console.log('IonicApp Start')
   }
 }

src/components/app/test/barkpark/pages/app.html

@@ -0,0 +1,9 @@
+<ion-tabs>
+
+  <ion-tab [initial]="tab1Initial" tab-title="Tab 1">
+  </ion-tab>
+
+  <ion-tab [initial]="tab2Initial" tab-title="Tab 2">
+  </ion-tab>
+
+</ion-tabs>

src/components/app/test/barkpark/pages/post/detail.html

@@ -0,0 +1 @@
+<h1>{{post.title}}</h1>

src/components/app/test/barkpark/pages/tabs/home.html

@@ -0,0 +1,8 @@
+<ion-view nav-title="Stream">
+  <ion-content class="padding">
+    <ion-list>
+      <ion-item *for="post of posts" (click)="selectPost(post)">
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</ion-view>

src/components/nav-pane/nav-pane.js

@@ -1,15 +1,23 @@
-import {DynamicComponent, Parent, NgElement} from 'angular2/angular2'
+import {DynamicComponent, Parent, NgElement, bind} from 'angular2/angular2'
 import {Optional} from 'angular2/src/di/annotations'
 import {NavViewport} from 'ionic2/components/nav-viewport/nav-viewport'
 import {Tab} from 'ionic2/components/tabs/tab'
 import {PrivateComponentLoader} from 'angular2/src/core/compiler/private_component_loader'
 import {PrivateComponentLocation} from 'angular2/src/core/compiler/private_component_location'
+import {extend} from 'ionic2/util'
+
+class NavData = {
+  constructor(data = {}) {
+    extend(this, data)
+  }
+} 
 
 @DynamicComponent({
   selector: '.nav-pane',
   bind: {
     item: 'item'
-  }
+  },
+  services: [NavData]
 })
 export class NavPane {
   constructor(

src/components/nav-viewport/nav-viewport.js

@@ -88,12 +88,12 @@ export class NavViewport {
   // TODO make sure the timing is together
   // TODO allow starting an animation in the middle (eg gestures). Leave
   // most of this up to the animation's implementation.
-  push(Class: Function, opts = {}) {
+  push(Class: Function, data = {}, opts = {}) {
     util.defaults(opts, {
       sync: this._stack.length === 0
     })
 
-    let pushedItem = new NavItem(Class)
+    let pushedItem = new NavItem(Class, data)
     this._stack.push(pushedItem)
     this._ngForLoopArray.push(pushedItem)
 
@@ -177,8 +177,9 @@ export class NavViewport {
 }
 
 class NavItem {
-  constructor(ComponentClass) {
+  constructor(ComponentClass, data = {}) {
     this.Class = ComponentClass
+    this.data = data
     this._setupPromise = new Promise((resolve) => {
       this._resolveSetupPromise = resolve
     })

src/components/tabs/test/advanced/pages/tabs.html

@@ -1,4 +1,3 @@
-
 <ion-tabs>
 
   <ion-tab [initial]="tab1Initial" tab-title="Tab 1">