diff options
author | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2020-01-19 13:21:57 +0100 |
---|---|---|
committer | Jan-Christoph Borchardt <hey@jancborchardt.net> | 2020-01-23 09:38:11 +0700 |
commit | ee31758de73c9ed58a8494636b2d13585348d981 (patch) | |
tree | 65914ec6034b5e65ed8343dcc9722fbdfdab2ff0 /src | |
parent | 32a7d9d775342a45c4c833aad1561a762b26e701 (diff) |
Remove delete action from list, fix #1368
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 108 |
1 files changed, 23 insertions, 85 deletions
diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index 40a0ef87..b6ecad5b 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -1,61 +1,30 @@ <template> - <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" 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 :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> - <!-- 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 v-tooltip.auto="t('contacts', 'Deleting the contact in {countdown} seconds', { countdown })" - class="icon-history" - tabindex="0" - @click.prevent.stop="cancelDeletion" - @keypress.enter.prevent.stop="cancelDeletion" /> + <!-- 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> - </transition> + </div> </template> <script> @@ -76,13 +45,6 @@ export default { required: true, }, }, - data() { - return { - deleteInterval: null, - deleteTimeout: null, - countdown: 7, - } - }, computed: { selectedGroup() { return this.$route.params.selectedGroup @@ -130,30 +92,6 @@ 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 - }, - - /** * Select this contact within the list */ selectContact() { |