diff options
author | greta <gretadoci@gmail.com> | 2021-12-21 16:03:58 +0300 |
---|---|---|
committer | greta <gretadoci@gmail.com> | 2022-01-10 14:28:56 +0300 |
commit | a6ef40bac59dd74dbd6170eec8c865d0ff03bc37 (patch) | |
tree | 01415d84afd37856d65ca9d71565c0287b5297a9 /src | |
parent | 2287909eaa2387dfb603c202438c0b9d04aa5913 (diff) |
Add preview for mail attachment
Signed-off-by: greta <gretadoci@gmail.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/AttachmentImageViewer.vue | 52 | ||||
-rw-r--r-- | src/components/MessageAttachment.vue | 3 | ||||
-rw-r--r-- | src/components/MessageAttachments.vue | 16 |
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> |