diff --git a/docs/app/partials/view-source.tmpl.html b/docs/app/partials/view-source.tmpl.html index f3343bfdd27..48061c277b1 100644 --- a/docs/app/partials/view-source.tmpl.html +++ b/docs/app/partials/view-source.tmpl.html @@ -17,9 +17,9 @@ -
+ Done -
+ diff --git a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html index 81079200d15..073e8925827 100644 --- a/src/components/dialog/demoBasicUsage/dialog1.tmpl.html +++ b/src/components/dialog/demoBasicUsage/dialog1.tmpl.html @@ -1,43 +1,44 @@
- -
-

Mango (Fruit)

- - - - -
-
- -
-

Using .md-dialog-content class that sets the padding as the spec

-

- 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. -

+ +
+

Mango (Fruit)

+ + + + +
+
- Lush mango tree + +
+

Using .md-dialog-content class that sets the padding as the spec

+

+ 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. +

-

- 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—the "common mango" or "Indian mango"—is the only mango tree commonly cultivated in many tropical and subtropical regions. -

-

- 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. -

-
-
+ Lush mango tree -
- - More on Wikipedia - - - - Not Useful - - - Useful - -
+

+ 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—the "common mango" or "Indian mango"—is the only mango tree commonly cultivated in many tropical and subtropical regions. +

+

+ 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. +

+
+
+ + + + More on Wikipedia + + + + Not Useful + + + Useful + +
diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss index 77edfdeae3d..04d152b202c 100644 --- a/src/components/dialog/dialog-theme.scss +++ b/src/components/dialog/dialog-theme.scss @@ -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}}'; } } diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index a5fda8b3ea7..91f5793922b 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -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 `` element. * Inside, use an `` element for the dialog's content, and use - * an element with class `md-actions` for the dialog's actions. + * an `` 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. * @@ -139,11 +139,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) { * ' '+ * ' '+ * ' ' + - * '
' + + * ' ' + * ' ' + * ' Close Dialog' + * ' ' + - * '
' + + * ' ' + * '
', * locals: { * items: $scope.items @@ -218,11 +218,11 @@ function MdDialogDirective($$rAF, $mdTheming, $mdDialog) { * * ' Hello {{ employee }}!' + * - * '
' + + * ' ' + * ' ' + * ' Close Greeting' + * ' ' + - * '
' + + * ' ' + * '', * controller: 'GreetingController', * onComplete: afterShowAnimation, @@ -429,19 +429,19 @@ function MdDialogProvider($$interimElementProvider) { return { template: [ '', - ' ', - '

{{ dialog.title }}

', - '
', - '
', - '
', - ' ', - ' {{ dialog.cancel }}', - ' ', - ' ', - ' {{ dialog.ok }}', - ' ', - '
', + ' ', + '

{{ dialog.title }}

', + '
', + '
', + ' ', + ' ', + ' {{ dialog.cancel }}', + ' ', + ' ', + ' {{ dialog.ok }}', + ' ', + ' ', '
' ].join('').replace(/\s\s+/g, ''), controller: function mdDialogCtrl() { @@ -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, @@ -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 .'); + } } return angular.element(closeButton); } @@ -644,7 +649,6 @@ function MdDialogProvider($$interimElementProvider) { return angular.element(element || defaultElement); } - } /** diff --git a/src/components/dialog/dialog.scss b/src/components/dialog/dialog.scss index cfae0aeb0bd..afb2e4a10d4 100644 --- a/src/components/dialog/dialog.scss +++ b/src/components/dialog/dialog.scss @@ -86,7 +86,7 @@ md-dialog { } } - .md-actions { + md-dialog-actions { display: flex; order: 2; box-sizing: border-box; @@ -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; } diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js index 53c4a773cbb..3d4019d7437 100644 --- a/src/components/dialog/dialog.spec.js +++ b/src/components/dialog/dialog.spec.js @@ -282,11 +282,11 @@ describe('$mdDialog', function() { var parent = angular.element('
'); $mdDialog.show({ template: '' + - '' + - '
' + - ' ' + - '
' + - '
', + '' + + '' + + '' + + '' + + '', parent: parent }); runAnimation(); @@ -756,12 +756,13 @@ describe('$mdDialog', function() { $mdDialog.show({ focusOnOpen: true, parent: parent, - template: '' + - '
' + - '
' + - '
' + template: + '' + + '' + + '
' + - '', + template: + '' + + '' + + '' + + '' + + '', + 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('
'); $mdDialog.show({ @@ -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'); @@ -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');