feat(dialog): added fullscreen option to dialog

Added `fullscreen` option that if it's set to true `.md-dialog-fullscreen` class is added to `<md-dialog>` that
maximizing the dialog to the whole screen.

fixes #2148. closes #5793.

src/components/dialog/demoBasicUsage/dialog1.tmpl.html

@@ -10,7 +10,7 @@ <h2>Mango (Fruit)</h2>
  </div>
  </md-toolbar>
 
- <md-dialog-content style="max-width:800px;max-height:810px; ">
+ <md-dialog-content>
  <div class="md-dialog-content">
  <h2>Using .md-dialog-content class that sets the padding as the spec</h2>
  <p>

src/components/dialog/demoBasicUsage/index.html

@@ -14,11 +14,13 @@
  <md-button class="md-primary md-raised" ng-click="showAdvanced($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
  Custom Dialog
  </md-button>
+ <div hide-gt-sm layout="row" layout-align="center center" flex>
+ <md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
+ </div>
  <md-button class="md-primary md-raised" ng-click="showTabDialog($event)" flex-sm="100" flex-md="100" flex-gt-md="auto">
  Tab Dialog
  </md-button>
  </div>
-
  <p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>
 
  <div ng-if="status">

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) {

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 '<div class="md-dialog-container">' + validatedTemplate(template) + '</div>';
 
@@ -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) {

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

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