diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2020-02-05 22:23:06 +0300 |
---|---|---|
committer | Gunnar Mills <gmills@us.ibm.com> | 2020-02-13 17:35:20 +0300 |
commit | 0fc91e798d058c1c98dcfec0c6c5bffbcab3e15e (patch) | |
tree | b3458f2bc016e357fa060198ee2979a6e1d6f4ae /src/assets | |
parent | 0a3405f78a7ad0846c038d9b0ebe3a09b0c21579 (diff) | |
download | webui-vue-0fc91e798d058c1c98dcfec0c6c5bffbcab3e15e.tar.xz |
Add toast component interactions
Include boostrap toast component to communicate success
and error requests on the local user management page.
- Created BVToastMixin to share initialization options
- Used async/await pattern to make sure toasts are shown
after asynchronous calls are complete
- Followed current AngularJS pattern of manual dismiss for
error toast and automatic dismiss for success toast
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I5d5c037b5f41781972106fb5e9a2096cc72c39ab
Diffstat (limited to 'src/assets')
-rw-r--r-- | src/assets/styles/_obmc-custom.scss | 3 | ||||
-rw-r--r-- | src/assets/styles/_toast.scss | 32 |
2 files changed, 34 insertions, 1 deletions
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss index d20e64e4..2e360193 100644 --- a/src/assets/styles/_obmc-custom.scss +++ b/src/assets/styles/_obmc-custom.scss @@ -56,4 +56,5 @@ $colors: map-remove($theme-colors, "light", "dark"); @import "./buttons"; @import "./form-components"; @import "./modal"; -@import "./table";
\ No newline at end of file +@import "./table"; +@import "./toast";
\ No newline at end of file diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss new file mode 100644 index 00000000..3f2f08c0 --- /dev/null +++ b/src/assets/styles/_toast.scss @@ -0,0 +1,32 @@ +.b-toaster { + top: 75px!important; // make sure toasts do not hide top header +} + +.toast { + padding: $spacer/2 $spacer/2 $spacer/2 $spacer; + border-width: 0 0 0 5px; + .close { + font-weight: 300; + opacity: 1; + } +} + +.toast-header { + background-color: inherit!important; //override specificity + border: none; + color: $dark!important; //override specificity + padding-bottom: 0; +} + +.toast-body { + color: $dark; + padding-top: 0; +} + +.b-toast-success .toast { + border-left-color: $success!important; +} + +.b-toast-danger .toast { + border-left-color: $danger!important; +}
\ No newline at end of file |