Add preview for mail attachment

Signed-off-by: greta <gretadoci@gmail.com>

3 files changed, 69 insertions, 2 deletions

diff --git a/src/components/AttachmentImageViewer.vue b/src/components/AttachmentImageViewer.vue
new file mode 100644
index 000000000..aaeeb1579
--- /dev/null
+++ b/src/components/AttachmentImageViewer.vue
@@ -0,0 +1,52 @@
+<template>
+	<Modal
+		:size="isMobile ? 'full' : 'large'"
+		@close="$emit('close')">
+		<img
+			:src="url"
+			class="modal__attachment">
+	</Modal>
+</template>
+
+<script>
+import Modal from '@nextcloud/vue/dist/Components/Modal'
+import isMobile from '@nextcloud/vue/dist/Mixins/isMobile'
+export default {
+	name: 'AttachmentImageViewer',
+	components: {
+		Modal,
+	},
+	mixins: [isMobile],
+	props: {
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .modal-wrapper {
+	&--large {
+		.modal-container,
+		.modal__attachment {
+			max-width: 85vw !important;
+			max-height: 90vh !important;
+		}
+	}
+
+	&--full {
+		.modal-container,
+		.modal__attachment {
+			max-width: 95vw !important;
+			max-height: 95vh !important;
+		}
+	}
+
+	.modal__attachment {
+		box-shadow: none !important;
+		display: flex !important;
+	}
+}
+</style>
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 420b38ba2..d326ceb29 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -20,7 +20,8 @@
   -->
 
 <template>
-	<div class="attachment">
+	<div class="attachment"
+		@click="$emit('click', $event)">
 		<img v-if="isImage" class="mail-attached-image" :src="url">
 		<img class="attachment-icon" :src="mimeUrl">
 		<span class="attachment-name"
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index 83dbce481..f68f3e9cf 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -32,7 +32,11 @@
 				:is-image="attachment.isImage"
 				:is-calendar-event="attachment.isCalendarEvent"
 				:mime="attachment.mime"
-				:mime-url="attachment.mimeUrl" />
+				:mime-url="attachment.mimeUrl"
+				@click="showViewer(attachment)" />
+			<AttachmentImageViewer v-if="attachmentImageURL && showPreview"
+				:url="attachmentImageURL"
+				@close="showPreview = false" />
 		</div>
 		<p v-if="moreThanOne" class="attachments-button-wrapper">
 			<button
@@ -58,10 +62,12 @@ import { saveAttachmentsToFiles } from '../service/AttachmentService'
 
 import MessageAttachment from './MessageAttachment'
 import Logger from '../logger'
+import AttachmentImageViewer from './AttachmentImageViewer'
 
 export default {
 	name: 'MessageAttachments',
 	components: {
+		AttachmentImageViewer,
 		MessageAttachment,
 	},
 	props: {
@@ -77,6 +83,8 @@ export default {
 	data() {
 		return {
 			savingToCloud: false,
+			showPreview: false,
+			attachmentImageURL: '',
 		}
 	},
 	computed: {
@@ -118,6 +126,12 @@ export default {
 		downloadZip() {
 			window.location = this.zipUrl
 		},
+		showViewer(attachment) {
+			if (attachment.isImage) {
+				this.showPreview = true
+				this.attachmentImageURL = attachment.downloadUrl
+			}
+		},
 	},
 }
 </script>