From b364017ff24f722a822022b270787d86e9a55bd3 Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sat, 31 Oct 2015 14:01:23 -0500 Subject: [PATCH] fix(zIndex): ion-page dynamic zIndex --- ionic/components/action-sheet/action-sheet.ts | 3 +++ ionic/components/app/structure.scss | 1 + ionic/components/nav/nav-controller.ts | 16 ++++++++++++++ .../nav/test/nav-controller.spec.ts | 22 +++++++++++++++++++ .../components/overlay/overlay-controller.ts | 7 +++--- ionic/components/popup/popup.ts | 3 +++ ionic/config/decorators.ts | 1 + ionic/transitions/md-transition.ts | 15 +++++++------ scripts/e2e/e2e.template.html | 1 - scripts/snapshot/snapshot.config.js | 2 +- 10 files changed, 58 insertions(+), 13 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index 187b713f95..6335d7a66f 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -76,6 +76,9 @@ import * as util from 'ionic/util'; '' + '' + '', + host: { + '[style.zIndex]': '_zIndex' + }, directives: [NgFor, NgIf, Icon] }) class ActionSheetCmp { diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss index acc778ab8c..fbced262d1 100644 --- a/ionic/components/app/structure.scss +++ b/ionic/components/app/structure.scss @@ -88,6 +88,7 @@ ion-tabs { left: 0; width: 100%; height: 100%; + overflow: hidden; } ion-navbar-section { diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index c8a1b27249..774dc8ed65 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -459,6 +459,8 @@ export class NavController extends Ion { return callback(); } + this._setZIndex(enteringView.instance, leavingView.instance, opts.direction); + this._zone.runOutsideAngular(() => { enteringView.shouldDestroy = false; @@ -560,6 +562,20 @@ export class NavController extends Ion { }); } + _setZIndex(enteringInstance, leavingInstance, direction) { + if (!leavingInstance) { + enteringInstance._zIndex = 0; + + } else if (direction === 'back') { + // moving back + enteringInstance._zIndex = leavingInstance._zIndex - 1; + + } else { + // moving forward + enteringInstance._zIndex = leavingInstance._zIndex + 1; + } + } + /** * @private * TODO diff --git a/ionic/components/nav/test/nav-controller.spec.ts b/ionic/components/nav/test/nav-controller.spec.ts index 28336ded55..16c5c807ce 100644 --- a/ionic/components/nav/test/nav-controller.spec.ts +++ b/ionic/components/nav/test/nav-controller.spec.ts @@ -250,5 +250,27 @@ export function run() { }); }); + describe("_setZIndex", () => { + it('should set zIndex 0 on first entering view', () => { + let enteringInstance = {}; + nav._setZIndex(enteringInstance, null, 'forward'); + expect(enteringInstance._zIndex).toEqual(0); + }); + + it('should set zIndex 1 on second entering view', () => { + let leavingInstance = { _zIndex: 0 }; + let enteringInstance = {}; + nav._setZIndex(enteringInstance, leavingInstance, 'forward'); + expect(enteringInstance._zIndex).toEqual(1); + }); + + it('should set zIndex 0 on entering view going back', () => { + let leavingInstance = { _zIndex: 1 }; + let enteringInstance = {}; + nav._setZIndex(enteringInstance, leavingInstance, 'back'); + expect(enteringInstance._zIndex).toEqual(0); + }); + }); + }); } diff --git a/ionic/components/overlay/overlay-controller.ts b/ionic/components/overlay/overlay-controller.ts index a7424483fd..1fbf4e68c6 100644 --- a/ionic/components/overlay/overlay-controller.ts +++ b/ionic/components/overlay/overlay-controller.ts @@ -33,13 +33,12 @@ export class OverlayController { return reject(); } - ref._z = ROOT_Z_INDEX; + instance._zIndex = ROOT_Z_INDEX; for (let i = 0; i < this.refs.length; i++) { - if (this.refs[i]._z >= ref._z) { - ref._z = this.refs[i]._z + 1; + if (this.refs[i].instance._zIndex >= ref.instance._zIndex) { + ref.instance._zIndex = this.refs[i].instance._zIndex + 1; } } - this.renderer.setElementStyle(ref.location, 'zIndex', ref._z); this.renderer.setElementAttribute(ref.location, 'role', 'dialog'); util.extend(instance, opts); diff --git a/ionic/components/popup/popup.ts b/ionic/components/popup/popup.ts index 091a875fcb..f5d152ba7a 100644 --- a/ionic/components/popup/popup.ts +++ b/ionic/components/popup/popup.ts @@ -283,6 +283,9 @@ const OVERLAY_TYPE = 'popup'; '' + '' + '', + host: { + '[style.zIndex]': '_zIndex' + }, directives: [FORM_DIRECTIVES, NgClass, NgIf, NgFor, Button] }) diff --git a/ionic/config/decorators.ts b/ionic/config/decorators.ts index 4299fc3290..dc991505ad 100644 --- a/ionic/config/decorators.ts +++ b/ionic/config/decorators.ts @@ -70,6 +70,7 @@ export function Page(config={}) { config.host = config.host || {}; config.host['[hidden]'] = '_hidden'; config.host['[class.tab-subpage]'] = '_tabSubPage'; + config.host['[style.zIndex]'] = '_zIndex'; var annotations = Reflect.getMetadata('annotations', cls) || []; annotations.push(new Component(config)); Reflect.defineMetadata('annotations', annotations, cls); diff --git a/ionic/transitions/md-transition.ts b/ionic/transitions/md-transition.ts index 8bef0c5a4d..b274f62749 100644 --- a/ionic/transitions/md-transition.ts +++ b/ionic/transitions/md-transition.ts @@ -39,13 +39,14 @@ class MDTransition extends Animation { .fadeIn(); } - let enteringBackButton = new Animation(enteringView.backBtnRef()); - this.add(enteringBackButton); - if (enteringHasNavbar && enteringView.enableBack()) { - enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS); - - } else { - enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS); + if (enteringHasNavbar) { + let enteringBackButton = new Animation(enteringView.backBtnRef()); + this.add(enteringBackButton); + if (enteringView.enableBack()) { + enteringBackButton.before.addClass(SHOW_BACK_BTN_CSS); + } else { + enteringBackButton.before.removeClass(SHOW_BACK_BTN_CSS); + } } // setup leaving view diff --git a/scripts/e2e/e2e.template.html b/scripts/e2e/e2e.template.html index 5d92e2d6b8..20d03ade09 100644 --- a/scripts/e2e/e2e.template.html +++ b/scripts/e2e/e2e.template.html @@ -30,7 +30,6 @@ -webkit-transition-duration: 0ms !important; transition-duration: 0ms !important; } - .snapshot ion-loading-icon, .snapshot md-ripple { display: none !important; } diff --git a/scripts/snapshot/snapshot.config.js b/scripts/snapshot/snapshot.config.js index f361236d85..be9207c0b9 100644 --- a/scripts/snapshot/snapshot.config.js +++ b/scripts/snapshot/snapshot.config.js @@ -11,7 +11,7 @@ exports.config = { specs: 'dist/e2e/**/*e2e.js', //specs: 'dist/e2e/search-bar/**/*e2e.js', - sleepBetweenSpecs: 250, + sleepBetweenSpecs: 300, platformDefauls: { browser: 'chrome',