diff --git a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html index 073e8925827..3119d3c0e86 100644 --- a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html +++ b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html @@ -10,7 +10,7 @@

Mango (Fruit)

- +

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