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

Commit

Permalink
fix(dialog): BREAKING CHANGE now md-dialog-actions
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcy Sutton authored and ThomasBurleson committed Nov 4, 2015
1 parent 9693204 commit bf08e17
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 90 deletions.
4 changes: 2 additions & 2 deletions docs/app/partials/view-source.tmpl.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@
</div>
</md-dialog-content>

<div class="md-actions" layout="horizontal">
<md-dialog-actions layout="horizontal">
<md-button class="md-primary" ng-click="$hideDialog()">
Done
</md-button>
</div>
</md-dialog-actions>
</md-dialog>
73 changes: 37 additions & 36 deletions src/components/dialog/demoBasicUsage/dialog1.tmpl.html
Original file line number Diff line number Diff line change
@@ -1,43 +1,44 @@
<md-dialog aria-label="Mango (Fruit)" ng-cloak>
<form>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>
<md-dialog-content style="max-width:800px;max-height:810px; ">
<div class="md-dialog-content">
<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
<p>
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
</p>
<md-toolbar>
<div class="md-toolbar-tools">
<h2>Mango (Fruit)</h2>
<span flex></span>
<md-button class="md-icon-button" ng-click="cancel()">
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
</md-button>
</div>
</md-toolbar>

<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">
<md-dialog-content style="max-width:800px;max-height:810px; ">
<div class="md-dialog-content">
<h2>Using .md-dialog-content class that sets the padding as the spec</h2>
<p>
The mango is a juicy stone fruit belonging to the genus Mangifera, consisting of numerous tropical fruiting trees, cultivated mostly for edible fruit. The majority of these species are found in nature as wild mangoes. They all belong to the flowering plant family Anacardiaceae. The mango is native to South and Southeast Asia, from where it has been distributed worldwide to become one of the most cultivated fruits in the tropics.
</p>

<p>
The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
</p>
<p>
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
</p>
</div>
</md-dialog-content>
<img style="margin: auto; max-width: 100%;" alt="Lush mango tree" src="img/mangues.jpg">

<div class="md-actions" layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
More on Wikipedia
</md-button>
<span flex></span>
<md-button ng-click="answer('not useful')" >
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;" >
Useful
</md-button>
</div>
<p>
The highest concentration of Mangifera genus is in the western part of Malesia (Sumatra, Java and Borneo) and in Burma and India. While other Mangifera species (e.g. horse mango, M. foetida) are also grown on a more localized basis, Mangifera indica&mdash;the "common mango" or "Indian mango"&mdash;is the only mango tree commonly cultivated in many tropical and subtropical regions.
</p>
<p>
It originated in Indian subcontinent (present day India and Pakistan) and Burma. It is the national fruit of India, Pakistan, and the Philippines, and the national tree of Bangladesh. In several cultures, its fruit and leaves are ritually used as floral decorations at weddings, public celebrations, and religious ceremonies.
</p>
</div>
</md-dialog-content>

<md-dialog-actions layout="row">
<md-button href="http://en.wikipedia.org/wiki/Mango" target="_blank" md-autofocus>
More on Wikipedia
</md-button>
<span flex></span>
<md-button ng-click="answer('not useful')">
Not Useful
</md-button>
<md-button ng-click="answer('useful')" style="margin-right:20px;">
Useful
</md-button>
</md-dialog-actions>
</form>
</md-dialog>
2 changes: 1 addition & 1 deletion src/components/dialog/dialog-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ md-dialog.md-THEME_NAME-theme {
border-radius: $dialog-border-radius;
background-color: '{{background-color}}';

&.md-content-overflow .md-actions {
&.md-content-overflow md-dialog-actions {
border-top-color: '{{foreground-4}}';
}
}
Expand Down
50 changes: 27 additions & 23 deletions src/components/dialog/dialog.js
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
* - The dialog is always given an isolate scope.
* - The dialog's template must have an outer `<md-dialog>` element.
* Inside, use an `<md-dialog-content>` element for the dialog's content, and use
* an element with class `md-actions` for the dialog's actions.
* an `<md-dialog-actions>` element for the dialog's actions.
* - Dialogs must cover the entire application to keep interactions inside of them.
* Use the `parent` option to change where dialogs are appended.
*
Expand Down Expand Up @@ -139,11 +139,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
* ' </md-item>'+
* ' </md-list>'+
* ' </md-dialog-content>' +
* ' <div class="md-actions">' +
* ' <md-dialog-actions>' +
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
* ' Close Dialog' +
* ' </md-button>' +
* ' </div>' +
* ' </md-dialog-actions>' +
* '</md-dialog>',
* locals: {
* items: $scope.items
Expand Down Expand Up @@ -218,11 +218,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) {
*
* ' <md-dialog-content>Hello {{ employee }}!</md-dialog-content>' +
*
* ' <div class="md-actions">' +
* ' <md-dialog-actions>' +
* ' <md-button ng-click="closeDialog()" class="md-primary">' +
* ' Close Greeting' +
* ' </md-button>' +
* ' </div>' +
* ' </md-dialog-actions>' +
* '</md-dialog>',
* controller: 'GreetingController',
* onComplete: afterShowAnimation,
Expand Down Expand Up @@ -429,19 +429,19 @@ function MdDialogProvider($$interimElementProvider) {
return {
template: [
'<md-dialog md-theme="{{ dialog.theme }}" aria-label="{{ dialog.ariaLabel }}" ng-class="dialog.css">',
' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
' <h2 class="md-title">{{ dialog.title }}</h2>',
' <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
' </md-dialog-content>',
' <div class="md-actions">',
' <md-button ng-if="dialog.$type == \'confirm\'"' +
' ng-click="dialog.abort()" class="md-primary">',
' {{ dialog.cancel }}',
' </md-button>',
' <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
' {{ dialog.ok }}',
' </md-button>',
' </div>',
' <md-dialog-content class="md-dialog-content" role="document" tabIndex="-1">',
' <h2 class="md-title">{{ dialog.title }}</h2>',
' <div class="md-dialog-content-body" md-template="::dialog.mdContent"></div>',
' </md-dialog-content>',
' <md-dialog-actions>',
' <md-button ng-if="dialog.$type == \'confirm\'"' +
' ng-click="dialog.abort()" class="md-primary">',
' {{ dialog.cancel }}',
' </md-button>',
' <md-button ng-click="dialog.hide()" class="md-primary" md-autofocus="dialog.$type!=\'confirm\'">',
' {{ dialog.ok }}',
' </md-button>',
' </md-dialog-actions>',
'</md-dialog>'
].join('').replace(/\s\s+/g, ''),
controller: function mdDialogCtrl() {
Expand All @@ -459,7 +459,7 @@ function MdDialogProvider($$interimElementProvider) {
}

/* @ngInject */
function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement) {
function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $rootElement, $log) {
return {
hasBackdrop: true,
isolateScope: true,
Expand Down Expand Up @@ -514,19 +514,24 @@ function MdDialogProvider($$interimElementProvider) {
*/
function focusOnOpen() {
if (options.focusOnOpen) {
var target = $mdUtil.findFocusTarget(element) || findCloseButton();
var target = $mdUtil.findFocusTarget(element) || findCloseButtonOrWarn();
target.focus();
}

/**
* If no element with class dialog-close, try to find the last
* button child in md-actions and assume it is a close button
*
* If we find no actions at all, log a warning to the console.
*/
function findCloseButton() {
function findCloseButtonOrWarn() {
var closeButton = element[0].querySelector('.dialog-close');
if (!closeButton) {
var actionButtons = element[0].querySelectorAll('.md-actions button');
var actionButtons = element[0].querySelectorAll('md-dialog-actions .md-button');
closeButton = actionButtons[actionButtons.length - 1];
if (actionButtons.length === 0) {
$log.warn('At least one action button is required for <md-dialog-actions>.');
}
}
return angular.element(closeButton);
}
Expand Down Expand Up @@ -644,7 +649,6 @@ function MdDialogProvider($$interimElementProvider) {
return angular.element(element || defaultElement);
}


}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/components/dialog/dialog.scss
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ md-dialog {
}
}

.md-actions {
md-dialog-actions {
display: flex;
order: 2;
box-sizing: border-box;
Expand All @@ -105,7 +105,7 @@ md-dialog {
margin-top: $baseline-grid;
}
}
&.md-content-overflow .md-actions {
&.md-content-overflow md-dialog-actions {
border-top-width: 1px;
border-top-style: solid;
}
Expand Down
107 changes: 81 additions & 26 deletions src/components/dialog/dialog.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -282,11 +282,11 @@ describe('$mdDialog', function() {
var parent = angular.element('<div>');
$mdDialog.show({
template: '' +
'<md-dialog>' +
' <div class="md-actions">' +
' <button class="dialog-close">Close</button>' +
' </div>' +
'</md-dialog>',
'<md-dialog>' +
'<md-dialog-actions>' +
'<button class="dialog-close">Close</button>' +
'</md-dialog-actions>' +
'</md-dialog>',
parent: parent
});
runAnimation();
Expand Down Expand Up @@ -756,12 +756,13 @@ describe('$mdDialog', function() {
$mdDialog.show({
focusOnOpen: true,
parent: parent,
template: '<md-dialog>' +
'<div class="md-actions">' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</div>' +
'</md-dialog>'
template:
'<md-dialog>' +
'<md-dialog-actions>' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</md-dialog-actions>' +
'</md-dialog>'
});

$rootScope.$apply();
Expand All @@ -777,12 +778,13 @@ describe('$mdDialog', function() {
$mdDialog.show({
focusOnOpen: false,
parent: parent,
template: '<md-dialog>' +
'<div class="md-actions">' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</div>' +
'</md-dialog>',
template:
'<md-dialog>' +
'<md-dialog-actions>' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</md-dialog-actions>' +
'</md-dialog>',
});

$rootScope.$apply();
Expand Down Expand Up @@ -930,17 +932,18 @@ describe('$mdDialog', function() {
'translate3d(240px, 120px, 0px) scale(0.5, 0.5)');
}));

it('should focus the last `md-button` in md-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
it('should focus the last `md-button` in md-dialog-actions open if no `.dialog-close`', inject(function($mdDialog, $rootScope, $document, $timeout, $mdConstant) {
jasmine.mockElementFocus(this);

var parent = angular.element('<div>');
$mdDialog.show({
template: '<md-dialog>' +
'<div class="md-actions">' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</div>' +
'</md-dialog>',
template:
'<md-dialog>' +
'<md-dialog-actions>' +
'<button id="a">A</md-button>' +
'<button id="focus-target">B</md-button>' +
'</md-dialog-actions>' +
'</md-dialog>',
parent: parent
});

Expand All @@ -949,6 +952,58 @@ describe('$mdDialog', function() {
expect($document.activeElement).toBe(parent[0].querySelector('#focus-target'));
}));

it('should warn if md-dialog-actions does not contain actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
spyOn($log, 'warn');

var parent = angular.element('<div>');
$mdDialog.show({
template:
'<md-dialog>' +
'<md-dialog-actions>' +
'<p>Why is this here</p>' +
'</md-dialog-actions>' +
'</md-dialog>',
parent: parent
});

$rootScope.$apply();
$timeout.flush();

var container = angular.element(parent[0].querySelector('.md-dialog-container'));

container.triggerHandler('transitionend');
$rootScope.$apply();
parent.find('md-dialog').triggerHandler('transitionend');
$rootScope.$apply();

expect($log.warn).toHaveBeenCalled();
}));

it('should not warn if md-dialog-actions has actions', inject(function($mdDialog, $rootScope, $log, $timeout) {
spyOn($log, 'warn');

var parent = angular.element('<div>');
$mdDialog.show({
template:
'<md-dialog>' +
'<md-dialog-actions>' +
'<button class="md-button">Ok good</button>' +
'</md-dialog-actions>' +
'</md-dialog>',
parent: parent
});

var container = angular.element(parent[0].querySelector('.md-dialog-container'));
$rootScope.$apply();
$timeout.flush();
container.triggerHandler('transitionend');
$rootScope.$apply();
parent.find('md-dialog').triggerHandler('transitionend');
$rootScope.$apply();

expect($log.warn).not.toHaveBeenCalled();
}));

it('should only allow one open at a time', inject(function($mdDialog, $rootScope, $animate) {
var parent = angular.element('<div>');
$mdDialog.show({
Expand Down Expand Up @@ -1163,7 +1218,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
var content = mdContent.find('p');
var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
var buttons = mdActions.find('md-button');

expect(mdDialog.attr('aria-label')).toBe('test alert');
Expand All @@ -1190,7 +1245,7 @@ describe('$mdDialog with custom interpolation symbols', function() {
var mdContent = mdDialog.find('md-dialog-content');
var title = mdContent.find('h2');
var content = mdContent.find('p');
var mdActions = angular.element(mdDialog[0].querySelector('.md-actions'));
var mdActions = angular.element(mdDialog[0].querySelector('md-dialog-actions'));
var buttons = mdActions.find('md-button');

expect(mdDialog.attr('aria-label')).toBe('test alert');
Expand Down

0 comments on commit bf08e17

Please sign in to comment.