javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Adam Bradley
2014-03-13 22:14:28 -05:00
parent c912832b0b
commit ba2a40c845
3 changed files with 66 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
js/ext/angular/src/service/ionicModal.js vendored
View File

@@ -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();
},
/**

37
scss/_modal.scss
View File

@@ -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;
}
}
}

32
scss/_variables.scss
View File

@@ -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