feat(modal): On larger displays modals will be inset and centered, not full width/height, closes #783

Author: adamdbradley

Diff for: js/ext/angular/src/service/ionicModal.js

@@ -82,6 +82,8 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
       var self = this;
       var modalEl = angular.element(self.modalEl);
 
+      self.el.classList.remove('hide');
+
       $document[0].body.classList.add('modal-open');
 
       self._isShown = true;
@@ -97,13 +99,14 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
       $timeout(function(){
         modalEl.addClass('ng-enter-active');
         self.scope.$parent && self.scope.$parent.$broadcast('modal.shown');
+        self.el.classList.add('active');
       }, 20);
 
       self._deregisterBackButton = $ionicPlatform.registerBackButtonAction(function(){
         self.hide();
       }, 200);
 
-      ionic.views.Modal.prototype.show.call(this);
+      ionic.views.Modal.prototype.show.call(self);
 
     },
 
@@ -113,9 +116,11 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
      * @description Hide this modal instance.
      */
     hide: function() {
-      this._isShown = false;
-      var modalEl = angular.element(this.modalEl);
+      var self = this;
+      self._isShown = false;
+      var modalEl = angular.element(self.modalEl);
 
+      self.el.classList.remove('active');
       modalEl.addClass('ng-leave');
 
       $timeout(function(){
@@ -125,13 +130,14 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
 
       $timeout(function(){
         $document[0].body.classList.remove('modal-open');
+        self.el.classList.add('hide');
       }, 350);
 
-      ionic.views.Modal.prototype.hide.call(this);
+      ionic.views.Modal.prototype.hide.call(self);
 
-      this.scope.$parent && this.scope.$parent.$broadcast('modal.hidden');
+      self.scope.$parent && self.scope.$parent.$broadcast('modal.hidden');
 
-      this._deregisterBackButton && this._deregisterBackButton();
+      self._deregisterBackButton && self._deregisterBackButton();
     },
 
     /**

Diff for: scss/_modal.scss

@@ -5,6 +5,21 @@
  * Modals are independent windows that slide in from off-screen.
  */
 
+.modal-backdrop {
+  @include transition(background-color 300ms ease-in-out);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index-modal;
+  width: 100%;
+  height: 100%;
+  background-color: $modal-backdrop-bg-inactive;
+
+  &.active {
+    background-color: $modal-backdrop-bg-active;
+  }
+}
+
 .modal {
   position: absolute;
   top: 0;
@@ -15,10 +30,24 @@
   width: 100%;
 
   background-color: $modal-bg-color;
+}
 
-  // Active modal
-  &.active {
-    height: 100%;
+@media (min-width: $modal-inset-mode-break-point) {
+  // inset mode is when the modal doesn't fill the entire
+  // display but instead is centered within a large display
+  .modal {
+    top: $modal-inset-mode-top;
+    right: $modal-inset-mode-right;
+    bottom: $modal-inset-mode-bottom;
+    left: $modal-inset-mode-left;
+    overflow: visible;
+    min-height: $modal-inset-mode-min-height;
+    max-width: $modal-inset-mode-max-width;
+    width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
+  }
+
+  .modal.ng-leave-active {
+    bottom: 0;
   }
 }
 
@@ -28,4 +57,4 @@
   .modal {
     pointer-events: auto;
   }
-}
+}

Diff for: scss/_variables.scss

@@ -526,6 +526,16 @@ $split-pane-menu-border-color:    #eee !default;
 // -------------------------------
 
 $modal-bg-color:                  #fff !default;
+$modal-backdrop-bg-active:        rgba(0,0,0,0.5) !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;
+$modal-inset-mode-right:          20% !default;
+$modal-inset-mode-bottom:         20% !default;
+$modal-inset-mode-left:           20% !default;
+$modal-inset-mode-min-height:     240px !default;
+$modal-inset-mode-max-width:      768px !default;
 
 
 // Grids
@@ -543,26 +553,26 @@ $grid-responsive-lg-break:        1023px !default; // smaller than landscape tab
 $sheet-bg-color:                  rgba(255, 255, 255, 0.6) !default;
 $sheet-opacity:                   0.95 !default;
 
-// Border radii for the action sheet button groups
 $sheet-border-radius:             3px 3px 3px 3px !default;
 $sheet-border-radius-top:         3px 3px 0px 0px !default;
 $sheet-border-radius-bottom:      0px 0px 3px 3px !default;
 
+
 // Popups
 // -------------------------------
 
-$popup-backdrop-fadein-duration: 0.1s;
-$popup-width: 250px;
-$popup-enter-animation: superScaleIn;
-$popup-enter-animation-duration: 0.2s;
-$popup-leave-animation-duration: 0.1s;
+$popup-backdrop-fadein-duration:  0.1s !default;
+$popup-width:                     250px !default;
+$popup-enter-animation:           superScaleIn !default;
+$popup-enter-animation-duration:  0.2s !default;
+$popup-leave-animation-duration:  0.1s !default;
 
-$popup-border-radius: 0px;
-$popup-background-color: rgba(255,255,255,0.9);
+$popup-border-radius:             0px !default;
+$popup-background-color:          rgba(255,255,255,0.9) !default;
 
-$popup-button-border-radius: 2px;
-$popup-button-line-height: 20px;
-$popup-button-min-height: 45px;
+$popup-button-border-radius:      2px !default;
+$popup-button-line-height:        20px !default;
+$popup-button-min-height:         45px !default;
 
 
 // Badges