Merge pull request #1430 from nextcloud/design/delete-action

Remove delete action from list, fix #1368
nextcloud · Jan 23, 2020 · 11d448f · 11d448f
2 parents 32a7d9d + ee31758
commit 11d448f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 117 deletions.
diff --git 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
@@ -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
@@ -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
 		 */