diff --git a/src/renderer/components/ft-toast/ft-toast.css b/src/renderer/components/ft-toast/ft-toast.css
index 4c1e5309..3540f99c 100644
--- a/src/renderer/components/ft-toast/ft-toast.css
+++ b/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;
diff --git a/src/renderer/components/ft-toast/ft-toast.js b/src/renderer/components/ft-toast/ft-toast.js
index 27c87c36..431ea3ee 100644
--- a/src/renderer/components/ft-toast/ft-toast.js
+++ b/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)
diff --git a/src/renderer/components/ft-toast/ft-toast.vue b/src/renderer/components/ft-toast/ft-toast.vue
index 23f95ecb..b0e33953 100644
--- a/src/renderer/components/ft-toast/ft-toast.vue
+++ b/src/renderer/components/ft-toast/ft-toast.vue
@@ -1,11 +1,15 @@
-
+