diff --git a/css/ContactsListItem.scss b/css/ContactsListItem.scss index e8bc8bdf6..a18acb6e7 100644 --- a/css/ContactsListItem.scss +++ b/css/ContactsListItem.scss @@ -19,6 +19,14 @@ * along with this program. If not, see . * */ +.app-content-list-item.deleted { + .app-content-list-item-icon__avatar { + filter: brightness(.8) grayscale(1); + } + .app-content-list-item-line-one { + text-decoration: line-through; + } +} .app-content-list-item-icon { overflow: hidden; diff --git a/src/components/ContactsList/ContactsListItem.vue b/src/components/ContactsList/ContactsListItem.vue index 8838aa760..f4e683d11 100644 --- a/src/components/ContactsList/ContactsListItem.vue +++ b/src/components/ContactsList/ContactsListItem.vue @@ -1,5 +1,5 @@ @@ -42,6 +48,11 @@ export default { required: true } }, + data() { + return { + deleteTimeout: null + } + }, computed: { selectedGroup() { return this.$route.params.selectedGroup @@ -72,6 +83,9 @@ export default { } }, avatarUrl() { + if (this.contact.photo) { + return `url(${this.contact.photo})` + } return `url(${this.contact.url}?photo)` } }, @@ -89,8 +103,15 @@ export default { * Dispatch contact deletion request */ deleteContact() { - this.$store.dispatch('deleteContact', { contact: this.contact }) - this.$emit('deleted', this.index) + this.deleteTimeout = setTimeout(() => { + this.$store.dispatch('deleteContact', { contact: this.contact }) + this.$emit('deleted', this.index) + }, 7000) + }, + + cancelDeletion() { + clearTimeout(this.deleteTimeout) + this.deleteTimeout = null }, /**