c3lf/c3lf-system-3
9
0
Fork 0
Code Issues 55 Pull requests Projects 2 Releases Wiki Activity Actions

frontend use Lightbox to enlarge mail attachments

Browse source
This commit is contained in:
j3d1 2024-01-15 20:52:11 +01:00
parent 027cf4fca4
commit 7e3a151ead
3 changed files with 25 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

22
web/src/components/TimelineMail.vue
View file

@ -1,5 +1,6 @@
<template>
<div class="timeline-item-wrapper">
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
<div class="timeline-item-description">
<i class="avatar | small">
<font-awesome-icon icon="user"/>
@ -22,7 +23,7 @@
</div>
<div class="card-footer" v-if="item.attachments.length">
<ul>
<li v-for="attachment in item.attachments">
<li v-for="attachment in item.attachments" @click="openLightboxModalWith(attachment)">
<AuthenticatedImage :src="`/media/2/256/${attachment.hash}/`" :alt="attachment.name"
v-if="attachment.mime_type.startsWith('image/')"/>
<AuthenticatedDataLink :href="`/media/2/256/${attachment.hash}/`" :download="attachment.name"
@ -58,10 +59,16 @@
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
import AuthenticatedDataLink from "@/components/AuthenticatedDataLink.vue";
import Lightbox from "@/components/Lightbox.vue";
export default {
name: 'TimelineMail',
components: {AuthenticatedImage, AuthenticatedDataLink},
components: {Lightbox, AuthenticatedImage, AuthenticatedDataLink},
data() {
return {
lightboxHash: null,
}
},
props: {
'item': {
type: Object,
@ -76,7 +83,16 @@ export default {
return this.item.body.replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
}
}
},
methods: {
openLightboxModalWith(attachment) {
this.lightboxHash = attachment.hash;
console.log(this.lightboxHash);
},
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
this.lightboxHash = null;
},
},
};
</script>