Added toast component

src/renderer/App.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import TopNav from './components/top-nav/top-nav.vue'
 import SideNav from './components/side-nav/side-nav.vue'
+import FtToast from './components/ft-toast/ft-toast.vue'
 import $ from 'jquery'
 
 let useElectron
@@ -18,7 +19,8 @@ export default Vue.extend({
   name: 'App',
   components: {
     TopNav,
-    SideNav
+    SideNav,
+    FtToast,
   },
   computed: {
     isOpen: function () {

src/renderer/App.vue

@@ -14,6 +14,7 @@
       />
       <!-- </keep-alive> -->
     </Transition>
+    <ft-toast ref="toast" message="hello world" :action="toastAction" />
   </div>
 </template>
 

src/renderer/components/ft-toast/ft-toast.css

@@ -0,0 +1,31 @@
+.toast {
+  display: flex;
+  height: 60px;
+  width: 200px;
+  overflow-y: auto;
+  position: fixed;
+  left: calc(50vw - 100px);
+  bottom: 100px;
+  text-align: center;
+  z-index: 100;
+  background-color: var(--card-bg-color);
+  opacity: 0;
+  border-radius: 20px;
+  cursor: pointer;
+}
+
+.message {
+  margin: auto;
+}
+
+.open {
+  visibility: visible;
+  opacity: 1;
+  transition: visibility 0s linear 0s, opacity 300ms;
+}
+
+.closed {
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0s linear 300ms, opacity 300ms;
+}

src/renderer/components/ft-toast/ft-toast.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'FtToast',
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    action: {
+      type: Function,
+      default: function () {},
+    },
+  },
+  data: function () {
+    return {
+      isOpen: false,
+    }
+  },
+  methods: {
+    performAction: function () {
+      this.action()
+      this.close()
+    },
+    close: function () {
+      this.isOpen = false
+    },
+    open: function () {
+      this.isOpen = true
+      setTimeout(this.close, 2000)
+    },
+  },
+})

src/renderer/components/ft-toast/ft-toast.vue

@@ -0,0 +1,12 @@
+<template>
+  <div
+    ref="toast"
+    class="toast"
+    :class="{ closed: !isOpen, open: isOpen }"
+    @click="performAction()"
+  >
+  <p class="message"> {{ message }} </p></div>
+</template>
+
+<script src="./ft-toast.js" />
+<style scoped src="./ft-toast.css" />