akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Attachment view improvements

Browse Source
This commit is contained in:
iamsivin
2023-06-15 12:50:27 +05:30
parent 1ee6a8fe90
commit b3585b5001
3 changed files with 201 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/Modal.vue
+5
View File
@@ -8,6 +8,7 @@
>
<div :class="modalContainerClassName" @click.stop>
<woot-button
v-if="showCloseButton"
color-scheme="secondary"
icon="dismiss"
variant="clear"
@@ -28,6 +29,10 @@ export default {
default: true,
},
show: Boolean,
showCloseButton: {
type: Boolean,
default: true,
},
onClose: {
type: Function,
required: true,
app/javascript/dashboard/components/widgets/conversation/Message.vue
+9 -1
View File
@@ -52,7 +52,7 @@
{{ $t('CONVERSATION.UPLOADING_ATTACHMENTS') }}
</span>
<div v-if="!isPending && hasAttachments">
<div v-for="attachment in data.attachments" :key="attachment.id">
<div v-for="attachment in attachments" :key="attachment.id">
<bubble-image-audio-video
v-if="isAttachmentImageVideoAudio(attachment.file_type)"
:attachment="attachment"
@@ -199,6 +199,14 @@ export default {
};
},
computed: {
attachments() {
// Here it is used to get sender and created_at for each attachment
return this.data?.attachments.map(attachment => ({
...attachment,
sender: this.data.sender || {},
created_at: this.data.created_at || '',
}));
},
shouldRenderMessage() {
return (
this.hasAttachments ||
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+187 -62
View File
@@ -1,66 +1,104 @@
<template>
<woot-modal full-width :show.sync="show" :on-close="onClose">
<woot-modal
full-width
:show.sync="show"
:show-close-button="false"
:on-close="onClose"
>
<div v-on-clickaway="onClose" class="gallery-modal--wrap" @click="onClose">
<div class="attachment-toggle--button">
<woot-button
v-if="hasMoreThanOneAttachment"
size="large"
variant="smooth"
color-scheme="secondary"
icon="chevron-left"
:disabled="activeImageIndex === 0"
@click.stop="
onClickChangeAttachment(
allAttachments[activeImageIndex - 1],
activeImageIndex - 1
)
"
/>
</div>
<div class="attachments-viewer">
<div class="attachment-view">
<img
v-if="isImage"
:key="attachmentSrc"
:src="attachmentSrc"
class="modal-image skip-context-menu"
@click.stop
<div class="gallery-modal--header">
<div class="header-info--wrap" @click.stop>
<thumbnail
:username="senderDetails.name"
:src="senderDetails.avatar"
size="40px"
/>
<video
v-if="isVideo"
:key="attachmentSrc"
:src="attachmentSrc"
controls
playsInline
class="modal-video skip-context-menu"
@click.stop
<div class="header-info">
<h3 class="sub-block-title sender-name text-truncate">
<span>{{ senderDetails.name }}</span>
</h3>
<span class="time-stamp">{{ readableTime }}</span>
</div>
</div>
<div class="header-actions" @click.stop>
<woot-button
size="large"
color-scheme="secondary"
variant="clear"
icon="arrow-download"
@click="onClickDownload"
/>
<woot-button
size="large"
color-scheme="secondary"
variant="clear"
icon="dismiss"
@click="onClose"
/>
<audio
v-if="isAudio"
:key="attachmentSrc"
controls
class="skip-context-menu"
@click.stop
>
<source :src="`${attachmentSrc}?t=${Date.now()}`" />
</audio>
</div>
</div>
<div class="attachment-toggle--button">
<woot-button
v-if="hasMoreThanOneAttachment"
size="large"
variant="smooth"
color-scheme="secondary"
:disabled="activeImageIndex === allAttachments.length - 1"
icon="chevron-right"
@click.stop="
onClickChangeAttachment(
allAttachments[activeImageIndex + 1],
activeImageIndex + 1
)
"
/>
<div class="gallery-modal--body">
<div class="attachment-toggle--button">
<woot-button
v-if="hasMoreThanOneAttachment"
size="large"
variant="smooth"
color-scheme="primary"
icon="chevron-left"
:disabled="activeImageIndex === 0"
@click.stop="
onClickChangeAttachment(
allAttachments[activeImageIndex - 1],
activeImageIndex - 1
)
"
/>
</div>
<div class="attachments-viewer">
<div class="attachment-view">
<img
v-if="isImage"
:key="activeAttachment.message_id"
:src="activeAttachment.data_url"
class="modal-image skip-context-menu"
@click.stop
/>
<video
v-if="isVideo"
:key="activeAttachment.message_id"
:src="activeAttachment.data_url"
controls
playsInline
class="modal-video skip-context-menu"
@click.stop
/>
<audio
v-if="isAudio"
:key="activeAttachment.message_id"
controls
class="skip-context-menu"
@click.stop
>
<source :src="`${activeAttachment.data_url}?t=${Date.now()}`" />
</audio>
</div>
</div>
<div class="attachment-toggle--button">
<woot-button
v-if="hasMoreThanOneAttachment"
size="large"
variant="smooth"
color-scheme="primary"
:disabled="activeImageIndex === allAttachments.length - 1"
icon="chevron-right"
@click.stop="
onClickChangeAttachment(
allAttachments[activeImageIndex + 1],
activeImageIndex + 1
)
"
/>
</div>
</div>
</div>
</woot-modal>
@@ -74,6 +112,9 @@ import {
hasPressedArrowRightKey,
} from 'shared/helpers/KeyboardHelpers';
import eventListenerMixins from 'shared/mixins/eventListenerMixins';
import timeMixin from 'dashboard/mixins/time';
import Thumbnail from 'dashboard/components/widgets/Thumbnail';
const ALLOWED_FILE_TYPES = {
IMAGE: 'image',
@@ -82,7 +123,10 @@ const ALLOWED_FILE_TYPES = {
};
export default {
mixins: [eventListenerMixins, clickaway],
components: {
Thumbnail,
},
mixins: [eventListenerMixins, clickaway, timeMixin],
props: {
show: {
type: Boolean,
@@ -99,11 +143,11 @@ export default {
},
data() {
return {
attachmentSrc: '',
activeAttachment: {},
activeFileType: '',
activeImageIndex:
this.allAttachments.findIndex(
attachment => attachment.id === this.attachment.id
attachment => attachment.message_id === this.attachment.message_id
) || 0,
};
},
@@ -111,6 +155,13 @@ export default {
hasMoreThanOneAttachment() {
return this.allAttachments.length > 1;
},
readableTime() {
if (!this.activeAttachment.created_at) return '';
return this.messageTimestamp(
this.activeAttachment.created_at,
'LLL d yyyy, h:mm a'
);
},
isImage() {
return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
},
@@ -120,6 +171,14 @@ export default {
isAudio() {
return this.activeFileType === ALLOWED_FILE_TYPES.AUDIO;
},
senderDetails() {
const { name, available_name: availableName, avatar_url, thumbnail } =
this.activeAttachment?.sender || this.attachment?.sender;
return {
name: name || availableName,
avatar: thumbnail || avatar_url,
};
},
},
mounted() {
this.setImageAndVideoSrc(this.attachment);
@@ -140,7 +199,7 @@ export default {
if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
return;
}
this.attachmentSrc = attachment.data_url;
this.activeAttachment = attachment;
this.activeFileType = type;
},
onKeyDownHandler(e) {
@@ -158,17 +217,83 @@ export default {
);
}
},
onClickDownload() {
const { file_type: type, data_url: url } = this.activeAttachment;
if (!Object.values(ALLOWED_FILE_TYPES).includes(type)) {
return;
}
const link = document.createElement('a');
link.href = url;
link.download = `attachment.${type}`;
link.click();
},
},
};
</script>
<style lang="scss" scoped>
.gallery-modal--wrap {
display: flex;
flex-direction: row;
flex-direction: column;
align-items: center;
width: inherit;
height: inherit;
.gallery-modal--header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--space-normal) var(--space-medium);
.header-info--wrap {
display: flex;
align-items: center;
justify-content: flex-start;
.header-info {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin-left: var(--space-small);
.sender-name {
display: inline-block;
line-height: 1.4;
text-transform: capitalize;
margin: 0;
padding: 0;
}
.time-stamp {
color: var(--s-400);
font-size: var(--font-size-mini);
margin: 0;
padding: 0;
}
}
}
.header-actions {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
margin-left: auto;
gap: var(--space-small);
}
}
.gallery-modal--body {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
width: 100%;
height: 86%;
}
.attachments-viewer {
display: flex;
flex-direction: column;