From 0760afe2ee13f55ac253ec4dc05b4b59a6dd74db Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?=
 <skjnldsv@protonmail.com>
Date: Mon, 1 Apr 2019 14:35:43 +0200
Subject: Add countdown tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
---
 src/components/ContactsList/ContactsListItem.vue | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/components')

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
 		},
 
 		/**
-- 
cgit v1.2.3