diff options
author | Derick Montague <derick.montague@ibm.com> | 2020-03-03 15:11:48 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-03-12 20:59:42 +0300 |
commit | 71650fff20c0ad29eb05d770736386863324b64e (patch) | |
tree | 2c3a71a9c71ab7c70f2d1ed0e5e7a437144e339f /src | |
parent | 36016e45acae516045cbb74be40e74881a5fc95f (diff) | |
download | webui-vue-71650fff20c0ad29eb05d770736386863324b64e.tar.xz |
Add alert message component and documentation
- Add custom alert component to simplify the use of custom alerts
- Add documentation for using the custom alert
- Update the login error alert to use the alert component instead of
the Bootstrap-vue component.
- Add the enhanceApp and bmcAppPlugin to extend vuepress to use both
the BMC custom and Boostrap-Vue components along with the custom styles
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5c0b696ca47ddba0df18041d6c5ee7509bf23572
Diffstat (limited to 'src')
-rw-r--r-- | src/assets/styles/_alerts.scss | 58 | ||||
-rw-r--r-- | src/assets/styles/_obmc-custom.scss | 1 | ||||
-rw-r--r-- | src/components/Global/Alert.vue | 33 | ||||
-rw-r--r-- | src/locales/en-US.json | 3 | ||||
-rw-r--r-- | src/locales/es.json | 3 | ||||
-rw-r--r-- | src/views/Login/Login.vue | 27 |
6 files changed, 100 insertions, 25 deletions
diff --git a/src/assets/styles/_alerts.scss b/src/assets/styles/_alerts.scss new file mode 100644 index 00000000..816ad33b --- /dev/null +++ b/src/assets/styles/_alerts.scss @@ -0,0 +1,58 @@ +.alert { + display: flex; + padding: $spacer; + border-width: 0 0 0 3px; + color: $gray-800; + margin-bottom: $spacer; + + .close { + font-weight: 300; + opacity: 1; + } + + .alert-icon { + flex: 0 0 20px; + margin-right: $spacer; + margin-bottom: $spacer; + + @include media-breakpoint-up(sm) { + margin-bottom: 0; + } + } + + .alert-content { + flex: 1 1 auto; + } + + .alert-title { + margin-bottom: $spacer / 2; + } + + .alert-msg { + p + p { + margin-bottom: $spacer; + } + + p:last-of-type { + margin-bottom: 0; + } + } + + &.alert-info { + border-left-color: $info; + background-color: $info-light; + fill: $info; + } + + &.alert-danger { + border-left-color: $danger; + background-color: $danger-light; + fill: $danger; + } + + &.alert-warning { + border-left-color: $warning; + background-color: $warning-light; + fill: $warning; + } + }
\ No newline at end of file diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index 66cebda2..2a8d896a 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -39,6 +39,7 @@ @import "~bootstrap-vue/src/index.scss"; +@import "./alerts"; @import "./buttons"; @import "./form-components"; @import "./modal"; diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue new file mode 100644 index 00000000..bc65b6e9 --- /dev/null +++ b/src/components/Global/Alert.vue @@ -0,0 +1,33 @@ +<template> + <b-alert :show="show" :variant="variant"> + <div v-if="variant == 'warning' || variant == 'danger'" class="alert-icon"> + <status-icon :status="variant" /> + </div> + <div class="alert-content"> + <div class="alert-msg"><slot /></div> + </div> + </b-alert> +</template> + +<script> +import StatusIcon from '../Global/StatusIcon'; +import { BAlert } from 'bootstrap-vue'; + +export default { + name: 'Alert', + components: { + BAlert: BAlert, + StatusIcon: StatusIcon + }, + props: { + show: { + type: Boolean, + default: true + }, + variant: { + type: String, + default: '' + } + } +}; +</script> diff --git a/src/locales/en-US.json b/src/locales/en-US.json index 0bf40513..019d5461 100644 --- a/src/locales/en-US.json +++ b/src/locales/en-US.json @@ -133,8 +133,7 @@ "password": "Password", "username": "Username", "alert": { - "title": "Invalid username or password", - "action": "Try again after verifying your username and password are correct." + "message": "Invalid username or password" } }, "pageOverview": { diff --git a/src/locales/es.json b/src/locales/es.json index 48ed7748..a3e3ee09 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -16,8 +16,7 @@ "password": "Contraseña", "username": "Nombre de usuario", "alert": { - "title": "Usuario o contraseña invalido.", - "action": "Inténtalo de nuevo." + "message": "Usuario o contraseña invalido" }, "form": { "english": "Inglés", diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue index 2018720c..bdf2a6ac 100644 --- a/src/views/Login/Login.vue +++ b/src/views/Login/Login.vue @@ -15,12 +15,11 @@ </b-col> <b-col md="6"> <b-form class="login-form" novalidate @submit.prevent="login"> - <b-alert class="login-error" :show="authError" variant="danger"> + <alert class="login-error" :show="authError" variant="danger"> <p id="login-error-alert"> - <strong>{{ $t('pageLogin.alert.title') }}</strong> - <span>{{ $t('pageLogin.alert.action') }}</span> + {{ $t('pageLogin.alert.message') }} </p> - </b-alert> + </alert> <div class="login-form__section"> <label for="language">{{ $t('pageLogin.language') }}</label> <b-form-select @@ -83,9 +82,11 @@ import { required } from 'vuelidate/lib/validators'; import VuelidateMixin from '../../components/Mixins/VuelidateMixin.js'; import i18n from '../../i18n'; +import Alert from '../../components/Global/Alert'; export default { name: 'Login', + components: { Alert }, mixins: [VuelidateMixin], data() { return { @@ -173,24 +174,8 @@ export default { margin-bottom: $spacer; } -.login-error { +.alert.login-error { margin-bottom: $spacer * 2; - - p { - margin-bottom: 0; - } - - strong { - display: block; - font-size: 1rem; - font-weight: 600; - margin-bottom: 0; - } - - strong + span { - margin-top: $spacer / 2; - margin-bottom: 0; - } } .login-branding { |