Added 5 toast max shown

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

@@ -1,12 +1,15 @@
+.toast-holder {
+  position: fixed;
+  left: 50vw;
+  transform: translate(-50%, 0);
+  bottom: 50px;
+  z-index: 1;
+}
+
 .toast {
   display: flex;
   padding: 10px;
   overflow-y: auto;
-  position: fixed;
-  left: 50vw;
-  transform: translate(-50%, 0);
-  bottom: 100px;
-  z-index: 1;
   background-color: var(--primary-input-color);
   opacity: 0;
   border-radius: 20px;

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

@@ -5,9 +5,13 @@ export default Vue.extend({
   name: 'FtToast',
   data: function () {
     return {
-      isOpen: false,
-      message: '',
-      action: () => {},
+      toasts: [
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null},
+        {isOpen: false, message: '', action: null, timeout: null}
+      ],
       queue: [],
     }
   },
@@ -15,27 +19,32 @@ export default Vue.extend({
     FtToastEvents.$on('toast.open', this.open)
   },
   methods: {
-    performAction: function () {
-      this.action()
-      this.close()
+    performAction: function (index) {
+      this.toasts[index].action()
+      this.close(index)
     },
-    close: function () {
-      this.isOpen = false
+    close: function (index) {
+      clearTimeout(this.toasts[index].timeout);
+      this.toasts[index].isOpen = false
       if(this.queue.length !== 0) {
         const toast = this.queue.shift()
         this.open(toast.message, toast.action)
       }
     },
     open: function (message, action) {
-      if (this.isOpen) {
-        this.queue.push({ message: message, action: action })
-        return
+      for(let i = this.toasts.length - 1; i >= 0 ; i--){
+        if (!this.toasts[i].isOpen) {
+          return this.showToast(message, action, i)
+        }
       }
-      this.message = message
-      this.action = action || (() => {});
-      this.isOpen = true
-      setTimeout(this.close, 2000)
+      this.queue.push({ message: message, action: action })
     },
+    showToast: function(message, action, index) {
+      this.toasts[index].message = message
+      this.toasts[index].action = action || (() => {})
+      this.toasts[index].isOpen = true
+      this.toasts[index].timeout = setTimeout(this.close, 2000, index)
+    }
   },
   beforeDestroy: function () {
     FtToastEvents.$off('toast.open', this.open)

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

@@ -1,11 +1,15 @@
 <template>
-  <div
-    ref="toast"
-    class="toast"
-    :class="{ closed: !isOpen, open: isOpen }"
-    @click="performAction()"
-  >
-  <p class="message"> {{ message }} </p></div>
+  <div class="toast-holder">
+    <div
+      v-for="(toast, index) in toasts"
+      :key="'toast-' + index"
+      class="toast"
+      :class="{ closed: !toast.isOpen, open: toast.isOpen }"
+      @click="performAction(index)"
+    >
+      <p class="message">{{ toast.message }}</p>
+    </div>
+  </div>
 </template>
 
 <script src="./ft-toast.js" />