Remove delete action from list, fix #1368
Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>
This commit is contained in:
Jan-Christoph Borchardt
parent
32a7d9d775
commit
ee31758de7
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</transition>
|
||||
<div v-if="contact.email" class="app-content-list-item-line-two">
|
||||
{{ contact.email }}
|
||||
</div>
|
||||
</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
|
||||
|
|
@ -129,30 +91,6 @@ export default {
|
|||
this.$refs.selected.checked = !this.$refs.selected.checked
|
||||
},
|
||||
|
||||
/**
|
||||
* 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
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue