get the elementos

ionic/components/app/structure.scss

@@ -13,89 +13,87 @@ ion-app {
   max-height: 100%;
   margin: 0;
   padding: 0;
-
-  ion-nav {
-    // container of header.toolbar-container, footer.toolbar-container and .nav-item-container
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    @include flex-display();
-    @include flex-direction(column);
-  }
-
-  .toolbar-container {
-    // container of many toolbars for each view in the ion-nav
-    position: relative;
-    width: 100%;
-    min-height: 50px;
-    @include flex-order($flex-order-toolbar-top);
-  }
-
-  footer.toolbar-container {
-    @include flex-order($flex-order-toolbar-bottom);
-  }
-
-  ion-toolbar {
-    // one view's toolbar, sibling to many view toolbars inside of .toolbar-container
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-
-  .nav-item-container {
-    // container of many .nav-item's, each one containing one view
-    position: relative;
-    @include flex(1);
-    @include flex-order($flex-order-view-content);
-  }
-
-  .tab-pane-container {
-    // container of each content for each tab component within a tabs component
-    @include flex(1);
-    position: relative;
-    width: 100%;
-    @include flex-order($flex-order-view-content);
-  }
-
-  .nav-item {
-    // user created view, sibling to many .nav-item's, contained by .nav-item-container
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    // by default .nav-item is hidden
-    // and the transition animation will display it
-    display: none;
-  }
-
-  ion-content {
-    // content within the user created view, contained by .nav-item
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  .scroll-content {
-    // extra div to allow overflow scrolling
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-  }
-
+}
+
+ion-nav {
+  // container of header.toolbar-container, footer.toolbar-container and .nav-item-container
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  @include flex-display();
+  @include flex-direction(column);
+}
+
+.toolbar-container {
+  // container of many toolbars for each view in the ion-nav
+  position: relative;
+  width: 100%;
+  min-height: 50px;
+  @include flex-order($flex-order-toolbar-top);
+}
+
+footer.toolbar-container {
+  @include flex-order($flex-order-toolbar-bottom);
+}
+
+ion-toolbar {
+  // one view's toolbar, sibling to many view toolbars inside of .toolbar-container
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.nav-item-container {
+  // container of many .nav-item's, each one containing one view
+  position: relative;
+  @include flex(1);
+  @include flex-order($flex-order-view-content);
+}
+
+.tab-pane-container {
+  // container of each content for each tab component within a tabs component
+  @include flex(1);
+  position: relative;
+  width: 100%;
+  @include flex-order($flex-order-view-content);
+}
+
+.nav-item {
+  // user created view, sibling to many .nav-item's, contained by .nav-item-container
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  // by default .nav-item is hidden
+  // and the transition animation will display it
+  display: none;
+}
+
+ion-content {
+  // content within the user created view, contained by .nav-item
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.scroll-content {
+  // extra div to allow overflow scrolling
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
 }

ionic/components/content/content.scss

@@ -5,6 +5,7 @@
 $content-background-color:         #fff !default;
 
 
+.toolbar-container,
 .nav-item-container {
   background-color: $content-background-color;
 }

ionic/components/nav/nav-base.js

@@ -64,6 +64,7 @@ export class NavBase {
   }
 
   pop(opts = {}) {
+    // reject if there's nothing to pop to
     if (this.items.length < 2) {
       return Promise.reject();
     }

ionic/components/nav/nav-item.js

@@ -12,7 +12,8 @@ export class NavItem {
     this.Class = ComponentClass;
     this.params = params;
     this.id = util.nextUid();
-    this.headers = [];
+    this.headerProtos = [];
+    this.toolbarViews = [];
     this.disposals = [];
   }
 
@@ -39,9 +40,10 @@ export class NavItem {
 
       // content
       this.component = componentRef;
-      this.domElement = componentRef.location.domElement;
-      this.domElement.classList.add('nav-item');
-      this.domElement.setAttribute('data-nav-item-id', this.id);
+
+      this.contentEle = componentRef.location.domElement;
+      this.contentEle.classList.add('nav-item');
+      this.contentEle.setAttribute('id', 'nav-item-' + this.id);
 
       if (componentRef && componentRef._dispose) {
         this.disposals.push(componentRef._dispose);
@@ -56,8 +58,8 @@ export class NavItem {
         }
       };
 
-      for (let i = 0; i < this.headers.length; i++) {
-        this.createHeader(this.headers[i], context, injector);
+      for (let i = 0; i < this.headerProtos.length; i++) {
+        this.createHeader(this.headerProtos[i], context, injector);
       }
 
       resolve();
@@ -73,19 +75,32 @@ export class NavItem {
 
     let atIndex = -1;
 
-    let headerViewRef = headerContainer.create(toolbarProtoView, atIndex, context, injector);
+    let headerView = headerContainer.create(toolbarProtoView, atIndex, context, injector);
+
+    if (headerView) {
+      this.toolbarViews.push(headerView);
 
-    if (headerViewRef) {
       this.disposals.push(() => {
-        var index = headerContainer.indexOf(headerViewRef);
-        headerContainer.remove(index);
-        headerViewRef = null;
+        headerContainer.remove( headerContainer.indexOf(headerView) );
       });
     }
   }
 
   addHeader(toolbarProtoView) {
-    this.headers.push(toolbarProtoView);
+    this.headerProtos.push(toolbarProtoView);
+  }
+
+  getContent() {
+    return this.contentEle;
+  }
+
+  getToolbars() {
+    let elements = [];
+    for (let i = 0; i < this.toolbarViews.length; i++) {
+      var toolbarView = this.toolbarViews[i];
+      elements.push(toolbarView._view.render._view.rootNodes[0]);
+    }
+    return elements;
   }
 
   destroy() {

ionic/components/nav/nav.js

@@ -7,8 +7,6 @@ import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
 import {Injector} from 'angular2/di';
 
 import {NavBase} from 'ionic/components/nav/nav-base';
-import {NavItem, NavItemDynamicComponent} from 'ionic/components/nav/nav-item';
-import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
 
 
 @Component({
@@ -29,14 +27,9 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
   directives: [HeaderAnchor, ContentAnchor]
 })
 export class Nav extends NavBase {
-
-  constructor(
-    loader: DynamicComponentLoader,
-    injector: Injector
-  ) {
+  constructor(loader: DynamicComponentLoader, injector: Injector) {
     super(loader, injector);
   }
-
 }
 
 

ionic/components/nav/test/basic/pages/first-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Header, Toolbar, ToolbarTitle} from 'ionic/ionic';
+import {NavController, Header, Toolbar} from 'ionic/ionic';
 import {SecondPage} from './second-page';
 
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/first-page.html',
-  directives: [Header, ToolbarTitle, Toolbar]
+  directives: [Header, Toolbar]
 })
 export class FirstPage {
   constructor(

ionic/components/nav/test/basic/pages/second-page.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, NavParams, Header, ToolbarTitle, Toolbar} from 'ionic/ionic';
+import {NavController, NavParams, Header, Toolbar} from 'ionic/ionic';
 import {ThirdPage} from './third-page';
 
 
 @Component()
 @View({
   templateUrl: 'pages/second-page.html',
-  directives: [Header, ToolbarTitle, Toolbar]
+  directives: [Header, Toolbar]
 })
 export class SecondPage {
   constructor(

ionic/components/nav/test/basic/pages/third-page.js

@@ -1,13 +1,13 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {NavController, Header, ToolbarTitle, Toolbar} from 'ionic/ionic';
+import {NavController, Header, Toolbar} from 'ionic/ionic';
 
 
 @Component()
 @View({
   templateUrl: 'pages/third-page.html',
-  directives: [Header, ToolbarTitle, Toolbar]
+  directives: [Header, Toolbar]
 })
 export class ThirdPage {
   constructor(

ionic/components/toolbar/toolbar.js

@@ -10,14 +10,34 @@ import {Platform} from 'ionic/platform/platform';
 
 
 @Component({
-  selector: 'ion-toolbar'
+  selector: 'ion-toolbar',
+  hostProperties: {
+    toolbarId: 'className'
+  }
 })
 @View({
-  template: `<content></content>`
+  template: `
+    <div class="toolbar-inner">
+      <button class="button back-button toolbar-item" style="display:none"></button>
+      <div class="toolbar-title">
+        <div class="toolbar-inner-title">
+          <content select="ion-title"></content>
+        </div>
+      </div>
+      <div class="toolbar-item toolbar-primary-item">
+        <content select=".primary"></content>
+      </div>
+      <div class="toolbar-item toolbar-secondary-item">
+        <content select=".secondary"></content>
+      </div>
+    </div>
+  `,
+  directives: [ToolbarTitle]
 })
 export class Toolbar {
-  constructor() {
-    console.log('ion-toolbar');
+  constructor(navItem: NavItem, elementRef: ElementRef) {
+    this.toolbarId = 'toolbar-id-' + navItem.id;
+    console.log('Toolbar constructor', this.toolbarId)
   }
 }
 

ionic/components/toolbar/toolbar.scss

@@ -1,55 +1,51 @@
 
-/// HACK
-header {
-  background: white;
-}
-
-
 // Toolbar
 // --------------------------------------------------
 
 $toolbar-background: #f7f7f8 !default;
 $toolbar-order-core: (
-    back-button: 1,
-    title: 2,
-    primary: 3,
-    secondary: 4
+  back-button: 1,
+  title: 2,
+  primary: 3,
+  secondary: 4
 );
 $toolbar-primary-flex-order: 1;
 $toolbar-primary-flex-order: 1;
 $toolbar-title-flex-order: 5;
 $toolbar-secondary-flex-order: 10;
 
-.toolbar {
-  @include flex-display();
+
+ion-toolbar {
+  /*@include flex-display();
   @include flex-direction(row);
   @include flex-align-items(center);
-  @include flex-justify-content(space-between);
+  @include flex-justify-content(space-between);*/
   background: $toolbar-background;
-}
 
-.toolbar[placement="top"] {
-  @include flex-order($flex-order-toolbar-top);
-}
-.toolbar[placement="bottom"] {
-  @include flex-order($flex-order-toolbar-bottom);
+  // by default ion-toolbar is hidden
+  // and the transition animation will display it
+  display: none;
 }
 
 // buttons are primary by default
-.toolbar .button,
-.toolbar [side="primary"] {
+ion-toolbar .button,
+ion-toolbar [side="primary"] {
   @include flex-order(map-get($toolbar-order-core, 'primary'));
 }
 
-.toolbar [side="secondary"] {
+ion-toolbar [side="secondary"] {
   @include flex-order(map-get($toolbar-order-core, 'secondary'));
 }
 
-.toolbar-title {
+.toolbar-title.toolbar-title {
+  // double selector to override the following
   @include flex-display();
   @include flex(1);
   @include flex-order(map-get($toolbar-order-core, 'title'));
+  margin: 0;
+  padding: 0;
 }
+
 .toolbar-inner-title {
   width: 100%;
   padding: 0 15px;
@@ -57,10 +53,6 @@ $toolbar-secondary-flex-order: 10;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-// Override ion-app h1 margin-top
-h1.toolbar-title {
-  margin: 0;
-}
 
 .toolbar-back-button {
   @include flex-order(map-get($toolbar-order-core, 'back-button'));

ionic/transitions/ios-transition.js

@@ -28,11 +28,11 @@ class IOSTransition extends Animation {
     this.leavingItem = navCtrl.getStagedLeavingItem();
 
     // create animation for the entering item
-    let enteringItemAnimation = new Animation(this.enteringItem.domElement);
+    let enteringItemAnimation = new Animation(this.enteringItem.getContent());
 
     // create animation for the leaving item
     // leavingItem could be null, but the animation instance knows to do nothing
-    let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.domElement);
+    let leavingItemAnimation = new Animation(this.leavingItem && this.leavingItem.getContent());
 
     // entering item moves to center
     // before starting, set enteringItem to display: block

ionic/transitions/none-transition.js

@@ -3,19 +3,34 @@ import {Transition} from './transition'
 
 class NoneTransition {
 
-  constructor(navCtrl, opts) {
-
+  constructor(navCtrl) {
     // get the entering and leaving items
     let enteringItem = navCtrl.getStagedEnteringItem();
     let leavingItem = navCtrl.getStagedLeavingItem();
 
-    // show the entering item
-    enteringItem.domElement.style.display = 'block';
-    enteringItem.domElement.style.transform = 'translateX(0%)';
+    // show entering contet
+    let enteringContent = enteringItem.getContent();
+    enteringContent.style.display = 'block';
+    enteringContent.style.transform = 'translateX(0%)';
+
+    // show entering headers
+    let toolbarElements = enteringItem.getToolbars();
+    for (let i = 0; i < toolbarElements.length; i++) {
+      toolbarElements[i].style.display = 'block';
+      toolbarElements[i].style.transform = 'translateX(0%)';
+    }
 
     // hide the leaving item
-    if (leavingItem && leavingItem.domElement) {
-      leavingItem.domElement.style.display = '';
+    if (leavingItem) {
+      let leavingContent = leavingItem.getContent();
+      if (leavingContent) {
+        leavingContent.style.display = '';
+      }
+
+      let leavingHeaderElements = leavingItem.getToolbars();
+      for (let i = 0; i < leavingHeaderElements.length; i++) {
+        leavingHeaderElements[i].style.display = '';
+      }
     }
   }