fix(nav): zIndex in overlays

Author: manucorporat

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();
 

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 {

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);
+  }
+
 }
+

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();

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';