diff options
author | SurenNeware <sneware9@in.ibm.com> | 2020-08-07 15:52:47 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-08-12 00:40:22 +0300 |
commit | 57b2262843db8724ecbfbcc6cef0906d736f2834 (patch) | |
tree | e32cf72468094e79d4674ba85a2644c54114d07a /src/components/Global | |
parent | e409b738ed46becc9d04120c7a4227e7f52b3072 (diff) | |
download | webui-vue-57b2262843db8724ecbfbcc6cef0906d736f2834.tar.xz |
Add info icon for informational alert
-Add new style carbon icon for informational alert
-Change alert icon position from center to top
Signed-off-by: Suren Neware <sneware9@in.ibm.com>
Change-Id: If32d712db16472ce9a78e04e5871d0b799bb5895
Diffstat (limited to 'src/components/Global')
-rw-r--r-- | src/components/Global/Alert.vue | 18 | ||||
-rw-r--r-- | src/components/Global/StatusIcon.vue | 8 |
2 files changed, 21 insertions, 5 deletions
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue index 2008536a..a049a08b 100644 --- a/src/components/Global/Alert.vue +++ b/src/components/Global/Alert.vue @@ -1,12 +1,22 @@ <template> <b-alert :show="show" :variant="variant" :class="{ small }"> - <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <div + v-if=" + variant == 'info' || + variant == 'success' || + variant == 'warning' || + variant == 'danger' + " + class="alert-icon" + > <status-icon :status="variant" /> </div> - <div class="alert-content d-inline-flex align-items-center"> - <div class="alert-msg"><slot /></div> + <div class="alert-content"> + <div class="alert-msg"> + <slot /> + </div> </div> - <div class="alert-action d-inline-flex align-items-center"> + <div class="alert-action"> <slot name="action"></slot> </div> </b-alert> diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue index 6de6d310..bf58722a 100644 --- a/src/components/Global/StatusIcon.vue +++ b/src/components/Global/StatusIcon.vue @@ -1,6 +1,7 @@ <template> <span :class="['status-icon', status]"> - <icon-success v-if="status === 'success'" /> + <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 /> @@ -8,6 +9,7 @@ </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'; @@ -16,6 +18,7 @@ import IconMisuse from '@carbon/icons-vue/es/misuse/20'; export default { name: 'StatusIcon', components: { + IconInfo: IconInfo, iconSuccess: IconCheckmark, iconDanger: IconMisuse, iconSecondary: IconError, @@ -33,6 +36,9 @@ export default { <style lang="scss" scoped> .status-icon { vertical-align: text-bottom; + &.info { + fill: theme-color('info'); + } &.success { fill: theme-color('success'); } |