From 70f8a8e5eb855d407487c8088a6924b1edc15d1a Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Wed, 16 Nov 2016 19:17:25 +0100
Subject: [PATCH] fix(nav): zIndex in overlays

---
 src/components/action-sheet/test/basic/app-module.ts |  3 ++-
 src/components/app/app-root.ts                       |  2 +-
 src/components/nav/overlay-portal.ts                 | 10 ++++++++--
 src/navigation/nav-controller-base.ts                |  1 +
 src/navigation/nav-util.ts                           | 10 ++++++++--
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/action-sheet/test/basic/app-module.ts b/src/components/action-sheet/test/basic/app-module.ts
index 6ef89081eed..afde358b16f 100644
--- a/src/components/action-sheet/test/basic/app-module.ts
+++ b/src/components/action-sheet/test/basic/app-module.ts
@@ -33,9 +33,10 @@ export class E2EPage {
           }
         },
         {
-          text: 'Play',
+          text: 'Play (open modal)',
           icon: 'arrow-dropright-circle',
           handler: () => {
+            this.result = 'Play (open modal)';
             let modal = this.modalCtrl.create(ModalPage);
             modal.present();
 
diff --git a/src/components/app/app-root.ts b/src/components/app/app-root.ts
index 210fccdd999..f1e462ae009 100644
--- a/src/components/app/app-root.ts
+++ b/src/components/app/app-root.ts
@@ -19,7 +19,7 @@ export const AppRootToken = new OpaqueToken('USERROOT');
     '<div #modalPortal overlay-portal></div>' +
     '<div #overlayPortal overlay-portal></div>' +
     '<div #loadingPortal class="loading-portal" overlay-portal></div>' +
-    '<div #toastPortal class="toast-portal" overlay-portal></div>' +
+    '<div #toastPortal class="toast-portal" [overlay-portal]="10000"></div>' +
     '<div class="click-block"></div>'
 })
 export class IonicApp extends Ion implements OnInit {
diff --git a/src/components/nav/overlay-portal.ts b/src/components/nav/overlay-portal.ts
index 2dc638ae075..860e62a7a85 100644
--- a/src/components/nav/overlay-portal.ts
+++ b/src/components/nav/overlay-portal.ts
@@ -1,4 +1,4 @@
-import { ComponentFactoryResolver, Directive, ElementRef, forwardRef, Inject, NgZone, Optional, Renderer, ViewContainerRef } from '@angular/core';
+import { ComponentFactoryResolver, Directive, ElementRef, forwardRef, Inject, Input, NgZone, Optional, Renderer, ViewContainerRef } from '@angular/core';
 
 import { App } from '../app/app';
 import { Config } from '../../config/config';
@@ -12,7 +12,7 @@ import { TransitionController } from '../../transitions/transition-controller';
  * @private
  */
 @Directive({
-  selector: '[overlay-portal]'
+  selector: '[overlay-portal]',
 })
 export class OverlayPortal extends NavControllerBase {
   constructor(
@@ -38,4 +38,10 @@ export class OverlayPortal extends NavControllerBase {
     app.viewDidLeave.subscribe(this.dismissPageChangeViews.bind(this));
   }
 
+  @Input('overlay-portal')
+  set _overlayPortal(val: number) {
+    this._zIndexOffset = (val || 0);
+  }
+
 }
+
diff --git a/src/navigation/nav-controller-base.ts b/src/navigation/nav-controller-base.ts
index 011ceba9d43..31e10769457 100644
--- a/src/navigation/nav-controller-base.ts
+++ b/src/navigation/nav-controller-base.ts
@@ -38,6 +38,7 @@ export class NavControllerBase extends Ion implements NavController {
   _trnsTm: boolean = false;
   _viewport: ViewContainerRef;
   _views: ViewController[] = [];
+  _zIndexOffset: number = 0;
 
   viewDidLoad: EventEmitter<any> = new EventEmitter();
   viewWillEnter: EventEmitter<any> = new EventEmitter();
diff --git a/src/navigation/nav-util.ts b/src/navigation/nav-util.ts
index bd362f96be4..5cbe17bc3c2 100644
--- a/src/navigation/nav-util.ts
+++ b/src/navigation/nav-util.ts
@@ -51,8 +51,15 @@ export function convertToViews(linker: DeepLinker, pages: any[]): ViewController
   return views;
 }
 
+let portalZindex = 9999;
+
 export function setZIndex(nav: NavControllerBase, enteringView: ViewController, leavingView: ViewController, direction: string, renderer: Renderer) {
   if (enteringView) {
+    if (nav._isPortal) {
+      enteringView._setZIndex(nav._zIndexOffset + portalZindex, renderer);
+      portalZindex++;
+      return;
+    }
 
     leavingView = leavingView || nav.getPrevious(enteringView);
 
@@ -65,7 +72,7 @@ export function setZIndex(nav: NavControllerBase, enteringView: ViewController,
       }
 
     } else {
-      enteringView._setZIndex(nav._isPortal ? PORTAL_ZINDEX : INIT_ZINDEX, renderer);
+      enteringView._setZIndex(INIT_ZINDEX + nav._zIndexOffset, renderer);
     }
   }
 }
@@ -184,7 +191,6 @@ export enum ViewState {
 }
 
 export const INIT_ZINDEX = 100;
-export const PORTAL_ZINDEX = 9999;
 
 export const DIRECTION_BACK = 'back';
 export const DIRECTION_FORWARD = 'forward';