fix action menu / popups

ionic/components/action-menu/action-menu.scss

@@ -7,9 +7,6 @@ $action-menu-max-width:                 520px !default;
 $action-menu-background-color:          rgba(243,243,243,.95) !default;
 $action-menu-button-text-color:         #007aff !default;
 
-$action-menu-backdrop-color:            #000 !default;
-$action-menu-backdrop-active-opacity:   0.4 !default;
-
 $action-menu-options-bg-color:          #f1f2f3 !default;
 $action-menu-options-bg-active-color:   #e4e5e7 !default;
 $action-menu-options-text-color:        #007aff !default;
@@ -25,19 +22,9 @@ $action-menu-options-border-color:      #d1d3d6 !default;
   z-index: $z-index-overlay;
 }
 
-.action-menu-backdrop {
+action-menu-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: $action-menu-backdrop-color;
-  opacity: 0;
-  tranform: translateZ(0);
-}
-
-.action-menu-wrapper {
   position: absolute;
+  z-index: $z-index-overlay-wrapper;
   bottom: 0;
   left: 0;
   right: 0;

ionic/components/action-menu/action-menu.ts

@@ -15,9 +15,9 @@ import * as util from 'ionic/util';
 
 
 @View({
-  template: '' +
+  template:
-    '<div class="action-menu-backdrop" (click)="_cancel()" tappable></div>' +
+    '<backdrop (click)="_cancel()" tappable></backdrop>' +
-    '<div class="action-menu-wrapper">' +
+    '<action-menu-wrapper>' +
       '<div class="action-menu-container">' +
         '<div class="action-menu-group action-menu-options">' +
           '<div class="action-menu-title" *ng-if="titleText">{{titleText}}</div>' +
@@ -33,7 +33,7 @@ import * as util from 'ionic/util';
           '<button (click)="_cancel()"><i class="icon" [class]="cancelIcon"></i> {{cancelText}}</button>' +
         '</div>' +
       '</div>' +
-    '</div>',
+    '</action-menu-wrapper>',
   directives: [NgFor, NgIf, CSSClass, TapClick]
 })
 class ActionMenuDirective {
@@ -100,8 +100,8 @@ class ActionMenuAnimation extends Animation {
     super(element);
     this.easing('cubic-bezier(.36, .66, .04, 1)').duration(400);
 
-    this.backdrop = new Animation(element.querySelector('.action-menu-backdrop'));
+    this.backdrop = new Animation(element.querySelector('backdrop'));
-    this.wrapper = new Animation(element.querySelector('.action-menu-wrapper'));
+    this.wrapper = new Animation(element.querySelector('action-menu-wrapper'));
 
     this.add(this.backdrop, this.wrapper);
   }

ionic/components/action-menu/test/basic/e2e.ts

@@ -4,5 +4,5 @@ it('should open action menu', function() {
 });
 
 it('should close with backdrop click', function() {
-  element(by.css('.action-menu-backdrop')).click();
+  element(by.css('backdrop')).click();
 });

ionic/components/app/z-index.scss

@@ -21,5 +21,5 @@ $z-index-swipe-handle:           15 !default;
 $z-index-toolbar-border:         20 !default;
 $z-index-list-border:            50 !default;
 
-$z-index-popup-backdrop:         100;
+$z-index-backdrop:               1;
-$z-index-popup-wrapper:          101;
+$z-index-overlay-wrapper:        10;

ionic/components/modal/modal.scss

@@ -3,8 +3,6 @@
 // --------------------------------------------------
 
 $modal-bg-color:                  #fff !default;
-$modal-backdrop-bg-active:        #000 !default;
-$modal-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
 
 $modal-inset-mode-break-point:    680px !default;  // @media min-width
 $modal-inset-mode-top:            20% !default;

ionic/components/popup/extensions/ios.scss

@@ -1,25 +1,30 @@
 
+// iOS Popups
+// --------------------------------------------------
+
 $popup-ios-border-radius:       13px !default;
 $popup-ios-bg-color:            #f8f8f8 !default;
 
+
 .popup[mode="ios"] {
 
-  .popup-wrapper {
+  popup-wrapper {
-
     border-radius: $popup-ios-border-radius;
     background-color: $popup-ios-bg-color;
+  }
 
   .popup-head {
     padding-top: 24px;
   }
 
-    .popup-title {
+  .popup-body:empty {
+    padding: 0;
   }
 
-    .popup-body:empty { padding: 0; }
   .popup-buttons {
     padding: 0;
     min-height: 0;
+
     .button {
       min-height: 42px;
       color: get-color('primary', base);
@@ -29,6 +34,7 @@ $popup-ios-bg-color:            #f8f8f8 !default;
         font-weight: bold;
       }
     }
+
   }
-  }
+
 }

ionic/components/popup/extensions/material.scss

@@ -0,0 +1,40 @@
+
+// Material Design Popups
+// --------------------------------------------------
+
+$popup-md-border-radius:       13px !default;
+$popup-md-bg-color:            #f8f8f8 !default;
+
+
+.popup[mode="md"] {
+
+  popup-wrapper {
+    border-radius: $popup-md-border-radius;
+    background-color: $popup-md-bg-color;
+  }
+
+  .popup-head {
+    padding-top: 24px;
+  }
+
+  .popup-body:empty {
+    padding: 0;
+  }
+
+  .popup-buttons {
+    padding: 0;
+    min-height: 0;
+
+    .button {
+      min-height: 42px;
+      color: get-color('primary', base);
+      font-size: 14px;
+
+      &:last-child {
+        font-weight: bold;
+      }
+    }
+
+  }
+
+}

ionic/components/popup/popup.scss

@@ -4,10 +4,6 @@
 
 $popup-width:                     250px !default;
 
-$popup-bg-color:                  #fff !default;
-$popup-backdrop-bg-active:        #000 !default;
-$popup-backdrop-bg-inactive:      rgba(0,0,0,0) !default;
-
 $popup-border-radius:             0px !default;
 $popup-background-color:          rgba(255,255,255,0.9) !default;
 
@@ -15,24 +11,10 @@ $popup-button-border-radius:      2px !default;
 $popup-button-line-height:        20px !default;
 $popup-button-min-height:         45px !default;
 
-$popup-backdrop-color:            #000 !default;
-$popup-backdrop-active-opacity:   0.4 !default;
-
-
-.popup-backdrop {
-   z-index: $z-index-popup-backdrop;
-   position: absolute;
-   top: 0;
-   left: 0;
-   width: 100%;
-   height: 100%;
-   background-color: $popup-backdrop-color;
-   opacity: 0;
-   tranform: translateZ(0);
-}
 
 ion-popup {
   position: absolute;
+  z-index: $z-index-overlay;
   top: 0;
   left: 0;
   bottom: 0;
@@ -43,10 +25,8 @@ ion-popup {
   justify-content: center;
   align-items: center;
 
-  z-index: $z-index-overlay;
+  popup-wrapper {
-
+    z-index: $z-index-overlay-wrapper;
-  .popup-wrapper {
-    z-index: $z-index-popup-wrapper;
     width: $popup-width;
     max-width: 100%;
     max-height: 90%;
@@ -102,6 +82,7 @@ h3.popup-title {
     line-height: $popup-button-line-height;
 
     margin-right: 5px;
+
     &:last-child {
       margin-right: 0px;
     }

ionic/components/popup/popup.ts

@@ -1,5 +1,5 @@
 import {formDirectives, NgControl, NgControlGroup,
-  Component, View, Injectable, CSSClass, NgIf, NgFor, onInit} from 'angular2/angular2';
+  Component, View, Injectable, CSSClass, NgIf, NgFor} from 'angular2/angular2';
 
 import {Overlay} from '../overlay/overlay';
 import {Animation} from '../../animations/animation';
@@ -24,7 +24,7 @@ export class Popup extends Overlay {
   }
 
   alert(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       }
@@ -49,7 +49,7 @@ export class Popup extends Overlay {
   }
 
   confirm(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       }
@@ -78,7 +78,7 @@ export class Popup extends Overlay {
   }
 
   prompt(context={}, opts={}) {
-    if(typeof context === 'string') {
+    if (typeof context === 'string') {
       context = {
         title: context
       };
@@ -109,8 +109,6 @@ export class Popup extends Overlay {
       ]
     }, context);
 
-    console.log('Context', context);
-
     return this.popup(context, opts);
   }
 
@@ -127,12 +125,12 @@ const OVERLAY_TYPE = 'popup';
 
 
 @Component({
-  selector: 'ion-popup-default',
+  selector: 'ion-popup-default'
-  lifecycle: [onInit]
 })
 @View({
-  template: '<div class="popup-backdrop" (click)="_cancel($event)" tappable></div>' +
+  template:
-  '<div class="popup-wrapper">' +
+  '<backdrop (click)="_cancel($event)" tappable></backdrop>' +
+  '<popup-wrapper>' +
     '<div class="popup-head">' +
       '<h3 class="popup-title" [inner-html]="title"></h3>' +
       '<h5 class="popup-sub-title" [inner-html]="subTitle" *ng-if="subTitle"></h5>' +
@@ -143,8 +141,7 @@ const OVERLAY_TYPE = 'popup';
     '<div class="popup-buttons" *ng-if="buttons.length">' +
       '<button *ng-for="#button of buttons" (click)="buttonTapped(button, $event)" class="button" [class]="button.type || \'button-default\'" [inner-html]="button.text"></button>' +
     '</div>' +
-  '</div>' +
+  '</popup-wrapper>',
-'</div>',
   directives: [formDirectives, CSSClass, NgIf, NgFor]
 })
 
@@ -153,11 +150,10 @@ class StandardPopup {
     this.popup = popup;
   }
   onInit() {
-    console.log('INIT');
     setTimeout(() => {
       this.element = this.overlayRef.getElementRef().nativeElement;
       this.promptInput = this.element.querySelector('input');
-      if(this.promptInput) {
+      if (this.promptInput) {
         this.promptInput.value = '';
       }
     });
@@ -170,9 +166,9 @@ class StandardPopup {
     });
 
     // If the event.preventDefault() wasn't called, close
-    if(!event.defaultPrevented) {
+    if (!event.defaultPrevented) {
       // If this is a cancel button, reject the promise
-      if(button.isCancel) {
+      if (button.isCancel) {
         this.promiseReject();
       } else {
         // Resolve with the prompt value
@@ -185,7 +181,7 @@ class StandardPopup {
   _cancel(event) {
     this.cancel && this.cancel(event);
 
-    if(!event.defaultPrevented) {
+    if (!event.defaultPrevented) {
       this.promiseReject();
       return this.overlayRef.close();
     }
@@ -199,8 +195,8 @@ class PopupAnimation extends Animation {
       .easing('ease-in-out')
       .duration(200);
 
-    this.backdrop = new Animation(element.querySelector('.popup-backdrop'));
+    this.backdrop = new Animation(element.querySelector('backdrop'));
-    this.wrapper = new Animation(element.querySelector('.popup-wrapper'));
+    this.wrapper = new Animation(element.querySelector('popup-wrapper'));
 
     this.add(this.backdrop, this.wrapper);
   }

ionic/util/util.scss

@@ -85,6 +85,25 @@ $content-padding:    10px !default;
 }
 
 
+// Backdrop
+// --------------------------------------------------
+
+$backdrop-color:      #000 !default;
+
+backdrop {
+  position: absolute;
+  z-index: $z-index-backdrop;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: $backdrop-color;
+  opacity: 0;
+  tranform: translateZ(0);
+}
+
+
+
 // Click Block
 // --------------------------------------------------
 // Fill the screen to block clicks (a better pointer-events: none)