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 @@