the silence of the tabs

ionic/components/app/structure.scss

@@ -67,11 +67,10 @@ ion-toolbar {
   order: $flex-order-view-content;
 }
 
-.tab-pane-container {
+.tab-item-container {
   // container of each content for each tab component within a tabs component
-  flex: 1;
   position: relative;
-  width: 100%;
+  flex: 1;
   order: $flex-order-view-content;
 }
 

ionic/components/nav/nav.js

@@ -1,10 +1,10 @@
 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 {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
-import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
+import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {Injector} from 'angular2/di';
+import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 
 import {NavBase} from './nav-base';
 import {ToolbarContainer} from '../toolbar/toolbar-container';
@@ -18,12 +18,12 @@ import {ToolbarContainer} from '../toolbar/toolbar-container';
 })
 @View({
   template: `
-  <header class="toolbar-container">
-    <template header-anchor></template>
-  </header>
-  <section class="nav-item-container">
-    <template content-anchor></template>
-  </section>
+    <header class="toolbar-container">
+      <template header-anchor></template>
+    </header>
+    <section class="nav-item-container">
+      <template content-anchor></template>
+    </section>
   `,
   directives: [HeaderAnchor, ContentAnchor, ToolbarContainer]
 })

ionic/components/tabs/tab.js

@@ -1,26 +1,12 @@
-import {
-  Component,
-  NgElement,
-  View,
-  Ancestor,
-  For,
-  If,
-} from 'angular2/angular2';
-import {bind} from 'angular2/di';
+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 {ElementRef} from 'angular2/src/core/compiler/element_ref';
 
-import {NavInjectable} from 'ionic/components/nav/nav';
-import {NavBase} from 'ionic/components/nav/nav-base';
-import {NavItem} from 'ionic/components/nav/nav-item';
 import {Tabs} from 'ionic/components/tabs/tabs';
 import * as util from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component';
-import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
 
-/*
- * See components/nav/nav for an explanation of NavInjectable.
- * Allow a tab to publish itself on the injector in a similar manner.
- */
-class TabNavInjectable {}
 
 @Component({
   selector: 'ion-tab',
@@ -28,61 +14,38 @@ class TabNavInjectable {}
     title: 'tab-title',
     icon: 'tab-icon',
     initial: 'initial'
-  },
-  injectables: [
-    // Child components will inject `NavInjectable` but it will get the tabs one.
-    bind(NavInjectable).toClass(TabNavInjectable)
-  ]
+  }
 })
 @View({
   template: `
-  <header class="toolbar-container" [class.hide]="nav.getToolbars('top').length == 0">
-    <div *for="#toolbar of nav.getToolbars('top')" [toolbar-create]="toolbar">
-    </div>
-  </header>
-  <section class="nav-item-container">
-    <div class="nav-item"
-         *for="#item of nav.navItems"
-         [item]="item"></div>
-  </section>
-  <footer class="toolbar-container" [class.hide]="nav.getToolbars('bottom').length == 0">
-    <div *for="#toolbar of nav.getToolbars('bottom')" [toolbar-create]="toolbar">
-    </div>
-  </footer>
-  `,
-  directives: [NavItem, For, If, ToolbarContainer]
+    <section class="nav-item-container">
+      <template content-anchor></template>
+    </section>
+  `
 })
 export class Tab {
   constructor(
-    element: NgElement,
-    navInjectable: NavInjectable,
+    elementRef: ElementRef,
     @Ancestor() tabs: Tabs
-    // @PropertySetter('class.hide') setHidden: Function,
-    // @PropertySetter('attr.role') setRole: Function,
-    // @PropertySetter('attr.id') setId: Function,
-    // @PropertySetter('attr.aria-labelledby') setLabelby: Function
   ) {
-    this.nav = new NavBase(element);
-    this.domElement = element.domElement;
+    // this.nav = new NavBase(element);
+    // this.domElement = element.domElement;
 
-    // Allow children to get this nav instance from injecting the NavInjectable
-    navInjectable.nav = this.nav;
+    // let setHidden = (v) => this.domElement.classList[v?'add':'remove']('hide');
+    // let setRole = (v) => this.domElement.setAttribute('role', v);
+    // let setId = (v) => this.domElement.setAttribute('id', v);
+    // let setLabelby = (v) => this.domElement.setAttribute('aria-labelledby', v);
 
-    let setHidden = (v) => this.domElement.classList[v?'add':'remove']('hide');
-    let setRole = (v) => this.domElement.setAttribute('role', v);
-    let setId = (v) => this.domElement.setAttribute('id', v);
-    let setLabelby = (v) => this.domElement.setAttribute('aria-labelledby', v);
+    // this.config = Tab.config.invoke(this);
+    // this.setHidden = setHidden;
 
-    this.config = Tab.config.invoke(this);
-    this.setHidden = setHidden
+    // this.tabId = util.nextUid();
+    // setId('tab-content-' + this.tabId);
+    // setLabelby('tab-item-' + this.tabId);
+    // setRole('tabpanel');
 
-    this.tabId = util.nextUid()
-    setId('tab-content-' + this.tabId)
-    setLabelby('tab-item-' + this.tabId)
-    setRole('tabpanel')
-
-    this.setSelected(false)
-    tabs.addTab(this)
+    // this.setSelected(false);
+    tabs.addTab(this);
   }
 
   set initial(value) {
@@ -90,9 +53,10 @@ export class Tab {
   }
 
   setSelected(isSelected) {
-    this.isSelected = !!isSelected
-    this.setHidden(!this.isSelected)
+    this.isSelected = !!isSelected;
+    //this.setHidden(!this.isSelected);
   }
+
 }
 
-new IonicComponent(Tab, {})
+new IonicComponent(Tab, {});

ionic/components/tabs/tabs.js

@@ -1,9 +1,15 @@
-import {NgElement, Component, View, For, PropertySetter, Query} from 'angular2/angular2';
-import {QueryList} from 'angular2/src/core/compiler/query_list';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {NgFor} from 'angular2/angular2';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {Injector} from 'angular2/di';
+
+import {NavBase} from 'ionic/components/nav/nav-base';
 import {IonicComponent} from 'ionic/config/component';
-import {Toolbar} from 'ionic/components/toolbar/toolbar';
 import {Tab} from 'ionic/components/tabs/tab';
 
+
 @Component({
   selector: 'ion-tabs',
   properties: {
@@ -12,53 +18,32 @@ import {Tab} from 'ionic/components/tabs/tab';
   }
 })
 @View({
-  //[attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId"
   template: `
-      <!-- TODO: Once the reprojected toolbar preserves the context of the Tabs, then
-           remove this for loop and use the one in the ion-toolbar below. -->
-      <button *for="#t of tabs"
-        role="tab"
-        class="button button-primary"
-        [attr.id]="'tab-item-' + t.tabId"
-        [attr.aria-controls]="'tab-content-' + t.tabId"
-        [attr.aria-selected]="t.isSelected"
-        [style.color]="t.isSelected ? 'red' : ''"
-        (^click)="onClickTabItem($event, t)">
-          <icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
-          <span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
-      </button>
-
-    <!-- TODO: set the ion-toolbar being on top or bottom depending upon configuration. -->
-    <header *ion-toolbar class="tab-bar">
-      The tabbar buttons should be in this bar.
-      <button *for="#t of tabs"
-        role="tab"
-        class="tab-bar-item"
-        [attr.id]="'tab-item-' + t.tabId"
-        [attr.aria-controls]="'tab-content-' + t.tabId"
-        [attr.aria-selected]="t.isSelected"
-        (^click)="onClickTabItem($event, t)">
-          <icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
-          <span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
-      </button>
-    </header>
-
-    <section class="tab-pane-container">
+    <nav class="toolbar-container tab-bar-container">
+      <div class="tab-bar">
+        <button *ng-for="#t of tabs"
+          role="tab"
+          class="tab-bar-item"
+          [attr.id]="'tab-item-' + t.tabId"
+          [attr.aria-controls]="'tab-content-' + t.tabId"
+          [attr.aria-selected]="t.isSelected"
+          [style.color]="t.isSelected ? 'red' : ''"
+          (^click)="onClickTabItem($event, t)">
+            <icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
+            <span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
+        </button>
+      </div>
+    </nav>
+    <section class="tab-item-container">
       <content></content>
     </section>
   `,
-  directives: [For, Toolbar]
+  directives: [NgFor]
 })
-export class Tabs {
-  constructor(
-    @NgElement() ngElement: NgElement
-    /*
-     TODO once QueryList#onChange is fixed, switch to a queryList of tabs, for the
-     sake of simplicity
-     @Query(Tab) tabs:QueryList
-    */
-  ) {
-    this.domElement = ngElement.domElement;
+export class Tabs extends NavBase {
+  constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
+    super(loader, injector);
+    this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
 
     this.tabs = [];
@@ -71,23 +56,24 @@ export class Tabs {
     }
   }
 
-  onClickTabItem(ev, tab) {
-    ev.preventDefault()
-    if (this.selectedTab !== tab) {
-      this.select(tab);
-    } else if (tab.nav._stack.length >= 2) {
-      tab.nav.popTo(0);
-    }
-  }
-
   select(tab) {
     this.tabs.forEach(otherTab => {
       otherTab.setSelected(false);
-    })
+    });
+
     tab.setSelected(true);
     this.selectedTab = tab;
   }
 
+  onClickTabItem(ev, tab) {
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    if (this.selectedTab !== tab) {
+      this.select(tab);
+    }
+  }
+
 }
 
 new IonicComponent(Tabs, {
@@ -107,4 +93,4 @@ new IonicComponent(Tabs, {
       }
     }
   }
-})
+});

ionic/components/tabs/tabs.scss

@@ -9,18 +9,18 @@ $tab-bar-item-min-width:           80px !default;
 $tab-bar-item-max-width:           160px !default;
 
 
-.tabs {
+ion-tabs {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
 
-[tab-bar-placement="top"] > .tab-bar-container {
-  order: $flex-order-tab-bar-top;
+.tab-bar-container {
+  order: $flex-order-tab-bar-bottom;
 }
 
-[tab-bar-placement="bottom"] > .tab-bar-container {
-  order: $flex-order-tab-bar-bottom;
+[tab-bar-placement="top"] > .tab-bar-container {
+  order: $flex-order-tab-bar-top;
 }
 
 .tab-bar {

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

@@ -15,25 +15,9 @@ import * as util from 'ionic/util'
 class IonicApp {
   constructor() {
     console.log('IonicApp Start');
-
-    console.log(Engine.getName(), Engine.is('cordova'));
-
-    Engine.ready().then(() => {
-      console.log('Engine ready')
-    });
-
-    Engine.fullScreen(true).then((isShown) => {
-      console.log('Engine fullScreen', isShown)
-    });
-
-    Engine.showStatusBar(true).then((isShown) => {
-      console.log('Engine showStatusBar', isShown)
-    });
-
   }
 }
 
-
 export function main() {
   bootstrap(IonicApp);
 }

ionic/components/tabs/test/basic/main.html

@@ -2,19 +2,19 @@
 <ion-tabs>
 
   <ion-tab tab-title="Tab 1" tab-icon="ion-home">
-    <ion-view nav-title="Tab 1">
-      <ion-content class="padding">
-        Tab 1 Content
-      </ion-content>
-    </ion-view>
+
+    <ion-content class="padding">
+      Tab 1 Content
+    </ion-content>
+
   </ion-tab>
 
   <ion-tab tab-title="Tab 2" tab-icon="ion-star">
-    <ion-view nav-title="Tab 2">
-      <ion-content class="padding">
-        Tab 2 Content
-      </ion-content>
-    </ion-view>
+
+    <ion-content class="padding">
+      Tab 2 Content
+    </ion-content>
+
   </ion-tab>
 
 </ion-tabs>