starting to get advanced tabs to work

ionic/components/app/structure.scss

@@ -45,10 +45,11 @@ ion-tab {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  flex-direction: column;
 
   display: none;
   &.show-tab {
-    display: block;
+    display: flex;
   }
 }
 

ionic/components/tabs/tab.js

@@ -1,6 +1,5 @@
 import {Parent} from 'angular2/src/core/annotations_impl/visibility';
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {Directive} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {Injector} from 'angular2/di';
@@ -39,8 +38,6 @@ export class Tab {
     this.nav = new NavBase(loader, injector);
     this.domElement = elementRef.domElement;
 
-    this.config = Tab.config.invoke(this);
-
     this.id = util.nextUid();
     this.contentId = 'tab-content-' + this.id;
     this.labeledBy = 'tab-button-' + this.id;
@@ -62,15 +59,3 @@ export class Tab {
   }
 
 }
-
-new IonicComponent(Tab, {});
-
-
-@Directive({
-  selector: '[content-anchor]'
-})
-class ContentAnchor {
-  constructor(@Parent() tab: Tab, elementRef: ElementRef) {
-    tab.setRef(elementRef);
-  }
-}

ionic/components/tabs/tabs.js

@@ -22,7 +22,7 @@ import {TabButton} from './tab-button';
   template: `
     <nav class="navbar-container tab-bar-container">
       <div class="tab-bar">
-        <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
+        <button *ng-for="#t of tabs" [tab]="t" class="tab-button">
           <icon [class-name]="'tab-button-icon ' + t.tabIcon"></icon>
           <span class="tab-button-text">{{t.tabTitle}}</span>
         </button>
@@ -51,15 +51,24 @@ export class Tabs {
     this.tabs.push(tab);
   }
 
-  selectTab(tab) {
+  selectTab(tabToSelect) {
-    if (!tab || this._selected === tab) return;
+    if (typeof tabToSelect === 'number') {
+      let index = tabToSelect;
+      tabToSelect = null;
+      if (index < this.tabs.length) {
+        tabToSelect = this.tabs[index];
+      }
+    }
+    if (!tabToSelect || this._selected === tabToSelect) return;
 
     this.tabs.forEach(otherTab => {
-      otherTab.select(false);
+      if (otherTab !== tabToSelect) {
+        otherTab.select(false);
+      }
     });
 
-    tab.select(true);
+    tabToSelect.select(true);
-    this._selected = tab;
+    this._selected = tabToSelect;
   }
 
 }

ionic/components/tabs/test/advanced/index.js

@@ -2,8 +2,8 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Nav} from 'ionic/ionic'
+import {Nav} from 'ionic/ionic';
-import {SignInPage} from './pages/sign-in'
+import {SignInPage} from './pages/sign-in';
 
 
 @Component({

ionic/components/tabs/test/advanced/pages/sign-in.html

@@ -1,45 +0,0 @@
-<header *ion-toolbar>
-
-  <button class="button button-primary" side="primary">
-    Button 1
-  </button>
-  <button class="button" side="primary">
-    Button 2
-  </button>
-
-  <h1 class="toolbar-title">
-    My Title
-  </h1>
-
-  <button class="button toolbar-secondary" side="secondary">
-    Button 3
-  </button>
-</header>
-
-<ion-content>
-  <p>
-    <button class="button button-primary" (click)="signIn()">
-      Sign In
-    </button>
-    <button class="button button-primary button-outline">
-      <icon class="ion-star"></icon>
-    </button>
-  </p>
-
-  <p>
-    <input>
-  </p>
-
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-  <f></f>
-
-</ion-content>

ionic/components/tabs/test/advanced/pages/sign-in.js

@@ -1,32 +1,29 @@
-import {
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
-  Component,
+import {View} from 'angular2/src/core/annotations_impl/view';
-  View,
+
-  Ancestor,
+import {NavController, NavbarTemplate, Navbar, Content} from 'ionic/ionic';
-} from 'angular2/angular2';
-import {
-  NavItem,
-  Content,
-  NavController,
-  Toolbar,
-  ToolbarTitle,
-} from 'ionic/ionic';
 import {TabsPage} from './tabs';
 
-@Component()
+
+@Component({selector: 'ion-view'})
 @View({
-  templateUrl: './pages/sign-in.html',
+  template: '' +
-  directives: [Content, Toolbar, ToolbarTitle]
+    '<ion-navbar *navbar>' +
+      '<ion-title>Sign In</ion-title>' +
+    '</ion-navbar>' +
+    '<ion-content class="padding">' +
+      '<p><button class="button" (click)="push()">Go to tabs</button></p>' +
+      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><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>',
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class SignInPage {
-  constructor(
+  constructor(nav: NavController) {
-    nav: NavController
-  ) {
     this.nav = nav;
   }
-  signIn() {
+
-    console.log('click');
+  push() {
-    this.nav.push(TabsPage, {
+    this.nav.push(TabsPage);
-      my: 'param'
-    })
   }
 }

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

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

ionic/components/tabs/test/advanced/pages/tabs.js

@@ -1,17 +1,15 @@
-import {
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
-  Component,
+import {View} from 'angular2/src/core/annotations_impl/view';
-  View,
+
-  Parent,
-} from 'angular2/angular2';
 import {
   Tabs,
   Tab,
-  Aside,
   Content,
   NavController,
 } from 'ionic/ionic';
 import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';
 
+
 @Component({
   selector: 'tabs-page'
 })
@@ -88,9 +86,6 @@ class Tab1Page2 {
 @Component({ selector: 't2p1' })
 @View({
   template: `
-    <ion-aside side="left" [content]="view">
-      Left aside for Tab 2 Page 1
-    </ion-aside>
     <ion-content class="padding">
       <p>Tab 2 Page 1.</p>
       <button class="button button-primary" (click)="next()">
@@ -100,7 +95,7 @@ class Tab1Page2 {
       <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>
   `,
-  directives: [Aside, Content]
+  directives: [Content]
 })
 class Tab2Page1 {
   // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
@@ -115,9 +110,6 @@ class Tab2Page1 {
 @Component({ selector: 't2p2' })
 @View({
   template: `
-    <ion-aside side="left" [content]="view">
-      Left aside for Tab 2 Page 2
-    </ion-aside>
     <ion-tabs #view class="view-cover">
       <ion-tab tab-title="Nested Tab 1">
         <ion-content class="padding">
@@ -133,7 +125,7 @@ class Tab2Page1 {
       </ion-tab>
     </ion-tabs>
   `,
-  directives: [Aside, Tabs, Tab, Content]
+  directives: [Tabs, Tab, Content]
 })
 class Tab2Page2 {
   // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.

ionic/components/tabs/test/basic/index.js

@@ -2,7 +2,7 @@ import {bootstrap} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Tabs, Tab} from 'ionic/ionic'
+import {Tabs, Tab, Content} from 'ionic/ionic'
 import {Engine} from 'ionic/engine/engine'
 import * as util from 'ionic/util'
 
@@ -10,7 +10,7 @@ import * as util from 'ionic/util'
 @Component({ selector: 'ion-app' })
 @View({
   templateUrl: 'main.html',
-  directives: [Tabs, Tab]
+  directives: [Tabs, Tab, Content]
 })
 class IonicApp {
   constructor() {