diff options
| -rw-r--r-- | css/ContactsListItem.scss | 32 | ||||
| -rw-r--r-- | src/components/ContactsList/ContactsListItem.vue | 108 |
2 files changed, 23 insertions, 117 deletions
diff --git a/css/ContactsListItem.scss b/css/ContactsListItem.scss index 87e1cb06..e7c763e6 100644 --- a/css/ContactsListItem.scss +++ b/css/ContactsListItem.scss @@ -19,38 +19,6 @@ * along with this program. If not, see <http://www.gnu.org/licenses/>. * */ -// ensure transition for delete and non-deleted transition state -.app-content-list-item { - transition: left 200ms; -} - -.app-content-list-item.deleted { - z-index: 2; - // make sure we hide the undeleted element by sliding over it - // and force the background even on hover - background-color: var(--color-main-background) !important; - - .app-content-list-item-icon__avatar { - filter: brightness(.8) grayscale(1); - } - .app-content-list-item-line-one { - text-decoration: line-through; - } - - // vuejs animation - &.delete-slide-left-enter-active, - &.delete-slide-left-leave-active { - position: absolute; - top: 0; - left: 0; - width: 100%; - } - - &.delete-slide-left-enter, - &.delete-slide-left-leave-to { - left: 100%; - } -} .app-content-list-item-icon { overflow: hidden; 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() { |