diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/styles/bmc/custom/_toasts.scss | 9 | ||||
-rw-r--r-- | src/components/Mixins/BVToastMixin.js | 27 |
2 files changed, 29 insertions, 7 deletions
diff --git a/src/assets/styles/bmc/custom/_toasts.scss b/src/assets/styles/bmc/custom/_toasts.scss index dcc3985a..b8ec246e 100644 --- a/src/assets/styles/bmc/custom/_toasts.scss +++ b/src/assets/styles/bmc/custom/_toasts.scss @@ -2,8 +2,9 @@ top: 75px!important; // make sure toasts do not hide top header } +// Toast component and status icon style .toast { - padding: $spacer/2 $spacer/2 $spacer/2 $spacer; + padding: $spacer/2 $spacer/2 $spacer/2 $spacer+2; border-width: 0 0 0 3px; box-shadow: $box-shadow; .close { @@ -12,6 +13,12 @@ } } +.toast-icon svg { + position: absolute; + top: 20px; + left: 20px; +} + .toast-header { background-color: inherit!important; //override specificity border: none; diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js index 538bb93c..95ac5312 100644 --- a/src/components/Mixins/BVToastMixin.js +++ b/src/components/Mixins/BVToastMixin.js @@ -1,10 +1,25 @@ -import i18n from '../../i18n'; - +import i18n from '@/i18n'; +import StatusIcon from '../Global/StatusIcon'; const BVToastMixin = { + components: { + StatusIcon + }, methods: { + toastTitle(title, status) { + // Create title with icon + const titleWithIcon = this.$createElement( + 'strong', + { class: 'toast-icon' }, + [ + this.$createElement('StatusIcon', { props: { status: status } }), + title + ] + ); + return titleWithIcon; + }, successToast(message, title = i18n.t('global.status.success')) { this.$root.$bvToast.toast(message, { - title, + title: this.toastTitle(title, 'success'), variant: 'success', autoHideDelay: 10000, //auto hide in milliseconds isStatus: true, @@ -13,7 +28,7 @@ const BVToastMixin = { }, errorToast(message, title = i18n.t('global.status.error')) { this.$root.$bvToast.toast(message, { - title, + title: this.toastTitle(title, 'danger'), variant: 'danger', noAutoHide: true, isStatus: true, @@ -22,7 +37,7 @@ const BVToastMixin = { }, warningToast(message, title = i18n.t('global.status.warning')) { this.$root.$bvToast.toast(message, { - title, + title: this.toastTitle(title, 'warning'), variant: 'warning', noAutoHide: true, isStatus: true, @@ -31,7 +46,7 @@ const BVToastMixin = { }, infoToast(message, title = i18n.t('global.status.informational')) { this.$root.$bvToast.toast(message, { - title, + title: this.toastTitle(title, 'info'), variant: 'info', noAutoHide: true, isStatus: true, |