diff options
| -rw-r--r-- | docs/.vuepress/components/BmcToasts.vue | 36 | ||||
| -rw-r--r-- | docs/.vuepress/config.js | 1 | ||||
| -rw-r--r-- | docs/.vuepress/enhanceApp.js | 11 | ||||
| -rw-r--r-- | docs/guide/components/toast.md | 32 | ||||
| -rw-r--r-- | src/assets/styles/_toast.scss | 10 | ||||
| -rw-r--r-- | src/components/Mixins/BVToastMixin.js | 9 | ||||
| -rw-r--r-- | src/locales/en-US.json | 3 |
7 files changed, 99 insertions, 3 deletions
diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue new file mode 100644 index 00000000..15a480f6 --- /dev/null +++ b/docs/.vuepress/components/BmcToasts.vue @@ -0,0 +1,36 @@ +<template> + <div> + <b-button variant="success" @click="makeSuccessToast()">Show Success</b-button> + <b-button variant="danger" @click="makeErrorToast()">Show Error</b-button> + <b-button variant="warning" @click="makeWarningToast()">Show Warning</b-button> + <b-button variant="info" @click="makeInfoToast()">Show Info</b-button> + </div> +</template> + +<script> +import BVToastMixin from '../../../src/components/Mixins/BVToastMixin'; +export default { + name: 'BmcToasts', + mixins: [BVToastMixin], + methods: { + makeSuccessToast() { + this.successToast('This is a success toast and will be dismissed after 10 seconds.'); + }, + makeErrorToast() { + this.errorToast('This is an error toast and must be dismissed by the user.'); + }, + makeWarningToast() { + this.warningToast('This is a warning toast and must be dismissed by the user.'); + }, + makeInfoToast() { + this.infoToast('This is an info toast and must be dismissed by the user.'); + }, + } +} +</script> +<style scoped> + button { + margin-right: .5rem; + margin-bottom: 1rem; + } +</style>
\ No newline at end of file diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 2be074e4..680c98ef 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -45,6 +45,7 @@ module.exports = { children: [ "/guide/components/", "/guide/components/button", + "/guide/components/toast", ] } ], diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 59c1f925..799cf208 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,10 +1,19 @@ +// OpenBMC Imports import "../../src/assets/styles/_obmc-custom.scss"; +import BVToastMixin from "../../src/components/Mixins/BVToastMixin"; + +// Bootstrap-vue Plugin imports import { - ButtonPlugin + ButtonPlugin, + ToastPlugin } from 'bootstrap-vue'; export default ({ Vue }) => { Vue.use(ButtonPlugin); + Vue.use(ToastPlugin); + + // BMC Components and Mixins + Vue.mixin('BVToastMixin', BVToastMixin); }
\ No newline at end of file diff --git a/docs/guide/components/toast.md b/docs/guide/components/toast.md new file mode 100644 index 00000000..5dc2e0e9 --- /dev/null +++ b/docs/guide/components/toast.md @@ -0,0 +1,32 @@ +# Toasts +Use a toast message to indicate the status of a user action. For example, a user saves a form successfully, a toast message with the `success` variant is displayed. If the user action was not successful, a toast message with the `danger` variant is displayed. + +There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages. The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines. + +<BmcToasts /> + +```js{5} +// Sample method from Reboot BMC page +rebootBmc() { + this.$store + .dispatch('controls/rebootBmc') + .then(message => this.successToast(message)) + .catch(({ message }) => this.errorToast(message)); +} + +// Methods used in this example +methods: { + makeSuccessToast() { + this.successToast('This is a success toast and will be dismissed after 10 seconds.'); + }, + makeErrorToast() { + this.errorToast('This is an error toast and must be dismissed by the user.'); + }, + makeWarningToast() { + this.warningToast('This is a warning toast and must be dismissed by the user.'); + }, + makeInfoToast() { + this.infoToast('This is an info toast and must be dismissed by the user.'); + }, +} +```
\ No newline at end of file diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss index 538f9968..9295b17e 100644 --- a/src/assets/styles/_toast.scss +++ b/src/assets/styles/_toast.scss @@ -4,7 +4,7 @@ .toast { padding: $spacer/2 $spacer/2 $spacer/2 $spacer; - border-width: 0 0 0 5px; + border-width: 0 0 0 3px; .close { font-weight: 300; opacity: 1; @@ -25,12 +25,20 @@ .b-toast-success .toast { border-left-color: $success!important; + background-color: $success-light; +} + +.b-toast-info .toast { + border-left-color: $info!important; + background-color: $info-light; } .b-toast-danger .toast { border-left-color: $danger!important; + background-color: $danger-light; } .b-toast-warning .toast { border-left-color: $warning!important; + background-color: $warning-light; }
\ No newline at end of file diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js index 4fedc9a4..538bb93c 100644 --- a/src/components/Mixins/BVToastMixin.js +++ b/src/components/Mixins/BVToastMixin.js @@ -28,6 +28,15 @@ const BVToastMixin = { isStatus: true, solid: true }); + }, + infoToast(message, title = i18n.t('global.status.informational')) { + this.$root.$bvToast.toast(message, { + title, + variant: 'info', + noAutoHide: true, + isStatus: true, + solid: true + }); } } }; diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 0bf40513..1e676ee6 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -28,7 +28,8 @@ "off": "Off", "on": "On", "success": "Success", - "warning": "Warning" + "warning": "Warning", + "informational": "Informational" } }, "appHeader": { |