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

Merge branch 'develop' into feat/CW-3082

Browse Source
This commit is contained in:
Sivin Varghese
2024-03-14 09:34:12 +05:30
committed by GitHub
parent 28563ca129 29171565ed
commit 51e293976f
13 changed files with 311 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/layout/config/sidebarItems/settings.js
+1 -1
View File
@@ -160,7 +160,7 @@ const settings = accountId => ({
beta: true,
},
{
icon: 'key',
icon: 'document-list-clock',
label: 'SLA',
hasSubMenu: false,
toState: frontendURL(`accounts/${accountId}/settings/sla/list`),
app/javascript/dashboard/components/widgets/conversation/bubble/Text.vue
+47 -6
View File
@@ -7,11 +7,12 @@
}"
>
<div v-if="!isEmail" v-dompurify-html="message" class="text-content" />
<letter
v-else
class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
:html="message"
/>
<div v-else @click="handleClickOnContent">
<letter
class="text-content bg-white dark:bg-white text-slate-900 dark:text-slate-900 p-2 rounded-[4px]"
:html="message"
/>
</div>
<button
v-if="showQuoteToggle"
class="text-slate-300 dark:text-slate-300 cursor-pointer text-xs py-1"
@@ -26,14 +27,23 @@
{{ $t('CHAT_LIST.SHOW_QUOTED_TEXT') }}
</span>
</button>
<gallery-view
v-if="showGalleryViewer"
:show.sync="showGalleryViewer"
:attachment="attachment"
:all-attachments="availableAttachments"
@error="onClose"
@close="onClose"
/>
</div>
</template>
<script>
import Letter from 'vue-letter';
import GalleryView from '../components/GalleryView.vue';
export default {
components: { Letter },
components: { Letter, GalleryView },
props: {
message: {
type: String,
@@ -51,6 +61,9 @@ export default {
data() {
return {
showQuotedContent: false,
showGalleryViewer: false,
attachment: {},
availableAttachments: [],
};
},
computed: {
@@ -71,6 +84,33 @@ export default {
toggleQuotedContent() {
this.showQuotedContent = !this.showQuotedContent;
},
handleClickOnContent(event) {
// if event target is IMG and not close in A tag
// then open image preview
const isImageElement = event.target.tagName === 'IMG';
const isWrappedInLink = event.target.closest('A');
if (isImageElement && !isWrappedInLink) {
this.openImagePreview(event.target.src);
}
},
openImagePreview(src) {
this.showGalleryViewer = true;
this.attachment = {
file_type: 'image',
data_url: src,
message_id: Math.floor(Math.random() * 100),
};
this.availableAttachments = [{ ...this.attachment }];
},
onClose() {
this.showGalleryViewer = false;
this.resetAttachmentData();
},
resetAttachmentData() {
this.attachment = {};
this.availableAttachments = [];
},
},
};
</script>
@@ -82,6 +122,7 @@ export default {
ol {
padding-left: var(--space-two);
}
table {
margin: 0;
border: 0;
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+84 -26
View File
@@ -8,45 +8,66 @@
>
<div
v-on-clickaway="onClose"
class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit]"
class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit] overflow-hidden"
@click="onClose"
>
<div class="items-center flex h-16 justify-between py-2 px-6 w-full">
<div class="items-center flex justify-start min-w-[15rem]" @click.stop>
<div
class="bg-white dark:bg-slate-900 z-10 flex items-center justify-between w-full h-16 px-6 py-2"
@click.stop
>
<div
v-if="senderDetails"
class="items-center flex justify-start min-w-[15rem]"
>
<thumbnail
v-if="senderDetails.avatar"
:username="senderDetails.name"
:src="senderDetails.avatar"
/>
<div
class="flex items-start flex-col justify-center ml-2 rtl:ml-0 rtl:mr-2"
class="flex flex-col items-start justify-center ml-2 rtl:ml-0 rtl:mr-2"
>
<h3 class="text-base inline-block leading-[1.4] m-0 p-0 capitalize">
<span
class="text-slate-800 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
class="overflow-hidden text-slate-800 dark:text-slate-100 whitespace-nowrap text-ellipsis"
>
{{ senderDetails.name }}
</span>
</h3>
<span
class="text-xs m-0 p-0 text-slate-400 dark:text-slate-200 overflow-hidden whitespace-nowrap text-ellipsis"
class="p-0 m-0 overflow-hidden text-xs text-slate-400 dark:text-slate-200 whitespace-nowrap text-ellipsis"
>
{{ readableTime }}
</span>
</div>
</div>
<div
class="items-center text-slate-700 dark:text-slate-100 flex font-semibold justify-start min-w-0 p-1 w-auto text-sm"
class="flex items-center justify-start w-auto min-w-0 p-1 text-sm font-semibold text-slate-700 dark:text-slate-100"
>
<span
class="text-slate-700 dark:text-slate-100 overflow-hidden whitespace-nowrap text-ellipsis"
>
{{ fileNameFromDataUrl }}
</span>
v-dompurify-html="fileNameFromDataUrl"
class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
/>
</div>
<div
class="items-center flex gap-2 justify-end min-w-[8rem] sm:min-w-[15rem]"
@click.stop
>
<woot-button
v-if="isImage"
size="large"
color-scheme="secondary"
variant="clear"
icon="zoom-in"
@click="onZoom(0.1)"
/>
<woot-button
v-if="isImage"
size="large"
color-scheme="secondary"
variant="clear"
icon="zoom-out"
@click="onZoom(-0.1)"
/>
<woot-button
v-if="isImage"
size="large"
@@ -79,10 +100,11 @@
/>
</div>
</div>
<div class="items-center flex h-full justify-center w-full">
<div class="flex items-center justify-center w-full h-full">
<div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
<woot-button
v-if="hasMoreThanOneAttachment"
class="z-10"
size="large"
variant="smooth"
color-scheme="primary"
@@ -96,15 +118,16 @@
"
/>
</div>
<div class="flex items-center flex-col justify-center w-full h-full">
<div class="flex flex-col items-center justify-center w-full h-full">
<div>
<img
v-if="isImage"
:key="activeAttachment.message_id"
:src="activeAttachment.data_url"
class="modal-image skip-context-menu my-0 mx-auto"
class="mx-auto my-0 duration-150 ease-in-out transform modal-image skip-context-menu"
:style="imageRotationStyle"
@click.stop
@click.stop="onClickZoomImage"
@wheel.stop="onWheelImageZoom"
/>
<video
v-if="isVideo"
@@ -112,7 +135,7 @@
:src="activeAttachment.data_url"
controls
playsInline
class="modal-video skip-context-menu my-0 mx-auto"
class="mx-auto my-0 modal-video skip-context-menu"
@click.stop
/>
<audio
@@ -129,6 +152,7 @@
<div class="flex justify-center min-w-[6.25rem] w-[6.25rem]">
<woot-button
v-if="hasMoreThanOneAttachment"
class="z-10"
size="large"
variant="smooth"
color-scheme="primary"
@@ -143,7 +167,7 @@
/>
</div>
</div>
<div class="items-center flex h-16 justify-center w-full py-2 px-6">
<div class="flex items-center justify-center w-full h-16 px-6 py-2 z-10">
<div
class="items-center rounded-sm flex font-semibold justify-center min-w-[5rem] p-1 bg-slate-25 dark:bg-slate-800 text-slate-600 dark:text-slate-200 text-sm"
>
@@ -174,6 +198,9 @@ const ALLOWED_FILE_TYPES = {
AUDIO: 'audio',
};
const MAX_ZOOM_LEVEL = 2;
const MIN_ZOOM_LEVEL = 1;
export default {
components: {
Thumbnail,
@@ -195,6 +222,7 @@ export default {
},
data() {
return {
zoomScale: 1,
activeAttachment: {},
activeFileType: '',
activeImageIndex:
@@ -212,12 +240,9 @@ export default {
return this.allAttachments.length > 1;
},
readableTime() {
if (!this.activeAttachment.created_at) return '';
const time = this.messageTimestamp(
this.activeAttachment.created_at,
'LLL d yyyy, h:mm a'
);
return time || '';
const { created_at: createdAt } = this.activeAttachment;
if (!createdAt) return '';
return this.messageTimestamp(createdAt, 'LLL d yyyy, h:mm a') || '';
},
isImage() {
return this.activeFileType === ALLOWED_FILE_TYPES.IMAGE;
@@ -246,11 +271,12 @@ export default {
const { data_url: dataUrl } = this.activeAttachment;
if (!dataUrl) return '';
const fileName = dataUrl?.split('/').pop();
return fileName || '';
return decodeURIComponent(fileName || '');
},
imageRotationStyle() {
return {
transform: `rotate(${this.activeImageRotation}deg)`,
transform: `rotate(${this.activeImageRotation}deg) scale(${this.zoomScale})`,
cursor: this.zoomScale < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
};
},
},
@@ -268,6 +294,7 @@ export default {
this.activeImageIndex = index;
this.setImageAndVideoSrc(attachment);
this.activeImageRotation = 0;
this.zoomScale = 1;
},
setImageAndVideoSrc(attachment) {
const { file_type: type } = attachment;
@@ -316,6 +343,37 @@ export default {
this.activeImageRotation += rotation;
}
},
onClickZoomImage() {
this.onZoom(0.1);
},
onZoom(scale) {
if (!this.isImage) {
return;
}
const newZoomScale = this.zoomScale + scale;
// Check if the new zoom scale is within the allowed range
if (newZoomScale > MAX_ZOOM_LEVEL) {
// Set zoom to max but do not reset to default
this.zoomScale = MAX_ZOOM_LEVEL;
return;
}
if (newZoomScale < MIN_ZOOM_LEVEL) {
// Set zoom to min but do not reset to default
this.zoomScale = MIN_ZOOM_LEVEL;
return;
}
// If within bounds, update the zoom scale
this.zoomScale = newZoomScale;
},
onWheelImageZoom(e) {
if (!this.isImage) {
return;
}
const scale = e.deltaY > 0 ? -0.1 : 0.1;
this.onZoom(scale);
},
},
};
</script>
app/javascript/dashboard/routes/dashboard/settings/sla/sla.routes.js
+1 -1
View File
@@ -10,7 +10,7 @@ export default {
component: SettingsContent,
props: {
headerTitle: 'SLA.HEADER',
icon: 'tag',
icon: 'document-list-clock',
showNewButton: true,
},
children: [