the boy with the back button tattoo

ionic/components/app/normalize.scss

@@ -31,7 +31,7 @@ audio:not([controls]) {
 
 // Address `[hidden]` styling not present in IE 8/9/10.
 // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
-[hidden],
+[hidden][hidden],
 template {
   display: none;
 }

ionic/components/nav/nav-base.js

@@ -104,7 +104,7 @@ export class NavBase {
     ClickBlock(opts.animation !== 'none', 520);
 
     // wait for the new item to complete setup
-    enteringItem.setup().then(() => {
+    enteringItem.stage().then(() => {
 
       // set that the leaving item is stage to be leaving
       leavingItem.state = STAGED_LEAVING_STATE;
@@ -222,20 +222,4 @@ export class NavBase {
     util.array.remove(this.items, itemOrIndex);
   }
 
-  getToolbars(pos: String) {
-    let last = this.last();
-    return last && last.navItem && last.navItem._toolbars[pos] || [];
-  }
-
-  get hideHeader() {
-    return !this.getToolbars('top').length;
-  }
-
-  get hideFooter() {
-    return !this.getToolbars('bottom').length;
-  }
-
-  canSwipeBack() {
-    return !!this.getPrevious(this.getActive());
-  }
 }

ionic/components/nav/nav-item.js

@@ -16,9 +16,15 @@ export class NavItem {
     this.toolbarViews = [];
     this._titleEle = undefined;
     this.disposals = [];
+
+    // if it's possible to go back from this nav item
+    this.enableBack = false;
   }
 
-  setup() {
+  stage() {
+    // update if it's possible to go back from this nav item
+    this.enableBack = !!this.nav.getPrevious(this);
+
     if (!this.created) {
       return this.create();
     }

ionic/components/toolbar/back-button.js

@@ -1,26 +1,40 @@
-import {NgElement, Component, View} from 'angular2/angular2'
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
-import {IonicComponent} from 'ionic/config/component'
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+
+import {IonicComponent} from 'ionic/config/component';
+import {NavItem} from '../nav/nav-item';
+
 
 @Component({
-  selector: '.back-button',
+  selector: 'back-button',
+  hostListeners: {
+    '^click': 'onClick($event)'
+  },
 })
 @View({
   template: `
-    <icon [class-name]="'back-button-icon ' + icon"></icon>
+    <icon class="back-button-icon ion-ios-arrow-back"></icon>
     <span class="back-button-text">
-      <span class="back-default">{{ text }}</span>
+      <span class="back-default">Back</span>
       <span class="back-title"></span>
     </span>`
 })
 export class BackButton {
-  constructor(
+  constructor(navItem: NavItem, @ElementRef() element:ElementRef) {
-    @NgElement() ngEle:NgElement
+    this.navItem = navItem;
-  ) {
+    this.domElement = element.domElement;
-    this.domElement = ngEle.domElement
 
     setTimeout(() => {
-      this.config = BackButton.config.invoke(this)
+      // HACK!
-    })
+      this.config = BackButton.config.invoke(this);
+    });
+  }
+
+  onClick(ev) {
+    this.navItem.nav.pop();
+    ev.stopPropagation();
+    ev.preventDefault();
   }
 }
 
@@ -41,4 +55,4 @@ new IonicComponent(BackButton, {
       }
     }
   }
-})
+});

ionic/components/toolbar/extensions/ios.scss

@@ -3,10 +3,10 @@
 // --------------------------------------------------
 
 $toolbar-order-ios: (
-  back-button: 1,
+  back-button: 10,
-  primary: 2,
+  primary: 20,
-  title: 3,
+  title: 30,
-  secondary: 4
+  secondary: 40
 );
 
 $toolbar-ios-height:                        4.4rem !default;
@@ -44,11 +44,14 @@ $toolbar-ios-button-background-color:       transparent !default;
     order: map-get($toolbar-order-ios, 'secondary');
   }
 
+  .toolbar-title {
+    text-align: center;
+  }
+
   ion-title {
     order: map-get($toolbar-order-ios, 'title');
     font-size: $toolbar-ios-title-font-size;
     font-weight: 500;
-    text-align: center;
   }
 
   .toolbar-back-button {
@@ -67,3 +70,7 @@ $toolbar-ios-button-background-color:       transparent !default;
   }
 
 }
+
+.back-button-ios .back-button-icon {
+  padding-right: 6px;
+}

ionic/components/toolbar/toolbar.js

@@ -7,6 +7,7 @@ import * as dom from 'ionic/util/dom';
 import {IonicComponent} from 'ionic/config/component';
 import {NavItem} from 'ionic/ionic';
 import {Platform} from 'ionic/platform/platform';
+import {BackButton} from './back-button';
 
 
 @Component({
@@ -15,23 +16,26 @@ import {Platform} from 'ionic/platform/platform';
 @View({
   template: `
     <div class="toolbar-inner">
-      <button class="button back-button toolbar-item" style="display:none"></button>
+      <back-button class="button toolbar-item" [hidden]="!navItem.enableBack"></back-button>
       <div class="toolbar-title">
         <div class="toolbar-inner-title toolbar-title-hide">
           <content select="ion-title"></content>
         </div>
       </div>
-      <div class="toolbar-item toolbar-primary-item">
+      <!--<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>-->
     </div>
-  `
+  `,
+  directives: [BackButton]
 })
 export class Toolbar {
-  constructor(elementRef: ElementRef) {
+  constructor(navItem: NavItem, elementRef: ElementRef) {
+
+    this.navItem = navItem;
     this.domElement = elementRef.domElement;
     this.config = Toolbar.config.invoke(this);
 

ionic/components/toolbar/toolbar.scss

@@ -3,16 +3,12 @@
 // --------------------------------------------------
 
 $toolbar-background: #f7f7f8 !default;
-$toolbar-order-core: (
+$toolbar-order: (
-  back-button: 1,
+  back-button: 10,
-  title: 2,
+  title: 20,
-  primary: 3,
+  primary: 30,
-  secondary: 4
+  secondary: 40
 );
-$toolbar-primary-flex-order: 1;
-$toolbar-primary-flex-order: 1;
-$toolbar-title-flex-order: 5;
-$toolbar-secondary-flex-order: 10;
 
 
 .toolbar-container {
@@ -34,17 +30,31 @@ ion-toolbar {
 }
 
 .toolbar-inner {
+  display: flex;
   width: 100%;
 }
 
+ion-toolbar back-button.toolbar-item {
+  order: map-get($toolbar-order, 'back-button');
+}
+
+.toolbar-title {
+  flex: 1;
+  order: map-get($toolbar-order, 'title');
+
+  display: flex;
+  align-items: center;
+  margin: 0 0 2px;
+}
+
 // buttons are primary by default
 ion-toolbar .button,
 ion-toolbar [side="primary"] {
-  order: map-get($toolbar-order-core, 'primary');
+  order: map-get($toolbar-order, 'primary');
 }
 
 ion-toolbar [side="secondary"] {
-  order: map-get($toolbar-order-core, 'secondary');
+  order: map-get($toolbar-order, 'secondary');
 }
 
 ion-title {
@@ -63,10 +73,6 @@ ion-title {
   text-overflow: ellipsis;
 }
 
-.toolbar-back-button {
-  order: map-get($toolbar-order-core, 'back-button');
-}
-
 .toolbar .button {
   background: transparent;
   border: none;