diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js index 2c40d0a481..0a12853b6d 100644 --- a/ionic/components/action-menu/action-menu.js +++ b/ionic/components/action-menu/action-menu.js @@ -38,6 +38,16 @@ import {ClickBlock} from '../../util/click-block'; directives: [Item, Icon, NgIf, NgFor] }) export class ActionMenu extends Overlay { + + static get config() { + return { + selector: 'ion-action-menu', + hostProperties: { + 'zIndex': 'style.z-index' + } + } + } + constructor() { super(); @@ -79,11 +89,6 @@ export class ActionMenu extends Overlay { return this.create(ActionMenu, opts); } - static get config() { - return { - selector: 'ion-action-menu' - } - } } diff --git a/ionic/components/action-menu/action-menu.scss b/ionic/components/action-menu/action-menu.scss index 93e9bff4f3..3de22e9fc4 100644 --- a/ionic/components/action-menu/action-menu.scss +++ b/ionic/components/action-menu/action-menu.scss @@ -25,7 +25,7 @@ $action-menu-options-border-color: #d1d3d6 !default; left: 0; width: 100%; height: 100%; - z-index: $z-index-action-menu; + z-index: $z-index-overlay; } .action-menu-backdrop { @@ -55,7 +55,6 @@ $action-menu-options-border-color: #d1d3d6 !default; margin-left: $action-menu-margin; margin-right: $action-menu-margin; width: auto; - z-index: $z-index-action-menu; overflow: hidden; button, diff --git a/ionic/components/app/z-index.scss b/ionic/components/app/z-index.scss index 48440419b5..3f0238a945 100644 --- a/ionic/components/app/z-index.scss +++ b/ionic/components/app/z-index.scss @@ -8,7 +8,6 @@ $z-index-swipe-handle: 5 !default; $z-index-toolbar-border: 20 !default; $z-index-list-border: 50 !default; $z-index-aside-overlay: 80 !default; -$z-index-modal: 100 !default; +$z-index-overlay: 100 !default; $z-index-alert: 110 !default; -$z-index-action-menu: 120 !default; $z-index-click-block: 9999 !default; diff --git a/ionic/components/aside/aside.scss b/ionic/components/aside/aside.scss index c59ddb05ac..d5559483f7 100644 --- a/ionic/components/aside/aside.scss +++ b/ionic/components/aside/aside.scss @@ -1,9 +1,14 @@ + +// Aside +// -------------------------- + $aside-width: 304px !default; $aside-height: 304px !default; $aside-transition: 0.2s ease transform !default; $aside-background: #fff !default; $aside-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default; + .aside { display: block; position: absolute; diff --git a/ionic/components/modal/modal.js b/ionic/components/modal/modal.js index c781e12a7a..d286d233e2 100644 --- a/ionic/components/modal/modal.js +++ b/ionic/components/modal/modal.js @@ -6,7 +6,10 @@ export class Modal extends Overlay { static get config() { return { - selector: 'ion-modal' + selector: 'ion-modal', + hostProperties: { + 'zIndex': 'style.z-index' + } } } diff --git a/ionic/components/modal/modal.scss b/ionic/components/modal/modal.scss index 7588f5ea7d..b791650d88 100644 --- a/ionic/components/modal/modal.scss +++ b/ionic/components/modal/modal.scss @@ -1,4 +1,7 @@ +// Modals +// -------------------------- + $modal-bg-color: #fff !default; $modal-backdrop-bg-active: #000 !default; $modal-backdrop-bg-inactive: rgba(0,0,0,0) !default; @@ -11,17 +14,10 @@ $modal-inset-mode-left: 20% !default; $modal-inset-mode-min-height: 240px !default; -/** - * Modals - * -------------------------------------------------- - * Modals are independent windows that slide in from off-screen. - */ - - ion-modal { position: absolute; top: 0; - z-index: $z-index-modal; + z-index: $z-index-overlay; overflow: hidden; min-height: 100%; width: 100%; diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js index 652e96080a..da1445b725 100644 --- a/ionic/components/modal/test/basic/index.js +++ b/ionic/components/modal/test/basic/index.js @@ -7,7 +7,7 @@ import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility'; import {IonicView} from 'ionic/ionic'; import {IonicComponent} from 'ionic/ionic'; -import {Modal, NavController, NavParams, Animation} from 'ionic/ionic'; +import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic'; class FadeIn extends Animation { @@ -64,18 +64,16 @@ export class ContactModal extends Modal { @IonicView({ template: ` First Page Header: {{ val }} - -

First Page: {{ val }}

-

- +

+ +

-
` }) @@ -94,10 +92,33 @@ export class ModalFirstPage { closeModal() { // TODO(maxlynch): Figure out a much better way to get the parent ContactModal var m = this.nav._nav.elementRef.parentView._view.context; - - //this.modal.close(); m.close(); } + + openActionMenu() { + ActionMenu.open({ + buttons: [ + { text: 'Share This' }, + { text: 'Move' } + ], + destructiveText: 'Delete', + titleText: 'Modify your album', + cancelText: 'Cancel', + cancel: function() { + console.log('Canceled'); + }, + destructiveButtonClicked: () => { + console.log('Destructive clicked'); + }, + buttonClicked: function(index) { + console.log('Button clicked', index); + if(index == 1) { return false; } + return true; + } + }).then(actionMenu => { + this.actionMenu = actionMenu; + }); + } } @Component({selector: 'ion-view'}) diff --git a/ionic/components/overlay/overlay.js b/ionic/components/overlay/overlay.js index e6ebc74639..9a38e20053 100644 --- a/ionic/components/overlay/overlay.js +++ b/ionic/components/overlay/overlay.js @@ -6,6 +6,14 @@ import * as util from 'ionic/util'; export class Overlay { + constructor() { + this.zIndex = rootIndex; + for (let i = 0; i < overlayStack.length; i++) { + this.zIndex = overlayStack[i].zIndex + 1; + } + overlayStack.push(this); + } + /* Instance Methods */ open(opts) { let animationName = (opts && opts.animation) || this.options.enterAnimation; @@ -45,13 +53,14 @@ export class Overlay { _clean() { this._dispose && this._dispose(); + util.array.remove(overlayStack, this); } /* Static Methods */ static create(ComponentType: Type, opts) { return new Promise((resolve, reject) => { - IonicRoot.append(ComponentType).then((ref) => { + IonicRoot.append(ComponentType).then(ref => { let overlay = ref.instance; overlay._dispose = ref.dispose; overlay.domElement = ref.elementRef.domElement; @@ -67,3 +76,6 @@ export class Overlay { } } + +let overlayStack = []; +const rootIndex = 100; diff --git a/ionic/util/util.js b/ionic/util/util.js index 3cbd67504d..7b22ac5718 100644 --- a/ionic/util/util.js +++ b/ionic/util/util.js @@ -109,7 +109,7 @@ export class Log { } } -export let array = { +export const array = { find(arr, cb) { for (let i = 0, ii = arr.length; i < ii; i++) { if (cb(arr[i], i)) return arr[i];