Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
feat(dialog): added fullscreen option to small screens
Browse files Browse the repository at this point in the history
Added `smFullscreen` 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
  • Loading branch information
EladBezalel committed Nov 23, 2015
1 parent b8d3519 commit 95aeadd
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 4 deletions.
2 changes: 1 addition & 1 deletion src/components/dialog/demoBasicUsage/dialog1.tmpl.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 3 additions & 1 deletion src/components/dialog/demoBasicUsage/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@
Tab Dialog
</md-button>
</div>

<div hide-gt-sm layout="row" layout-align="center center">
<md-checkbox ng-model="customFullscreen" aria-label="Fullscreen Custom Dialog">Custom Dialog Fullscreen</md-checkbox>
</div>
<p class="footer">Note: The <b>Confirm</b> dialog does not use <code>$mdDialog.clickOutsideToClose(true)</code>.</p>

<div ng-if="status">
Expand Down
3 changes: 2 additions & 1 deletion src/components/dialog/demoBasicUsage/script.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,8 @@ angular.module('dialogDemo1', ['ngMaterial'])
templateUrl: 'dialog1.tmpl.html',
parent: angular.element(document.body),
targetEvent: ev,
clickOutsideToClose:true
clickOutsideToClose:true,
smFullscreen: $scope.customFullscreen
})
.then(function(answer) {
$scope.status = 'You said the information was "' + answer + '".';
Expand Down
7 changes: 6 additions & 1 deletion src/components/dialog/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', 'smFullscreen'],
options: dialogDefaultOptions
})
.addPreset('alert', {
Expand Down Expand Up @@ -490,6 +490,7 @@ function MdDialogProvider($$interimElementProvider) {
focusOnOpen: true,
disableParentScroll: true,
autoWrap: true,
smFullscreen: false,
transformTemplate: function(template, options) {
return '<div class="md-dialog-container">' + validatedTemplate(template) + '</div>';

Expand Down Expand Up @@ -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.smFullscreen) {
dialogEl.addClass('md-dialog-fullscreen');
}

return animator
.translate3d(dialogEl, from, to, translateOptions)
.then(function(animateReversal) {
Expand Down
8 changes: 8 additions & 0 deletions src/components/dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

0 comments on commit 95aeadd

Please sign in to comment.