Using .md-dialog-content class that sets the padding as the spec
diff --git a/src/components/dialog/demoBasicUsage/index.html b/src/components/dialog/demoBasicUsage/index.html
index 13d8bcb60ad..16a2506bfaf 100644
--- a/src/components/dialog/demoBasicUsage/index.html
+++ b/src/components/dialog/demoBasicUsage/index.html
@@ -14,11 +14,13 @@
Custom Dialog
+
+ Custom Dialog Fullscreen
+
Tab Dialog
-
diff --git a/src/components/dialog/demoBasicUsage/script.js b/src/components/dialog/demoBasicUsage/script.js
index 3ba9c368c36..92c62d6c639 100644
--- a/src/components/dialog/demoBasicUsage/script.js
+++ b/src/components/dialog/demoBasicUsage/script.js
@@ -1,7 +1,8 @@
angular.module('dialogDemo1', ['ngMaterial'])
-.controller('AppCtrl', function($scope, $mdDialog) {
+.controller('AppCtrl', function($scope, $mdDialog, $mdMedia) {
$scope.status = ' ';
+ $scope.customFullscreen = $mdMedia('sm');
$scope.showAlert = function(ev) {
// Appending dialog to document.body to cover sidenav in docs app
@@ -42,13 +43,23 @@ angular.module('dialogDemo1', ['ngMaterial'])
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
- clickOutsideToClose:true
+ clickOutsideToClose:true,
+ fullscreen: $mdMedia('sm') && $scope.customFullscreen
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
}, function() {
$scope.status = 'You cancelled the dialog.';
});
+
+
+
+ $scope.$watch(function() {
+ return $mdMedia('sm');
+ }, function(sm) {
+ $scope.customFullscreen = (sm === true);
+ });
+
};
$scope.showTabDialog = function(ev) {
diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js
index 45432dff2d5..da38bcdba02 100644
--- a/src/components/dialog/dialog.js
+++ b/src/components/dialog/dialog.js
@@ -391,7 +391,7 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
* finished.
* - `onRemoving` `{function=}`: Callback function used to announce the close/hide() action is
* starting. This allows developers to run custom animations in parallel the close animations.
- *
+ * - `fullscreen` `{boolean=}`: An option to apply `.md-dialog-fullscreen` class on open.
* @returns {promise} A promise that can be resolved with `$mdDialog.hide()` or
* rejected with `$mdDialog.cancel()`.
*/
@@ -424,7 +424,7 @@ function MdDialogProvider($$interimElementProvider) {
return $$interimElementProvider('$mdDialog')
.setDefaults({
- methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent'],
+ methods: ['disableParentScroll', 'hasBackdrop', 'clickOutsideToClose', 'escapeToClose', 'targetEvent', 'closeTo', 'openFrom', 'parent', 'fullscreen'],
options: dialogDefaultOptions
})
.addPreset('alert', {
@@ -490,6 +490,7 @@ function MdDialogProvider($$interimElementProvider) {
focusOnOpen: true,
disableParentScroll: true,
autoWrap: true,
+ fullscreen: false,
transformTemplate: function(template, options) {
return '
' + validatedTemplate(template) + '
';
@@ -895,6 +896,10 @@ function MdDialogProvider($$interimElementProvider) {
var from = animator.toTransformCss(buildTranslateToOrigin(dialogEl, options.openFrom || options.origin));
var to = animator.toTransformCss(""); // defaults to center display (or parent or $rootElement)
+ if (options.fullscreen) {
+ dialogEl.addClass('md-dialog-fullscreen');
+ }
+
return animator
.translate3d(dialogEl, from, to, translateOptions)
.then(function(animateReversal) {
diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss
index 5b98eeb5272..24c3cd42424 100644
--- a/src/components/dialog/dialog.scss
+++ b/src/components/dialog/dialog.scss
@@ -119,3 +119,11 @@ md-dialog {
border: 1px solid #fff;
}
}
+
+@media (max-width: $layout-breakpoint-sm) {
+ md-dialog.md-dialog-fullscreen {
+ min-height: 100%;
+ min-width: 100%;
+ border-radius: 0;
+ }
+}
\ No newline at end of file
diff --git a/src/core/util/media.js b/src/core/util/media.js
index 6aef51911ca..aa9725bc0a0 100644
--- a/src/core/util/media.js
+++ b/src/core/util/media.js
@@ -62,7 +62,11 @@ function mdMediaFactory($mdConstant, $rootScope, $window) {
}
function add(query) {
- var result = mqls[query] = $window.matchMedia(query);
+ var result = mqls[query];
+ if ( !result ) {
+ result = mqls[query] = $window.matchMedia(query);
+ }
+
result.addListener(onQueryChange);
return (results[result.media] = !!result.matches);
}