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