Animate deletion

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

2 files changed, 44 insertions, 26 deletions

diff --git a/src/components/ContactsList.vue b/src/components/ContactsList.vue
index 44a26ac5..b59ab74a 100644
--- a/src/components/ContactsList.vue
+++ b/src/components/ContactsList.vue
@@ -33,6 +33,7 @@
 		key-field="key">
 		<template v-slot="{ item, index }">
 			<contacts-list-item
+				v-if="contacts[item.key]"
 				:key="item.key"
 				:contact="contacts[item.key]"
 				:index="index"
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue
index f4e683d1..b45d3ddc 100644
--- a/src/components/ContactsList/ContactsListItem.vue
+++ b/src/components/ContactsList/ContactsListItem.vue
@@ -1,33 +1,50 @@
 <template>
-	<div :id="id" :class="{active: selectedContact === contact.key, deleted: deleteTimeout}"
-		tabindex="0"
-		class="app-content-list-item" @click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact">
-		<!-- keyboard accessibility will focus the input and not the label -->
-		<!--
-		<input ref="selected" :id="contact.key" type="checkbox"
-			class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect">
-		<label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" />
-		-->
-		<div :style="{ 'backgroundColor': !deleteTimeout ? colorAvatar : 'grey' }" class="app-content-list-item-icon">
-			{{ contact.displayName | firstLetter }}
-			<!-- try to fetch the avatar only if the contact exists on the server -->
-			<div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" />
-		</div>
+	<transition name="delete-slide-left">
+		<div v-if="!deleteTimeout" :id="id"
+			:class="{active: selectedContact === contact.key}"
+			tabindex="0" class="app-content-list-item"
+			@click.prevent.stop="selectContact" @keypress.enter.prevent.stop="selectContact">
+			<!-- keyboard accessibility will focus the input and not the label -->
+			<!--
+			<input ref="selected" :id="contact.key" type="checkbox"
+				class="app-content-list-item-checkbox checkbox" @keypress.enter.space.prevent.stop="toggleSelect">
+			<label :for="contact.key" @click.prevent.stop="toggleSelect" @keypress.enter.space.prevent.stop="toggleSelect" />
+			-->
+			<div :style="{ 'backgroundColor': colorAvatar }" class="app-content-list-item-icon">
+				{{ contact.displayName | firstLetter }}
+				<!-- try to fetch the avatar only if the contact exists on the server -->
+				<div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" />
+			</div>
 
-		<!-- contact data -->
-		<div class="app-content-list-item-line-one">
-			{{ contact.displayName }}
-		</div>
-		<div v-if="contact.email && !deleteTimeout" class="app-content-list-item-line-two">
-			{{ contact.email }}
+			<!-- contact data -->
+			<div class="app-content-list-item-line-one">
+				{{ contact.displayName }}
+			</div>
+			<div v-if="contact.email" class="app-content-list-item-line-two">
+				{{ contact.email }}
+			</div>
+
+			<!-- undo actions -->
+			<div v-if="!contact.addressbook.readOnly && !deleteTimeout" class="icon-delete" tabindex="0"
+				@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
 		</div>
 
-		<!-- delete and undo actions -->
-		<div v-if="!contact.addressbook.readOnly && !deleteTimeout" class="icon-delete" tabindex="0"
-			@click.prevent.stop="deleteContact" @keypress.enter.prevent.stop="deleteContact" />
-		<div v-else-if="deleteTimeout" class="icon-history" tabindex="0"
-			@click.prevent.stop="cancelDeletion" @keypress.enter.prevent.stop="cancelDeletion" />
-	</div>
+		<!-- Deleted contact (pending) -->
+		<div v-else :id="id" key="deleted"
+			class="deleted app-content-list-item">
+			<div :style="{ backgroundColor: 'grey' }" class="app-content-list-item-icon">
+				{{ contact.displayName | firstLetter }}
+				<!-- try to fetch the avatar only if the contact exists on the server -->
+				<div v-if="hasPhoto" :style="{ 'backgroundImage': avatarUrl }" class="app-content-list-item-icon__avatar" />
+			</div>
+			<!-- contact data -->
+			<div class="app-content-list-item-line-one">
+				{{ contact.displayName }}
+			</div>
+			<div class="icon-history" tabindex="0"
+				@click.prevent.stop="cancelDeletion" @keypress.enter.prevent.stop="cancelDeletion" />
+		</div>
+	</transition>
 </template>
 
 <script>