Popup

ionic/components/app/z-index.scss

@@ -20,3 +20,6 @@ $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-popup-wrapper:          101;

ionic/components/popup/extensions/ios.scss

@@ -0,0 +1,15 @@
+$popup-ios-border-radius:       4px !default;
+
+.popup[mode="ios"] {
+  .popup-wrapper {
+    border-radius: $popup-ios-border-radius;
+    .popup-body:empty { padding: 0; }
+    .popup-buttons {
+      padding: 0;
+      min-height: 0;
+      .button {
+        color: get-color('primary', base);
+      }
+    }
+  }
+}

ionic/components/popup/popup.scss

@@ -2,6 +2,8 @@
 // Modals
 // --------------------------
 
+$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;
@@ -13,28 +15,27 @@ $popup-button-border-radius:      2px !default;
 $popup-button-line-height:        20px !default;
 $popup-button-min-height:         45px !default;
 
-
-ion-popup {
-  position: absolute;
-  top: 0;
-  z-index: $z-index-overlay;
-  overflow: hidden;
-  min-height: 100%;
-  width: 100%;
-  background-color: $modal-bg-color;
-
-  transform: translate3d(0px, 100%, 0px);
-  &.show-overlay {
-    transform: translate3d(0px, 0px, 0px);
-  }
-}
-
+$popup-backdrop-color:            #000 !default;
+$popup-backdrop-active-opacity:   0.4 !default;
 
 /**
  * Popups
  * --------------------------------------------------
  */
 
+ .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;
   top: 0;
@@ -50,7 +51,7 @@ ion-popup {
   z-index: $z-index-overlay;
 
   // Start hidden
-  visibility: hidden;
+  //visibility: hidden;
   /*
   &.popup-showing {
     visibility: visible;
@@ -71,7 +72,8 @@ ion-popup {
   }
   */
 
-  .popup {
+  .popup-wrapper {
+    z-index: $z-index-popup-wrapper;
     width: $popup-width;
     max-width: 100%;
     max-height: 90%;

ionic/components/popup/popup.ts

@@ -8,21 +8,21 @@ import * as util from 'ionic/util';
 @Injectable()
 export class Popup extends Overlay {
 
-  alert(context={}) {
+  alert(context={}, opts={}) {
     if(typeof context === 'string') {
       context = {
-        text: context,
+        title: context,
         buttons: [
           { text: 'Ok' }
         ]
       }
     }
     let defaults = {
-      enterAnimation: 'modal-slide-in',
-      leaveAnimation: 'modal-slide-out',
+      enterAnimation: 'popup-pop-in',
+      leaveAnimation: 'popup-pop-out',
     };
 
-    return this.create(OVERLAY_TYPE, AlertType, util.extend(defaults, opts), context);
+    return this.create(OVERLAY_TYPE, StandardPopup, util.extend(defaults, opts), context);
   }
 
   get(handle) {
@@ -36,11 +36,13 @@ export class Popup extends Overlay {
 
 const OVERLAY_TYPE = 'popup';
 
+
 @Component({
-  selector: 'ion-popup-alert'
+  selector: 'ion-popup-default'
 })
 @View({
-  template: '<div class="popup">' +
+  template: '<div class="popup-backdrop" (click)="_cancel()" tappable></div>' +
+  '<div class="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>' +
@@ -54,34 +56,67 @@ const OVERLAY_TYPE = 'popup';
 '</div>',
   directives: [CSSClass, NgIf, NgFor]
 })
-class AlertType {
-  constructor() {
-    console.log('Alert type');
+
+class StandardPopup {
+  constructor(popup: Popup) {
+    this.popup = popup;
+  }
+  buttonTapped(button, event) {
+    console.log('TAPPED', button, event);
+  }
+  _cancel() {
+    this.cancel && this.cancel();
+    return this.overlayRef.close();
+  }
+
+  /*
+  _buttonClicked(index) {
+    let shouldClose = this.buttonClicked(index);
+    if (shouldClose === true) {
+      return this.overlayRef.close();
+    }
+  }
+  */
+
+}
+
+class PopupAnimation extends Animation {
+  constructor(element) {
+    super(element);
+    this
+      .easing('ease-in-out')
+      .duration(200);
+
+    this.backdrop = new Animation(element.querySelector('.popup-backdrop'));
+    this.wrapper = new Animation(element.querySelector('.popup-wrapper'));
+
+    this.add(this.backdrop, this.wrapper);
   }
 }
 
 /**
  * Animations for modals
  */
-class ModalSlideIn extends Animation {
+class PopupPopIn extends PopupAnimation {
   constructor(element) {
     super(element);
-    this
-      .easing('cubic-bezier(.36,.66,.04,1)')
-      .duration(400)
-      .fromTo('translateY', '100%', '0%');
+
+    this.wrapper.fromTo('opacity', '0', '1')
+    this.wrapper.fromTo('scale', '1.2', '1');
+
+    this.backdrop.fromTo('opacity', '0', '0.4')
   }
 }
-Animation.register('modal-slide-in', ModalSlideIn);
+Animation.register('popup-pop-in', PopupPopIn);
 
 
-class ModalSlideOut extends Animation {
+class PopupPopOut extends PopupAnimation {
   constructor(element) {
     super(element);
-    this
-      .easing('ease-out')
-      .duration(250)
-      .fromTo('translateY', '0%', '100%');
+    this.wrapper.fromTo('opacity', '1', '0')
+    this.wrapper.fromTo('scale', '1', '0.8');
+
+    this.backdrop.fromTo('opacity', '0.4', '0')
   }
 }
-Animation.register('modal-slide-out', ModalSlideOut);
+Animation.register('popup-pop-out', PopupPopOut);

ionic/ionic.scss

@@ -40,6 +40,7 @@
   "components/list/list",
   "components/modal/modal",
   "components/nav-bar/nav-bar",
+  "components/popup/popup",
   "components/slides/slides",
   "components/radio/radio",
   "components/scroll/scroll",
@@ -64,6 +65,7 @@
   "components/list/extensions/ios",
   "components/item/extensions/ios",
   "components/nav-bar/extensions/ios",
+  "components/popup/extensions/ios",
   "components/radio/extensions/ios",
   "components/search-bar/extensions/ios",
   "components/segment/extensions/ios",