c3lf/c3lf-system-3
7
0
Fork 0
Code Issues 51 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
Show stats Download patch file Download diff file Expand all files Collapse all files

4
web/src/components/Lightbox.vue
View file

@ -3,7 +3,7 @@
<template #body>
<AuthenticatedImage
class="img-fluid rounded mx-auto d-block mb-3 w-100"
:src="`/media/2/${file}/`"
:src="`/media/2/${hash}/`"
alt="Image not available."
id="lightbox-image"
/>
@ -21,7 +21,7 @@ import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
export default {
name: 'Lightbox',
components: {Modal, AuthenticatedImage},
props: ['file']
props: ['hash']
};
</script>

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>

8
web/src/views/Items.vue
View file

@ -12,7 +12,7 @@
<button type="button" class="btn btn-success" @click="saveEditingItem()">Save Changes</button>
</template>
</Modal>
<Lightbox v-if="lightboxItem" :file="lightboxItem.file" @close="closeLightboxModal()"/>
<Lightbox v-if="lightboxHash" :hash="lightboxHash" @close="closeLightboxModal()"/>
<div class="row" v-if="layout === 'table'">
<div class="col-xl-8 offset-xl-2">
<Table
@ -84,7 +84,7 @@ import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
export default {
name: 'Items',
data: () => ({
lightboxItem: null,
lightboxHash: null,
editingItem: null,
}),
components: {AuthenticatedImage, Lightbox, Table, Cards, Modal, EditItem},
@ -92,10 +92,10 @@ export default {
methods: {
...mapActions(['deleteItem', 'markItemReturned']),
openLightboxModalWith(item) {
this.lightboxItem = {...item};
this.lightboxHash = item.file;
},
closeLightboxModal() { // Closes the editing modal and discards the edited copy of the item.
this.lightboxItem = null;
this.lightboxHash = null;
},
openEditingModalWith(item) { // Opens the editing modal with a copy of the selected item.
this.editingItem = item;