diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-04 03:11:44 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-20 21:26:36 +0300 |
commit | 4e90eed0a2b03b675f93bd3e731cb72101266c47 (patch) | |
tree | 7c368efeebf7ba57f30144bff9cd31f57e41b055 /src | |
parent | 3f6710a09c953405cc0bc8014eab89887122b17d (diff) | |
download | webui-vue-4e90eed0a2b03b675f93bd3e731cb72101266c47.tar.xz |
Add toast component documentation
- Add documentation that describes when and how to use a toast message
with code snippets
- Add an informational toast method in the BVToastMixin
- Add BVToastMixin to enhaceApp to register mixin globally.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I89bf2aa8b3fdb9294354a80c98ccf692b6e3615a
Diffstat (limited to 'src')
-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 |
3 files changed, 20 insertions, 2 deletions
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": { |