From cb1be0007b7d9ce8f3748a2a28605af31ff12c78 Mon Sep 17 00:00:00 2001
From: "kyle.watson" <kyle.watson@samsonvt.com>
Date: Sun, 14 Jun 2020 22:13:35 +0100
Subject: [PATCH] Added toast component

---
 src/renderer/App.js                           |  4 ++-
 src/renderer/App.vue                          |  1 +
 src/renderer/components/ft-toast/ft-toast.css | 31 +++++++++++++++++
 src/renderer/components/ft-toast/ft-toast.js  | 33 +++++++++++++++++++
 src/renderer/components/ft-toast/ft-toast.vue | 12 +++++++
 5 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/ft-toast/ft-toast.css
 create mode 100644 src/renderer/components/ft-toast/ft-toast.js
 create mode 100644 src/renderer/components/ft-toast/ft-toast.vue

diff --git a/src/renderer/App.js b/src/renderer/App.js
index 4930836f..f7d45d8f 100644
--- a/src/renderer/App.js
+++ b/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 () {
diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 187e4b0d..2393a4c2 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -14,6 +14,7 @@
       />
       <!-- </keep-alive> -->
     </Transition>
+    <ft-toast ref="toast" message="hello world" :action="toastAction" />
   </div>
 </template>
 
diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
new file mode 100644
index 00000000..4098ac3c
--- /dev/null
+++ b/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;
+}
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
new file mode 100644
index 00000000..b835370a
--- /dev/null
+++ b/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)
+    },
+  },
+})
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
new file mode 100644
index 00000000..23f95ecb
--- /dev/null
+++ b/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" />
\ No newline at end of file