Add ability to remove files from selection

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
nextcloud · Aug 5, 2020 · 8291ec3 · 8291ec3
1 parent 06d6791
commit 8291ec3
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 27 deletions.
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -23,8 +23,8 @@
 
 <template>
 	<file-preview v-bind="filePreview"
-		class="container"
-		:class="{ 'is-viewer-available': isViewerAvailable, 'upload-editor': isUploadEditor }"
+		class="file-preview"
+		:class="{ 'file-preview--viewer-available': isViewerAvailable, 'file-preview--upload-editor': isUploadEditor }"
 		@click="showPreview">
 		<img v-if="!isLoading && !failed"
 			:class="previewSizeClass"
@@ -37,19 +37,25 @@
 		<span v-if="isLoading"
 			class="preview loading" />
 		<strong>{{ name }}</strong>
+		<button v-if="isUploadEditor"
+			class="remove-file primary">
+			<Close class="remove-file__icon" @click="$emit('remove-file', id)" />
+		</button>
 		<ProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 	</file-preview>
 </template>
 
 <script>
 import { generateUrl, imagePath } from '@nextcloud/router'
 import ProgressBar from '@nextcloud/vue/dist/Components/ProgressBar'
+import Close from 'vue-material-design-icons/Close'
 
 export default {
 	name: 'FilePreview',
 
 	components: {
 		ProgressBar,
+		Close,
 	},
 
 	props: {
@@ -229,8 +235,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import '../../../../../assets/variables.scss';
 
-.container {
+.file-preview {
+	position: relative;
 	width: 100%;
 	/* The file preview can not be a block; otherwise it would fill the whole
 	width of the container and the loading icon would not be centered on the
@@ -245,6 +253,9 @@ export default {
 		/* Trick to keep the same position while adding a padding to show
 			* the background. */
 		box-sizing: content-box !important;
+		.remove-file {
+			visibility: visible;
+		}
 	}
 
 	.preview {
@@ -266,17 +277,34 @@ export default {
 		white-space: nowrap;
 	}
 
-	&:not(.is-viewer-available) {
+	&:not(.file-preview--viewer-available) {
 		strong:after {
 			content: ' ↗';
 		}
 	}
+	&--upload-editor {
+		max-width: 160px;
+		max-height: 160px;
+		margin: 10px;
+		.preview {
+			margin: auto;
+		}
+	}
 }
 
-.upload-editor {
-	max-width: 160px;
-	max-height: 160px;
-	margin: 10px;
+.remove-file {
+	visibility: hidden;
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	box-shadow: 0 0 4px var(--color-box-shadow);
+	width: $clickable-area;
+	height: $clickable-area;
+	padding: 0;
+	margin: 0;
+	&__icon {
+		color: var(--color-primary-text);
+	}
 }
 
 </style>
diff --git a/src/components/UploadEditor.vue b/src/components/UploadEditor.vue
@@ -30,17 +30,21 @@
 			class="hidden-visually"
 			@change="handleFileInput">
 		<div class="upload-editor">
-			<div class="upload-editor__previews">
+			<transition-group
+				class="upload-editor__previews"
+				name="fade"
+				tag="div">
 				<template v-for="file in files">
 					<FilePreview
 						:key="file.temporaryMessage.id"
 						v-bind="file.temporaryMessage.messageParameters.file"
-						:is-upload-editor="true" />
+						:is-upload-editor="true"
+						@remove-file="handleRemoveFileFromSelection" />
 				</template>
-				<button class="upload-editor__add-more primary" @click="clickImportInput">
+				<button :key="'addMore'" class="upload-editor__add-more primary" @click="clickImportInput">
 					<Plus :size="48" class="upload-editor__plus-icon" />
 				</button>
-			</div>
+			</transition-group>
 			<div class="upload-editor__actions">
 				<button @click="handleDismiss">
 					Dismiss
@@ -121,11 +125,16 @@ export default {
 			const files = Object.values(event.target.files)
 			processFiles(files, this.token, this.currentUploadId)
 		},
+
+		handleRemoveFileFromSelection(id) {
+			this.$store.dispatch('removeFileFromSelection', id)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
+@import '../assets/variables.scss';
 
 .upload-editor {
 	height: 100%;
@@ -141,21 +150,20 @@ export default {
 		margin-top: 16px;
 	}
 	&__add-more {
-	width: 100PX;
-	height: 100px;
-	margin: 40px !important;
-	border: none;
-	border-radius: var(--border-radius-large);
-	position: relative;
-	z-index: 2;
-	box-shadow: 0 0 4px var(--color-box-shadow);
-	padding: 0;
-	margin: 0;
-	&__plus {
-		color: var(--color-primary-text);
-		z-index: 3;
+		width: 100px;
+		height: 100px;
+		border: none;
+		border-radius: var(--border-radius-large);
+		position: relative;
+		z-index: 2;
+		box-shadow: 0 0 4px var(--color-box-shadow);
+		padding: 0;
+		margin: 0;
+		&__plus {
+			color: var(--color-primary-text);
+			z-index: 3;
+		}
 	}
 }
-}
 
 </style>
diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js
@@ -166,13 +166,21 @@ const mutations = {
 	// Sets the id of the current upload operation
 	setCurrentUploadId(state, currentUploadId) {
 		state.currentUploadId = currentUploadId
-		console.debug(currentUploadId)
 	},
 
 	// Shows hides the upload editor
 	showUploadEditor(state, boolean) {
 		state.showUploadEditor = boolean
 	},
+
+	removeFileFromSelection(state, fileId) {
+		const uploadId = state.currentUploadId
+		for (const key in state.uploads[uploadId].files) {
+			if (state.uploads[uploadId].files[key].temporaryMessage.id === fileId) {
+				Vue.delete(state.uploads[uploadId].files, key)
+			}
+		}
+	},
 }
 
 const actions = {
@@ -276,6 +284,10 @@ const actions = {
 		context.commit('markFileAsShared', { uploadId, index })
 	},
 
+	removeFileFromSelection({ commit }, fileId) {
+		commit('removeFileFromSelection', fileId)
+	},
+
 }
 
 export default { state, mutations, getters, actions }