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
diff --git a/src/assets/styles/_toast.scss b/src/assets/styles/_toast.scss
new file mode 100644
index 0000000..3f2f08c
--- /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