overlay z-index

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

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,

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;

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;

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'
+      }
     }
   }
 

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

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: `
     <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
-
     <ion-content class="padding">
-
       <p>First Page: {{ val }}</p>
-
       <p>
         <button primary (click)="push()">Push (Go to 2nd)</button>
       </p>
-
+      <p>
+        <button primary (click)="openActionMenu()">Open Action Menu</button>
+      </p>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
-
     </ion-content>
   `
 })
@@ -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'})

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;

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