diff --git a/src/components/dialog/dialog-theme.scss b/src/components/dialog/dialog-theme.scss index 2d874601ee..149b934011 100644 --- a/src/components/dialog/dialog-theme.scss +++ b/src/components/dialog/dialog-theme.scss @@ -2,7 +2,10 @@ $dialog-border-radius: 4px !default; md-dialog.md-THEME_NAME-theme { border-radius: $dialog-border-radius; + background-color: '{{background-hue-1}}'; + color: '{{foreground-1}}'; + &.md-content-overflow { .md-actions, md-dialog-actions { diff --git a/src/components/dialog/dialog.js b/src/components/dialog/dialog.js index 12210e3c3f..137afbedf6 100644 --- a/src/components/dialog/dialog.js +++ b/src/components/dialog/dialog.js @@ -551,7 +551,7 @@ function MdDialogProvider($$interimElementProvider) { }); /* @ngInject */ - function advancedDialogOptions($mdDialog, $mdTheming, $mdConstant) { + function advancedDialogOptions($mdDialog, $mdConstant) { return { template: [ '', @@ -599,15 +599,17 @@ function MdDialogProvider($$interimElementProvider) { }, controllerAs: 'dialog', bindToController: true, - theme: $mdTheming.defaultTheme() }; } /* @ngInject */ - function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement, $log, $injector) { + function dialogDefaultOptions($mdDialog, $mdAria, $mdUtil, $mdConstant, $animate, $document, $window, $rootElement, + $log, $injector, $mdTheming) { + return { hasBackdrop: true, isolateScope: true, + onCompiling: beforeCompile, onShow: onShow, onShowing: beforeShow, onRemove: onRemove, @@ -641,7 +643,15 @@ function MdDialogProvider($$interimElementProvider) { } }; + function beforeCompile(options) { + // Automatically apply the theme, if the user didn't specify a theme explicitly. + // Those option changes need to be done, before the compilation has started, because otherwise + // the option changes will be not available in the $mdCompilers locales. + detectTheming(options); + } + function beforeShow(scope, element, options, controller) { + if (controller) { controller.mdHtmlContent = controller.htmlContent || options.htmlContent || ''; controller.mdTextContent = controller.textContent || options.textContent || @@ -797,6 +807,22 @@ function MdDialogProvider($$interimElementProvider) { } } + function detectTheming(options) { + // Only detect the theming, if the developer didn't specify the theme specifically. + if (options.theme) return; + + options.theme = $mdTheming.defaultTheme(); + + if (options.targetEvent && options.targetEvent.target) { + var targetEl = angular.element(options.targetEvent.target); + + // Once the user specifies a targetEvent, we will automatically try to find the correct + // nested theme. + options.theme = (targetEl.controller('mdTheme') || {}).$mdTheme || options.theme; + } + + } + /** * Capture originator/trigger/from/to element information (if available) * and the parent container for the dialog; defaults to the $rootElement @@ -817,6 +843,7 @@ function MdDialogProvider($$interimElementProvider) { options.origin = getBoundingClientRect(options.targetEvent.target, options.origin); } + /** * Identify the bounding RECT for the target element * diff --git a/src/components/dialog/dialog.spec.js b/src/components/dialog/dialog.spec.js index 0489f8600d..bfe93e94a0 100644 --- a/src/components/dialog/dialog.spec.js +++ b/src/components/dialog/dialog.spec.js @@ -123,6 +123,49 @@ describe('$mdDialog', function() { expect(resolved).toBe(true); })); + it('should normally use the default theme', inject(function($animate, $rootScope, $mdDialog, $compile) { + var dialogParent = angular.element('
'); + + $mdDialog.show( + $mdDialog + .alert() + .parent(dialogParent) + .title("Title") + .textContent("Themed Dialog") + .ok('Close') + ); + + $rootScope.$apply(); + runAnimation(); + + var mdContainer = angular.element(dialogParent[0].querySelector('.md-dialog-container')); + var mdDialog = mdContainer.find('md-dialog'); + + expect(mdDialog.attr('md-theme')).toBe('default'); + })); + + it('should apply the specified theme', inject(function($animate, $rootScope, $mdDialog, $compile) { + var dialogParent = angular.element('
'); + + $mdDialog.show( + $mdDialog + .alert() + .parent(dialogParent) + .title("Title") + .theme('myTheme') + .textContent("Themed Dialog") + .ok('Close') + ); + + $rootScope.$apply(); + runAnimation(); + + var mdContainer = angular.element(dialogParent[0].querySelector('.md-dialog-container')); + var mdDialog = mdContainer.find('md-dialog'); + + expect(mdDialog.attr('md-theme')).toBe('myTheme'); + })); + it('should focus `md-dialog-content` on open', inject(function($mdDialog, $rootScope, $document) { jasmine.mockElementFocus(this); diff --git a/src/core/services/interimElement/interimElement.js b/src/core/services/interimElement/interimElement.js index 887c778d8f..b5feff58a8 100644 --- a/src/core/services/interimElement/interimElement.js +++ b/src/core/services/interimElement/interimElement.js @@ -426,7 +426,11 @@ function InterimElementProvider() { * Use optional autoHided and transition-in effects */ function createAndTransitionIn() { - return $q(function(resolve, reject){ + return $q(function(resolve, reject) { + + // Trigger onCompiling callback before the compilation starts. + // This is useful, when modifying options, which can be influenced by developers. + options.onCompiling && options.onCompiling(options); compileElement(options) .then(function( compiledData ) { diff --git a/src/core/services/interimElement/interimElement.spec.js b/src/core/services/interimElement/interimElement.spec.js index 31f2ce89d7..05200a8321 100644 --- a/src/core/services/interimElement/interimElement.spec.js +++ b/src/core/services/interimElement/interimElement.spec.js @@ -387,6 +387,25 @@ describe('$$interimElement service', function() { expect(autoClosed).toBe(true); })); + it('calls onCompiling before onShowing', inject(function() { + var onCompilingCalled = false; + + Service.show({ + template: '
My Element
', + onCompiling: beforeCompile, + onShowing: beforeShow + }); + + function beforeCompile() { + onCompilingCalled = true; + } + + function beforeShow() { + expect(onCompilingCalled).toBe(true); + } + + })); + it('calls onShowing before onShow', inject(function() { var onShowingCalled = false;