From ba2a40c845dade7cdc6f99de14b5467e327d1d3c Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 13 Mar 2014 22:14:28 -0500 Subject: [PATCH] feat(modal): On larger displays modals will be inset and centered, not full width/height, closes #783 --- js/ext/angular/src/service/ionicModal.js | 18 ++++++++---- scss/_modal.scss | 37 +++++++++++++++++++++--- scss/_variables.scss | 32 +++++++++++++------- 3 files changed, 66 insertions(+), 21 deletions(-) diff --git a/js/ext/angular/src/service/ionicModal.js b/js/ext/angular/src/service/ionicModal.js index 939e517bd5e..62f6f0995e3 100644 --- a/js/ext/angular/src/service/ionicModal.js +++ b/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 --git a/scss/_modal.scss b/scss/_modal.scss index 7dce60a0cc9..fc4c5ccc054 100644 --- a/scss/_modal.scss +++ b/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; } -} +} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index 904ee95846a..586cb47de0c 100644 --- a/scss/_variables.scss +++ b/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