diff options
author | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-04-01 14:35:43 +0200 |
---|---|---|
committer | John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com> | 2019-04-01 14:35:43 +0200 |
commit | 0760afe2ee13f55ac253ec4dc05b4b59a6dd74db (patch) | |
tree | fa2ad852312210b3295c44019beb3762e54b9feb /src | |
parent | ee0dc5909ad29b6bc2a70ad4b8fc90dd2ab13144 (diff) |
Add countdown tooltip
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index b45d3ddc..64a0b62e 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -42,6 +42,7 @@ {{ contact.displayName }} </div> <div class="icon-history" tabindex="0" + v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })" @click.prevent.stop="cancelDeletion" @keypress.enter.prevent.stop="cancelDeletion" /> </div> </transition> @@ -67,7 +68,9 @@ export default { }, data() { return { - deleteTimeout: null + deleteInterval: null, + deleteTimeout: null, + countdown: 7 } }, computed: { @@ -120,15 +123,24 @@ export default { * Dispatch contact deletion request */ deleteContact() { + this.deleteInterval = setInterval(() => { + this.countdown-- + }, 1000) this.deleteTimeout = setTimeout(() => { this.$store.dispatch('deleteContact', { contact: this.contact }) this.$emit('deleted', this.index) + // reset + clearInterval(this.deleteInterval) + this.countdown = 7 }, 7000) }, cancelDeletion() { clearTimeout(this.deleteTimeout) + clearInterval(this.deleteInterval) this.deleteTimeout = null + this.deleteInterval = null + this.countdown = 7 }, /** |