javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 21:15:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(nav): zIndex in overlays

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-11-16 19:17:25 +01:00
committed by Adam Bradley
parent 7201999674
commit 70f8a8e5eb
5 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/action-sheet/test/basic/app-module.ts
View File

@ -33,9 +33,10 @@ export class E2EPage {
} }
}, },
{ {
text: 'Play', text: 'Play (open modal)',
icon: 'arrow-dropright-circle', icon: 'arrow-dropright-circle',
handler: () => { handler: () => {
this.result = 'Play (open modal)';
let modal = this.modalCtrl.create(ModalPage); let modal = this.modalCtrl.create(ModalPage);
modal.present(); modal.present();

2
src/components/app/app-root.ts
View File

@ -19,7 +19,7 @@ export const AppRootToken = new OpaqueToken('USERROOT');
'<div #modalPortal overlay-portal></div>' + '<div #modalPortal overlay-portal></div>' +
'<div #overlayPortal overlay-portal></div>' + '<div #overlayPortal overlay-portal></div>' +
'<div #loadingPortal class="loading-portal" 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>' '<div class="click-block"></div>'
}) })
export class IonicApp extends Ion implements OnInit { export class IonicApp extends Ion implements OnInit {

10
src/components/nav/overlay-portal.ts
View File

@ -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 { App } from '../app/app';
import { Config } from '../../config/config'; import { Config } from '../../config/config';
@ -12,7 +12,7 @@ import { TransitionController } from '../../transitions/transition-controller';
* @private * @private
*/ */
@Directive({ @Directive({
selector: '[overlay-portal]' selector: '[overlay-portal]',
}) })
export class OverlayPortal extends NavControllerBase { export class OverlayPortal extends NavControllerBase {
constructor( constructor(
@ -38,4 +38,10 @@ export class OverlayPortal extends NavControllerBase {
app.viewDidLeave.subscribe(this.dismissPageChangeViews.bind(this)); app.viewDidLeave.subscribe(this.dismissPageChangeViews.bind(this));
} }
@Input('overlay-portal')
set _overlayPortal(val: number) {
this._zIndexOffset = (val || 0);
}
} }

1
src/navigation/nav-controller-base.ts
View File

@ -38,6 +38,7 @@ export class NavControllerBase extends Ion implements NavController {
_trnsTm: boolean = false; _trnsTm: boolean = false;
_viewport: ViewContainerRef; _viewport: ViewContainerRef;
_views: ViewController[] = []; _views: ViewController[] = [];
_zIndexOffset: number = 0;
viewDidLoad: EventEmitter<any> = new EventEmitter(); viewDidLoad: EventEmitter<any> = new EventEmitter();
viewWillEnter: EventEmitter<any> = new EventEmitter(); viewWillEnter: EventEmitter<any> = new EventEmitter();

10
src/navigation/nav-util.ts
View File

@ -51,8 +51,15 @@ export function convertToViews(linker: DeepLinker, pages: any[]): ViewController
return views; return views;
} }
let portalZindex = 9999;
export function setZIndex(nav: NavControllerBase, enteringView: ViewController, leavingView: ViewController, direction: string, renderer: Renderer) { export function setZIndex(nav: NavControllerBase, enteringView: ViewController, leavingView: ViewController, direction: string, renderer: Renderer) {
if (enteringView) { if (enteringView) {
if (nav._isPortal) {
enteringView._setZIndex(nav._zIndexOffset + portalZindex, renderer);
portalZindex++;
return;
}
leavingView = leavingView || nav.getPrevious(enteringView); leavingView = leavingView || nav.getPrevious(enteringView);
@ -65,7 +72,7 @@ export function setZIndex(nav: NavControllerBase, enteringView: ViewController,
} }
} else { } 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 INIT_ZINDEX = 100;
export const PORTAL_ZINDEX = 9999;
export const DIRECTION_BACK = 'back'; export const DIRECTION_BACK = 'back';
export const DIRECTION_FORWARD = 'forward'; export const DIRECTION_FORWARD = 'forward';