update to angular 2.0.0-alpha.21, update toolbar system

2026-03-13 10:22:08 +08:00 · 2015-04-30 10:54:46 -06:00
parent 2715e50988
commit 8a42dde132
24 changed files with 651 additions and 344 deletions
--- a/ionic/components/tabs/tab.js
+++ b/ionic/components/tabs/tab.js
@@ -3,14 +3,24 @@ import {
  NgElement,
  View as NgView,
  Ancestor,
-  PropertySetter,
-  For
+  For,
+  If,
 } from 'angular2/angular2';
-import {NavControllerBase} from 'ionic/components/nav/nav-controller';
+import {bind} from 'angular2/di';
+
+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',
@@ -19,34 +29,50 @@ import {IonicComponent} from 'ionic/config/component';
    icon: 'tab-icon',
    initial: 'initial'
  },
+  injectables: [
+    // Child components will inject `NavInjectable` but it will get the tabs one.
+    bind(NavInjectable).toClass(TabNavInjectable)
+  ]
 })
@NgView({
  template: `
-    <header class="toolbar-container">
-      <ion-toolbar class="view-toolbar">
-        <ion-nav-title>
-          Test Nonfunctional Toolbar
-        </ion-nav-title>
-      </ion-toolbar>
-    </header>
-    <div class="nav-item-container">
-      <!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
-      <!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
-      <ion-nav-item class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
+  <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._ngNavItems"
+         [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: [For, NavItem]
+  directives: [NavItem, For, If, ToolbarContainer]
 })
-export class Tab extends NavControllerBase {
+export class Tab {
  constructor(
    element: NgElement,
-    @Ancestor() tabs: Tabs,
-    @PropertySetter('class.hide') setHidden: Function,
-    @PropertySetter('attr.role') setRole: Function,
-    @PropertySetter('attr.id') setId: Function,
-    @PropertySetter('attr.aria-labelledby') setLabelby: Function
+    navInjectable: NavInjectable,
+    @Ancestor() tabs: Tabs
+    // @PropertySetter('class.hide') setHidden: Function,
+    // @PropertySetter('attr.role') setRole: Function,
+    // @PropertySetter('attr.id') setId: Function,
+    // @PropertySetter('attr.aria-labelledby') setLabelby: Function
  ) {
-    super(element);
+    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);
+
    this.config = Tab.config.invoke(this);
    this.setHidden = setHidden

@@ -59,6 +85,10 @@ export class Tab extends NavControllerBase {
    tabs.addTab(this)
  }

+  set initial(value) {
+    this.nav.initial = value;
+  }
+
  setSelected(isSelected) {
    this.isSelected = !!isSelected
    this.setHidden(!this.isSelected)
--- a/ionic/components/tabs/tabs.js
+++ b/ionic/components/tabs/tabs.js
@@ -1,5 +1,8 @@
-import {NgElement, Component, View as NgView, For, PropertySetter} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
+import {NgElement, Component, View as NgView, For, PropertySetter, Query} from 'angular2/angular2';
+import {QueryList} from 'angular2/src/core/compiler/query_list';
+import {IonicComponent} from 'ionic/config/component';
+import {Toolbar} from 'ionic/components/toolbar/toolbar';
+import {Tab} from 'ionic/components/tabs/tab';

@Component({
  selector: 'ion-tabs',
@@ -9,67 +12,80 @@ import {IonicComponent} from 'ionic/config/component'
  }
 })
@NgView({
+  //[attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId"
  template: `
-    <header class="toolbar-container">
-      <!-- COLLECTION OF TOOLBARS FOR EACH VIEW WITHIN EACH TAB-VIEWPORT -->
-      <!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
-    </header>
+      <!-- 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>

-    <nav class="tab-bar-container" role="tablist"
-         [attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
-      <div class="tab-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>
-      </div>
-    </nav>
+    <!-- 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">
      <content></content>
    </section>
  `,
-  directives: [For]
+  directives: [For, Toolbar]
 })
 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
+    */
  ) {
-    console.log("Tabs");
-    this.domElement = ngElement.domElement
-    this.config = Tabs.config.invoke(this)
+    this.domElement = ngElement.domElement;
+    this.config = Tabs.config.invoke(this);

-    this.tabs = []
+    this.tabs = [];
  }

  addTab(tab) {
-    this.tabs.push(tab)
+    this.tabs.push(tab);
    if (this.tabs.length == 1) {
-      this.select(tab)
+      this.select(tab);
    }
  }

  onClickTabItem(ev, tab) {
    ev.preventDefault()
    if (this.selectedTab !== tab) {
-      this.select(tab)
-    } else if (tab._stack.length >= 2) {
-      tab.popTo(0)
+      this.select(tab);
+    } else if (tab.nav._stack.length >= 2) {
+      tab.nav.popTo(0);
    }
  }

  select(tab) {
    this.tabs.forEach(otherTab => {
-      otherTab.setSelected(false)
+      otherTab.setSelected(false);
    })
-    tab.setSelected(true)
-    this.selectedTab = tab
+    tab.setSelected(true);
+    this.selectedTab = tab;
  }

 }
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -23,17 +23,11 @@ $tab-bar-item-max-width:           160px !default;
  @include flex-order($flex-order-tab-bar-bottom);
 }

-.tab-bar-container {
-  @include flex-justify-content(center);
-  position: relative;
-  background: $tab-bar-background-color;
-}
-
 .tab-bar {
  @include flex-display();
  @include flex-justify-content(center);
-  height: 100%;
  overflow: hidden;
+  background: $tab-bar-background-color;
 }

 .tab-bar-item {
--- a/ionic/components/tabs/test/advanced/pages/sign-in.html
+++ b/ionic/components/tabs/test/advanced/pages/sign-in.html
@@ -1,16 +1,27 @@
-<ion-nav-items side="primary">
-  <button class="button" (click)="instanceCheck()">
-    <icon class="ion-star"></icon>
+<header *ion-toolbar>
+
+  <button class="button button-primary" side="primary">
+    Button 1
+  </button>
+  <button class="button" side="primary">
+    Button 2
  </button>
-</ion-nav-items>

-<ion-content class="padding">
+  <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" (click)="instanceCheck()">
+    <button class="button button-primary button-outline">
      <icon class="ion-star"></icon>
    </button>
  </p>
@@ -19,6 +30,16 @@
    <input>
  </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>
+  <f></f>
+  <f></f>
+  <f></f>

 </ion-content>
--- a/ionic/components/tabs/test/advanced/pages/sign-in.js
+++ b/ionic/components/tabs/test/advanced/pages/sign-in.js
@@ -1,27 +1,32 @@
-import {Component, View as NgView, Ancestor} from 'angular2/angular2'
-import {NavPane, Content, Nav} from 'ionic/ionic'
-import {TabsPage} from 'pages/tabs'
+import {
+  Component,
+  View as NgView,
+  Ancestor,
+} from 'angular2/angular2';
+import {
+  NavItem,
+  Content,
+  NavController,
+  Toolbar,
+  ToolbarTitle,
+} from 'ionic/ionic';
+import {TabsPage} from 'pages/tabs';

-@Component({
-  selector: 'sign-in-page'
-})
+@Component()
@NgView({
  templateUrl: 'pages/sign-in.html',
-  directives: [Content]
+  directives: [Content, Toolbar, ToolbarTitle]
 })
 export class SignInPage {
  constructor(
-    nav: Nav
+    nav: NavController
  ) {
    this.nav = nav;
-    this.instanceVal = Math.random()
  }
  signIn() {
+    console.log('click');
    this.nav.push(TabsPage, {
      my: 'param'
    })
  }
-  instanceCheck() {
-    window.alert("Instance: " + this.instanceVal)
-  }
 }
--- a/ionic/components/tabs/test/advanced/pages/tabs.js
+++ b/ionic/components/tabs/test/advanced/pages/tabs.js
@@ -2,16 +2,16 @@ import {
  Component,
  View as NgView,
  Parent,
-} from 'angular2/angular2'
+} from 'angular2/angular2';
 import {
  View,
  Tabs,
  Tab,
  Aside,
  Content,
-  Nav,
-  NavItem,
-} from 'ionic/ionic'
+  NavController,
+} from 'ionic/ionic';
+import {Toolbar, ToolbarTitle} from 'ionic/components/toolbar/toolbar';

@Component({
  selector: 'tabs-page'
@@ -20,10 +20,10 @@ import {
  templateUrl: 'pages/tabs.html',
  directives: [Tabs, Tab, View, Content]
 })
+
 export class TabsPage {
  constructor(
-    navItem: NavItem,
-    nav: Nav
+    nav: NavController
  ) {
    this.tab1Initial = Tab1Page1
    this.tab2Initial = Tab2Page1
@@ -36,18 +36,22 @@ export class TabsPage {
 //
@Component({ selector: 't1p1' })
@NgView({
-  template: `<ion-content class="padding">
-                <p>Tab 1 Page 1.</p>
-                <button class="button button-primary" (click)="next()">
-                  Go to Tab 1, Page 2 (push)
-                </button>
-                <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: [View, Content]
+  template: `
+  <header *ion-toolbar>
+    <h1 class="toolbar-title">Tabs 1 Page 1</h1>
+  </header>
+  <ion-content class="padding">
+    <p>Tab 1 Page 1.</p>
+    <button class="button button-primary" (click)="next()">
+      Go to Tab 1, Page 2 (push)
+    </button>
+    <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: [Content, Toolbar, ToolbarTitle]
 })
 class Tab1Page1 {
  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
-  constructor(nav: Tab) {
+  constructor(nav: NavController) {
    this.nav = nav;
  }
  next() {
@@ -57,19 +61,22 @@ class Tab1Page1 {

@Component({ selector: 't1p2' })
@NgView({
-  template: `<ion-content class="padding">
-                <p>Tab 1 Page 2.</p>
-                <button class="button button-primary" (click)="pop()">
-                  Back to Tab 1, Page 1 (pop)
-                </button>
-                <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: [View, Content]
+  template: `
+  <header *ion-toolbar>
+    <h1 class="toolbar-title">Tabs 1 Page 2</h1>
+  </header>
+  <ion-content class="padding">
+    <p>Tab 1 Page 2.</p>
+    <button class="button button-primary" (click)="pop()">
+      Back to Tab 1, Page 1 (pop)
+    </button>
+    <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: [Content]
 })
 class Tab1Page2 {
  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
-  constructor(nav: Tab) {
+  constructor(nav: NavController) {
    this.nav = nav;
  }
  pop() { this.nav.pop(); }
@@ -98,7 +105,7 @@ class Tab1Page2 {
 })
 class Tab2Page1 {
  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
-  constructor(nav: Tab) {
+  constructor(nav: NavController) {
    this.nav = nav
  }
  next() {
@@ -131,7 +138,7 @@ class Tab2Page1 {
 })
 class Tab2Page2 {
  // TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
-  constructor(nav: Tab) {
+  constructor(nav: NavController) {
    this.nav = nav
  }
  pop() { this.nav.pop() }