diff --git a/ionic/components/app/normalize.scss b/ionic/components/app/normalize.scss
index 4445560738..481678a033 100644
--- a/ionic/components/app/normalize.scss
+++ b/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;
}
diff --git a/ionic/components/nav/nav-base.js b/ionic/components/nav/nav-base.js
index 3051eb16e4..41672dc6a3 100644
--- a/ionic/components/nav/nav-base.js
+++ b/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());
- }
}
diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js
index d02e5b8592..5b985d1e1b 100644
--- a/ionic/components/nav/nav-item.js
+++ b/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();
}
diff --git a/ionic/components/toolbar/back-button.js b/ionic/components/toolbar/back-button.js
index 8efc005bdd..ab19a42f9d 100644
--- a/ionic/components/toolbar/back-button.js
+++ b/ionic/components/toolbar/back-button.js
@@ -1,26 +1,40 @@
-import {NgElement, Component, View} from 'angular2/angular2'
-import {IonicComponent} from 'ionic/config/component'
+import {Component} 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 {IonicComponent} from 'ionic/config/component';
+import {NavItem} from '../nav/nav-item';
+
@Component({
- selector: '.back-button',
+ selector: 'back-button',
+ hostListeners: {
+ '^click': 'onClick($event)'
+ },
})
@View({
template: `
-
+
- {{ text }}
+ Back
`
})
export class BackButton {
- constructor(
- @NgElement() ngEle:NgElement
- ) {
- this.domElement = ngEle.domElement
+ constructor(navItem: NavItem, @ElementRef() element:ElementRef) {
+ this.navItem = navItem;
+ this.domElement = element.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, {
}
}
}
-})
+});
diff --git a/ionic/components/toolbar/extensions/ios.scss b/ionic/components/toolbar/extensions/ios.scss
index a7b220d3df..2d199a3d45 100644
--- a/ionic/components/toolbar/extensions/ios.scss
+++ b/ionic/components/toolbar/extensions/ios.scss
@@ -3,10 +3,10 @@
// --------------------------------------------------
$toolbar-order-ios: (
- back-button: 1,
- primary: 2,
- title: 3,
- secondary: 4
+ back-button: 10,
+ primary: 20,
+ title: 30,
+ 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;
+}
diff --git a/ionic/components/toolbar/toolbar.js b/ionic/components/toolbar/toolbar.js
index 0102da822d..a08ef29f0f 100644
--- a/ionic/components/toolbar/toolbar.js
+++ b/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: `