diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-10-09 19:17:48 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-10-20 18:59:54 +0300 |
commit | caaf7baff0b5995ef6c8fef213f1ec7af34ca911 (patch) | |
tree | 07ec4ee03a9a2c594d4914ca853d97573aa06f50 /docs | |
parent | 0a5b9c6dcd063144896dbdc42f24c681b8b9267c (diff) | |
download | webui-vue-caaf7baff0b5995ef6c8fef213f1ec7af34ca911.tar.xz |
Fix documentation render bug
Using the i18n module in the BVToastMixin file caused an issue with
VuePress that resulted in the static files not being created and the
documentation rendering as a blank page.
- Removed the import of the BVToastMixin
- Copied BVToastMixin to docs components and removed i18n
- Copied the StatusIcon to docs components to so icons will render
with the correct fill color in the toast notifications
GitHub Issue: https://github.com/openbmc/webui-vue/issues/40
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ie479df17d529ad2803c41e7442801e13601a0a02
Diffstat (limited to 'docs')
-rw-r--r-- | docs/.vuepress/components/BmcToasts.vue | 2 | ||||
-rw-r--r-- | docs/.vuepress/components/app-imports/BVToastMixin.js | 58 | ||||
-rw-r--r-- | docs/.vuepress/components/app-imports/StatusIcon.vue | 61 | ||||
-rw-r--r-- | docs/.vuepress/config.js | 9 | ||||
-rw-r--r-- | docs/.vuepress/enhanceApp.js | 2 |
5 files changed, 129 insertions, 3 deletions
diff --git a/docs/.vuepress/components/BmcToasts.vue b/docs/.vuepress/components/BmcToasts.vue index 4c9d30f3..6f90d1f1 100644 --- a/docs/.vuepress/components/BmcToasts.vue +++ b/docs/.vuepress/components/BmcToasts.vue @@ -8,7 +8,7 @@ </template> <script> -import BVToastMixin from '@/src/components/Mixins/BVToastMixin'; +import BVToastMixin from './app-imports/BVToastMixin'; export default { name: 'BmcToasts', mixins: [BVToastMixin], diff --git a/docs/.vuepress/components/app-imports/BVToastMixin.js b/docs/.vuepress/components/app-imports/BVToastMixin.js new file mode 100644 index 00000000..10075658 --- /dev/null +++ b/docs/.vuepress/components/app-imports/BVToastMixin.js @@ -0,0 +1,58 @@ +import StatusIcon from './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 = 'Success') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'success'), + variant: 'success', + autoHideDelay: 10000, //auto hide in milliseconds + isStatus: true, + solid: true + }); + }, + errorToast(message, title = 'Error') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'danger'), + variant: 'danger', + noAutoHide: true, + isStatus: true, + solid: true + }); + }, + warningToast(message, title = 'Warning') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'warning'), + variant: 'warning', + noAutoHide: true, + isStatus: true, + solid: true + }); + }, + infoToast(message, title = 'Informational') { + this.$root.$bvToast.toast(message, { + title: this.toastTitle(title, 'info'), + variant: 'info', + noAutoHide: true, + isStatus: true, + solid: true + }); + } + } +}; + +export default BVToastMixin; diff --git a/docs/.vuepress/components/app-imports/StatusIcon.vue b/docs/.vuepress/components/app-imports/StatusIcon.vue new file mode 100644 index 00000000..954e4775 --- /dev/null +++ b/docs/.vuepress/components/app-imports/StatusIcon.vue @@ -0,0 +1,61 @@ +<template> + <span :class="['status-icon', status]"> + <icon-info v-if="status === 'info'" /> + <icon-success v-else-if="status === 'success'" /> + <icon-warning v-else-if="status === 'warning'" /> + <icon-danger v-else-if="status === 'danger'" /> + <icon-secondary v-else /> + </span> +</template> + +<script> +import IconInfo from '@carbon/icons-vue/es/information--filled/20'; +import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; +import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; +import IconError from '@carbon/icons-vue/es/error--filled/20'; +import IconMisuse from '@carbon/icons-vue/es/misuse/20'; + +export default { + name: 'StatusIcon', + components: { + IconInfo: IconInfo, + iconSuccess: IconCheckmark, + iconDanger: IconMisuse, + iconSecondary: IconError, + iconWarning: IconWarning + }, + props: { + status: { + type: String, + default: '' + } + } +}; +</script> + +<style lang="scss" scoped> +@import "src/assets/styles/bmc/helpers"; +@import "src/assets/styles/bootstrap/helpers"; +.status-icon { + vertical-align: text-bottom; + &.info { + fill: theme-color('info'); + } + &.success { + fill: theme-color('success'); + } + &.danger { + fill: theme-color('danger'); + } + &.secondary { + fill: gray('600'); + + svg { + transform: rotate(-45deg); + } + } + &.warning { + fill: theme-color('warning'); + } +} +</style> diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index dd112e61..8b7be97c 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -1,3 +1,5 @@ +const path = require('path'); + module.exports = { base: "/webui-vue/", title: "OpenBMC Web UI Style Guide", @@ -53,5 +55,12 @@ module.exports = { ], "/themes/": ["", "customize"] }, + }, + configureWebpack: { + resolve: { + alias: { + '@': path.resolve(__dirname, '../../src') + } + } } };
\ No newline at end of file diff --git a/docs/.vuepress/enhanceApp.js b/docs/.vuepress/enhanceApp.js index 9a3b2b64..c0f3dfba 100644 --- a/docs/.vuepress/enhanceApp.js +++ b/docs/.vuepress/enhanceApp.js @@ -1,7 +1,6 @@ import "./styles/_index.scss"; import Alert from "../../src/components/Global/Alert"; -import BVToastMixin from "../../src/components/Mixins/BVToastMixin"; // Bootstrap-vue Plugin imports import { @@ -18,5 +17,4 @@ export default ({ Vue }) => { // BMC Components and Mixins Vue.component('Alert', Alert); - Vue.mixin('BVToastMixin', BVToastMixin); }
\ No newline at end of file |