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

refactor: zoom scales

Browse Source
This commit is contained in:
Shivam Mishra
2024-03-13 11:32:01 +05:30
parent 09ceefe053
commit 692c747ec2
1 changed files with 23 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components/widgets/conversation/components/GalleryView.vue
+23 -20
View File
@@ -11,34 +11,34 @@
class="bg-white dark:bg-slate-900 flex flex-col h-[inherit] w-[inherit]"
@click="onClose"
>
<div class="items-center flex h-16 justify-between py-2 px-6 w-full">
<div class="flex items-center justify-between w-full h-16 px-6 py-2">
<div class="items-center flex justify-start min-w-[15rem]" @click.stop>
<thumbnail
: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"
class="overflow-hidden text-slate-700 dark:text-slate-100 whitespace-nowrap text-ellipsis"
>
{{ fileNameFromDataUrl }}
</span>
@@ -53,7 +53,7 @@
color-scheme="secondary"
variant="clear"
icon="zoom-in"
@click="onZoom(0.05)"
@click="onZoom(0.1)"
/>
<woot-button
v-if="isImage"
@@ -61,7 +61,7 @@
color-scheme="secondary"
variant="clear"
icon="zoom-out"
@click="onZoom(-0.05)"
@click="onZoom(-0.1)"
/>
<woot-button
v-if="isImage"
@@ -95,7 +95,7 @@
/>
</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"
@@ -112,13 +112,13 @@
"
/>
</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 modal-image skip-context-menu"
:style="imageRotationStyle"
@click.stop="onClickZoomImage"
@wheel.stop="onWheelImageZoom"
@@ -129,7 +129,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
@@ -160,7 +160,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">
<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"
>
@@ -191,6 +191,9 @@ const ALLOWED_FILE_TYPES = {
AUDIO: 'audio',
};
const MAX_ZOOM_LEVEL = 2;
const MIN_ZOOM_LEVEL = 1;
export default {
components: {
Thumbnail,
@@ -269,7 +272,7 @@ export default {
imageRotationStyle() {
return {
transform: `rotate(${this.activeImageRotation}deg) scale(${this.zoomScale})`,
cursor: this.zoomScale < 1.5 ? 'zoom-in' : 'zoom-out',
cursor: this.zoomScale < MAX_ZOOM_LEVEL ? 'zoom-in' : 'zoom-out',
};
},
},
@@ -336,19 +339,19 @@ export default {
}
},
onClickZoomImage() {
this.onZoom(0.05);
this.onZoom(0.1);
},
onZoom(scale) {
if (!this.isImage) {
return;
}
// Reset zoom scale if it is 1.5
if (scale > 0 && this.zoomScale >= 1.5) {
if (scale > 0 && this.zoomScale >= MAX_ZOOM_LEVEL) {
this.zoomScale = 1;
return;
}
// Reset zoom scale if it is 0.5
if (scale < 0 && this.zoomScale <= 0.5) {
if (scale < 0 && this.zoomScale <= MIN_ZOOM_LEVEL) {
this.zoomScale = 1;
return;
}
@@ -358,7 +361,7 @@ export default {
if (!this.isImage) {
return;
}
const scale = e.deltaY > 0 ? -0.05 : 0.05;
const scale = e.deltaY > 0 ? -0.1 : 0.1;
this.onZoom(scale);
},
},