fix(popup): fix alignment, backdrop not fading out

Author: ajoslin

Diff for: js/angular/service/popup.js

@@ -1,14 +1,16 @@
 
 var POPUP_TPL =
-  '<div class="popup">' +
-    '<div class="popup-head">' +
-      '<h3 class="popup-title" ng-bind-html="title"></h3>' +
-      '<h5 class="popup-sub-title" ng-bind-html="subTitle" ng-if="subTitle"></h5>' +
-    '</div>' +
-    '<div class="popup-body">' +
-    '</div>' +
-    '<div class="popup-buttons row">' +
-      '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button col" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>' +
+  '<div class="popup-container">' +
+    '<div class="popup">' +
+      '<div class="popup-head">' +
+        '<h3 class="popup-title" ng-bind-html="title"></h3>' +
+        '<h5 class="popup-sub-title" ng-bind-html="subTitle" ng-if="subTitle"></h5>' +
+      '</div>' +
+      '<div class="popup-body">' +
+      '</div>' +
+      '<div class="popup-buttons">' +
+        '<button ng-repeat="button in buttons" ng-click="$buttonTapped(button, $event)" class="button" ng-class="button.type || \'button-default\'" ng-bind-html="button.text"></button>' +
+      '</div>' +
     '</div>' +
   '</div>';
 
@@ -114,7 +116,7 @@ IonicModule
 function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $document, $compile, $ionicPlatform) {
   //TODO allow this to be configured
   var config = {
-    stackPushDelay: 50
+    stackPushDelay: 75
   };
   var popupStack = [];
   var $ionicPopup = {
@@ -322,20 +324,8 @@ function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $docume
           //if hidden while waiting for raf, don't show
           if (!self.isShown) return;
 
-          //if the popup is taller than the window, make the popup body scrollable
-          if(self.element[0].offsetHeight > window.innerHeight - 20){
-            self.element[0].style.height = window.innerHeight - 20+'px';
-            popupBody = self.element[0].querySelectorAll('.popup-body');
-            popupHead = self.element[0].querySelectorAll('.popup-head');
-            popupButtons = self.element[0].querySelectorAll('.popup-buttons');
-            self.element.addClass('popup-tall');
-            newHeight = window.innerHeight - popupHead[0].offsetHeight - popupButtons[0].offsetHeight -20;
-            popupBody[0].style.height =  newHeight + 'px';
-          }
-
           self.element.removeClass('popup-hidden');
           self.element.addClass('popup-showing active');
-          ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
           focusInput(self.element);
         });
       };
@@ -382,6 +372,7 @@ function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $docume
         //Add popup-open & backdrop if this is first popup
         document.body.classList.add('popup-open');
         $ionicBackdrop.retain();
+        //only show the backdrop on the first popup
         $ionicPopup._backButtonActionDone = $ionicPlatform.registerBackButtonAction(
           onHardwareBackButton,
           PLATFORM_BACK_BUTTON_PRIORITY_POPUP
@@ -408,10 +399,9 @@ function($ionicTemplateLoader, $ionicBackdrop, $q, $timeout, $rootScope, $docume
         } else {
           //Remove popup-open & backdrop if this is last popup
           document.body.classList.remove('popup-open');
+          $ionicBackdrop.release();
           ($ionicPopup._backButtonActionDone || angular.noop)();
         }
-        // always release the backdrop since it has an internal backdrop counter
-        $ionicBackdrop.release();
         return result;
       });
     });

Diff for: scss/_popup.scss

@@ -4,43 +4,52 @@
  * --------------------------------------------------
  */
 
-.popup {
-  position: fixed;
-  top: 50%;
-  left: 50%;
+.popup-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: rgba(0,0,0,0);
+  pointer-events: none;
+
+  @include display-flex();
+  @include justify-content(center);
+  @include align-items(center);
+
   z-index: $z-index-popup;
 
   // Start hidden
   visibility: hidden;
+  &.popup-showing {
+    visibility: visible;
+  }
 
-  width: $popup-width;
-  max-width: 100%;
-
-  border-radius: $popup-border-radius;
-  background-color: $popup-background-color;
-
-  &.popup-hidden {
+  &.popup-hidden .popup {
     @include animation-name(scaleOut);
     @include animation-duration($popup-leave-animation-duration);
     @include animation-timing-function(ease-in-out);
     @include animation-fill-mode(both);
   }
 
-  &.popup-showing {
-    visibility: visible;
-  }
-
-  &.active {
+  &.active .popup {
     @include animation-name(superScaleIn);
     @include animation-duration($popup-enter-animation-duration);
     @include animation-timing-function(ease-in-out);
     @include animation-fill-mode(both);
   }
-  &.popup-tall{
-    overflow:hidden;
-    .popup-body{
-      overflow:auto;
-    }
+
+  .popup {
+    width: $popup-width;
+    max-width: 100%;
+    max-height: 90%;
+    pointer-events: auto;
+
+    border-radius: $popup-border-radius;
+    background-color: $popup-background-color;
+
+    @include display-flex();
+    @include flex-direction(column);
   }
 }
 
@@ -62,18 +71,17 @@
 }
 .popup-body {
   padding: 10px;
+  overflow: scroll;
 }
 
 .popup-buttons {
-  &.row {
-    padding: 10px 10px;
-  }
-
   @include display-flex();
   @include flex-direction(row);
+  padding: 10px;
+  min-height: $popup-button-min-height + 20;
 
   .button {
-    margin: 0px 5px;
+    @include flex(1);
     min-height: $popup-button-min-height;
     border-radius: $popup-button-border-radius;
     line-height: $popup-button-line-height;

Diff for: test/unit/angular/service/popup.unit.js

@@ -252,7 +252,7 @@ describe('$ionicPopup service', function() {
       expect(previousPopup.show).toHaveBeenCalled();
     }));
 
-    it('should always release backdrop and remove popup-open and deregister back if no previous', inject(function($q, $timeout, $ionicBackdrop, $ionicPlatform) {
+    it('should release backdrop and remove popup-open and deregister back if no previous', inject(function($q, $timeout, $ionicBackdrop, $ionicPlatform) {
       var fakePopup = {
         show: jasmine.createSpy('show'),
         remove: jasmine.createSpy('remove'),
@@ -269,14 +269,6 @@ describe('$ionicPopup service', function() {
       expect(backDoneSpy).toHaveBeenCalled();
       expect(document.body.classList.contains('popup-open')).toBe(false);
     }));
-    it('backdrop release should be called even if there are multiple popups', inject(function($q, $timeout, $ionicBackdrop) {
-      popup = $ionicPopup.show();
-      popup2 = $ionicPopup.show();
-      spyOn($ionicBackdrop, 'release');
-      popup.close();
-      $timeout.flush();
-      expect($ionicBackdrop.release).toHaveBeenCalled();
-    }));
     it('template should only overwrite prompt input if it includes html', inject(function($timeout) {
       spyOn($ionicPopup, '_createPopup');
       $ionicPopup.prompt({template: "Tacos!"});