snackbar component

src/IbtSnackbar.vue

@@ -0,0 +1,30 @@
+<template>
+    <md-snackbar md-position="top center" ref="snackbar">
+        <span>{{ snackbackMessage }}</span>
+        <md-button @click="$refs.snackbar.close()" class="snackbar-close">[x]</md-button>
+    </md-snackbar>
+</template>
+<script>
+
+export default {
+    data: function() {
+        return {snackbackMessage: 'something happened'};
+    },
+
+    methods: {
+        show(message) {
+            this.snackbackMessage = message || snackbackMessage;
+            this.$refs.snackbar.open();
+        }
+    }
+}
+
+</script>
+<style>
+
+.snackbar-close {
+    font-weight: bold;
+    color: #f6f72f;
+}
+
+</style>

src/Toolbar.vue

@@ -45,23 +45,20 @@
                 </span>
             </span>
         </span>
-        <md-snackbar md-position="top center" ref="snackbar">
+        <ibt-snackbar ref="snackbarObj" />
-            <span>{{ snackbackMessage }}</span>
-            <md-button @click="$refs.snackbar.close()" class="snackbar-close">[x]</md-button>
-        </md-snackbar>
         <ibt-dialog ref="dialogObj" />
     </md-toolbar>
 </template>
 <script>
 
 import IbtDialog from './IbtDialog.vue';
+import IbtSnackbar from './IbtSnackbar.vue';
 
 export default {
     data () {
         return {
             username: '',
             password: '',
-            snackbackMessage: '',
             dialog: {
                 text: 'some error',
                 ok: 'ok'
@@ -146,7 +143,7 @@ export default {
                 this.$refs.dialogObj.show({text: 'failed to logout'});
             }).then((json) => {
                 this.$store.commit('clearLoggedInUser');
-                this.showMessage('logged out');
+                this.$refs.snackbarObj.show('logged out');
             });
         },
 
@@ -175,15 +172,10 @@ export default {
                     callback(data);
                 }
             });
-        },
-
-        showMessage(message) {
-            this.snackbackMessage = message;
-            this.$refs.snackbar.open();
         }
     },
 
-    components: { IbtDialog }
+    components: { IbtDialog, IbtSnackbar }
 }
 </script>
 <style>
@@ -251,10 +243,4 @@ export default {
     font-weight: bold;
     color: white !important;
 }
-
-.snackbar-close {
-    font-weight: bold;
-    color: #f6f72f;
-}
-
 </style>

src/User.vue

@@ -19,12 +19,14 @@
                 <md-button class="md-raised md-primary" @click="save()">Save</md-button>
             </md-card-content>
         </md-card>
+        <ibt-snackbar ref="snackbarObj" />
         <ibt-dialog ref="dialogObj" />
     </div>
 </template>
 <script>
 
 import IbtDialog from './IbtDialog.vue';
+import IbtSnackbar from './IbtSnackbar.vue';
 
 export default {
     data () {
@@ -67,11 +69,12 @@ export default {
                 this.$refs.dialogObj.show({text: 'unable to save user settings'});
             }).then((data) => {
                 this.user = data;
+                this.$refs.snackbarObj.show('user saved');
             });
         }
     },
 
-    components: { IbtDialog }
+    components: { IbtDialog, IbtSnackbar }
 }
 </script>