diff --git a/src/components/toast/demoBasicUsage/script.js b/src/components/toast/demoBasicUsage/script.js index 7bae5887577..0f39479932c 100644 --- a/src/components/toast/demoBasicUsage/script.js +++ b/src/components/toast/demoBasicUsage/script.js @@ -44,14 +44,15 @@ angular.module('toastDemo1', ['ngMaterial']) $scope.showActionToast = function() { var pinTo = $scope.getToastPosition(); var toast = $mdToast.simple() - .textContent('Action Toast!') - .action('OK') - .highlightAction(false) - .position(pinTo); + .textContent('Marked as read') + .action('UNDO') + .highlightAction(true) + .highlightClass('md-accent')// Accent is used by default, this just demonstrates the usage. + .position(pinTo); $mdToast.show(toast).then(function(response) { if ( response == 'ok' ) { - alert('You clicked \'OK\'.'); + alert('You clicked the \'UNDO\' action.'); } }); }; diff --git a/src/components/toast/toast-theme.scss b/src/components/toast/toast-theme.scss index 486c70f334d..0435f5c6831 100644 --- a/src/components/toast/toast-theme.scss +++ b/src/components/toast/toast-theme.scss @@ -1,15 +1,20 @@ md-toast.md-THEME_NAME-theme { + .md-toast-content { background-color: #323232; color: '{{background-50}}'; .md-button { color: '{{background-50}}'; + &.md-highlight { - color: '{{primary-A200}}'; - &.md-accent { - color: '{{accent-A200}}'; + // By default the toast should use the accent color as the primary highlight color + color: '{{accent-A200}}'; + + &.md-primary { + color: '{{primary-A200}}'; } + &.md-warn { color: '{{warn-A200}}'; } diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js index d77be068783..f4861ee104c 100644 --- a/src/components/toast/toast.js +++ b/src/components/toast/toast.js @@ -105,22 +105,57 @@ function MdToastDirective($mdToast) { * @returns {obj} a `$mdToastPreset` with the following chainable configuration methods. * * _**Note:** These configuration methods are provided in addition to the methods provided by - * the `build()` and `show()` methods below._ + * the `build()` and `show()` methods below._ + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + * + *
MethodDescription
`.textContent(string)`Sets the toast content to the specified string
`.action(string)` + * Adds an action button.
+ * If clicked, the promise (returned from `show()`) + * will resolve with the value `'ok'`; otherwise, it is resolved with `true` after a `hideDelay` + * timeout + *
`.highlightAction(boolean)` + * Whether or not the action button will have an additional highlight class.
+ * By default the `accent` color will be applied to the action button. + *
`.highlightClass(string)` + * If set, the given class will be applied to the highlighted action button.
+ * This allows you to specify the highlight color easily. Highlight classes are `md-primary`, `md-warn` + * and `md-accent` + *
`.capsule(boolean)`Whether or not to add the `md-capsule` class to the toast to provide rounded corners
`.theme(string)` + * Sets the theme on the toast to the requested theme. Default is `$mdThemingProvider`'s default. + *
* - * - `.textContent(string)` - Sets the toast content to the specified string. - * - * - `.action(string)` - Adds an action button. If clicked, the promise (returned from `show()`) - * will resolve with the value `'ok'`; otherwise, it is resolved with `true` after a `hideDelay` - * timeout. - * - * - `.highlightAction(boolean)` - Whether or not the action button will have an additional - * highlight class. - * - * - `.capsule(boolean)` - Whether or not to add the `md-capsule` class to the toast to provide - * rounded corners. - * - * - `.theme(string)` - Sets the theme on the toast to the requested theme. Default is - * `$mdThemingProvider`'s default. */ /** @@ -233,25 +268,35 @@ function MdToastProvider($$interimElementProvider) { }) .addPreset('simple', { argOption: 'textContent', - methods: ['textContent', 'content', 'action', 'highlightAction', 'theme', 'parent' ], + methods: ['textContent', 'content', 'action', 'highlightAction', 'highlightClass', 'theme', 'parent' ], options: /* @ngInject */ function($mdToast, $mdTheming) { - var opts = { + return { template: '' + '
' + ' ' + ' {{ toast.content }}' + ' ' + - ' ' + + ' ' + ' {{ toast.action }}' + ' ' + '
' + '
', controller: /* @ngInject */ function mdToastCtrl($scope) { var self = this; + + if (self.highlightAction) { + $scope.highlightClasses = [ + 'md-highlight', + self.highlightClass + ] + } + $scope.$watch(function() { return activeToastContent; }, function() { self.content = activeToastContent; }); + this.resolve = function() { $mdToast.hide( ACTION_RESOLVE ); }; @@ -260,7 +305,6 @@ function MdToastProvider($$interimElementProvider) { controllerAs: 'toast', bindToController: true }; - return opts; } }) .addMethod('updateTextContent', updateTextContent)