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

chore: Replace message menu with context menu

Browse Source
This commit is contained in:
iamsivin
2025-05-08 16:52:18 +05:30
parent 2856818931
commit cffd74fda3
11 changed files with 343 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/message/Message.vue
+22 -2
View File
@@ -1,5 +1,5 @@
<script setup>
import { onMounted, computed, ref, toRefs } from 'vue';
import { onMounted, computed, ref, toRefs, useTemplateRef } from 'vue';
import { useTimeoutFn } from '@vueuse/core';
import { provideMessageContext } from './provider.js';
import { useTrack } from 'dashboard/composables';
@@ -133,6 +133,7 @@ const props = defineProps({
const contextMenuPosition = ref({});
const showBackgroundHighlight = ref(false);
const showContextMenu = ref(false);
const emailBubbleRef = useTemplateRef('emailBubbleRef');
const { t } = useI18n();
const route = useRoute();
@@ -342,6 +343,11 @@ const contextMenuEnabledOptions = computed(() => {
delete: hasText || hasAttachments,
cannedResponse: isOutgoing && hasText,
replyTo: !props.private && props.inboxSupportsReplyTo.outgoing,
// Forward email is enabled only when the message is not in progress and is not private and is an email inbox
forwardEmail:
props.isEmailInbox &&
!props.private &&
props.status !== MESSAGE_STATUS.PROGRESS,
};
});
@@ -362,6 +368,9 @@ const shouldRenderMessage = computed(() => {
});
function openContextMenu(e) {
// Close forward modal, when opening context menu
emailBubbleRef.value?.closeForwardModal();
const shouldSkipContextMenu =
e.target?.classList.contains('skip-context-menu') ||
e.target?.tagName.toLowerCase() === 'a';
@@ -437,6 +446,11 @@ const setupHighlightTimer = () => {
}, HIGHLIGHT_TIMER);
};
const openForwardModal = (event = null) => {
// Open forward modal, with the event from context menu
emailBubbleRef.value.openForwardModal(event);
};
onMounted(setupHighlightTimer);
provideMessageContext({
@@ -497,7 +511,12 @@ provideMessageContext({
}"
@contextmenu="openContextMenu($event)"
>
<Component :is="componentToRender" />
<component
:is="componentToRender"
:ref="
componentToRender === EmailBubble ? 'emailBubbleRef' : undefined
"
/>
</div>
<MessageError
v-if="contentAttributes.externalError"
@@ -517,6 +536,7 @@ provideMessageContext({
@open="openContextMenu"
@close="closeContextMenu"
@reply-to="handleReplyTo"
@forward-email="openForwardModal"
/>
</div>
</div>
app/javascript/dashboard/components-next/message/MessageMenu.vue
-56
View File
@@ -1,56 +0,0 @@
<script setup>
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import NextButton from 'dashboard/components-next/button/Button.vue';
import DropdownContainer from 'next/dropdown-menu/base/DropdownContainer.vue';
import DropdownSection from 'next/dropdown-menu/base/DropdownSection.vue';
import DropdownBody from 'next/dropdown-menu/base/DropdownBody.vue';
import DropdownItem from 'next/dropdown-menu/base/DropdownItem.vue';
const emit = defineEmits(['openForward']);
const { t } = useI18n();
const menuItems = computed(() => {
return [
{
label: t('CONVERSATION.MESSAGE_MENU.FORWARD_EMAIL'),
value: 'forward',
},
];
});
</script>
<template>
<DropdownContainer>
<template #trigger="{ toggle, isOpen }">
<NextButton
icon="i-lucide-ellipsis-vertical"
xs
slate
faded
:class="{ 'bg-n-alpha-2': isOpen }"
@click="toggle"
/>
</template>
<DropdownBody class="top-0 -right-6 min-w-64 z-50" strong>
<DropdownSection class="max-h-80 overflow-scroll">
<DropdownItem
v-for="item in menuItems"
:key="item.value"
class="!items-start !gap-1 flex-col cursor-pointer"
@click="event => emit('openForward', event)"
>
<template #label>
<div class="items-start flex gap-1 flex-col">
<span class="text-n-slate-12 text-sm">
{{ item.label }}
</span>
</div>
</template>
</DropdownItem>
</DropdownSection>
</DropdownBody>
</DropdownContainer>
</template>
app/javascript/dashboard/components-next/message/bubbles/Email/EmailMeta.vue
+3 -7
View File
@@ -62,18 +62,15 @@ const showMeta = computed(() => {
subject.value
);
});
defineExpose({
showMeta,
});
</script>
<template>
<section
v-show="showMeta"
class="space-y-1 rtl:pl-9 ltr:pr-9 text-sm break-words"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
>
<div class="space-y-1 rtl:pl-9 w-full ltr:pr-9 text-sm break-words">
<template v-if="showMeta">
<div
v-if="fromEmail[0]"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-12'"
@@ -103,7 +100,6 @@ defineExpose({
{{ $t('EMAIL_HEADER.SUBJECT') }}:
{{ subject }}
</div>
</div>
<slot />
</template>
</section>
</template>
app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue
+55 -46
View File
@@ -9,10 +9,9 @@ import {
} from 'vue';
import { Letter } from 'vue-letter';
import { allowedCssProperties } from 'lettersanitizer';
import { useScrollLock, useToggle } from '@vueuse/core';
import { useScrollLock, useWindowSize, useToggle } from '@vueuse/core';
import Icon from 'next/icon/Icon.vue';
import MessageMenu from 'dashboard/components-next/message/MessageMenu.vue';
import { EmailQuoteExtractor } from './removeReply.js';
import BaseBubble from 'next/message/bubbles/Base.vue';
import FormattedContent from 'next/message/bubbles/Text/FormattedContent.vue';
@@ -23,10 +22,11 @@ import ForwardMessageForm from 'dashboard/components-next/message/forwardMessage
import { useMessageContext } from '../../provider.js';
import { useInbox } from 'dashboard/composables/useInbox';
import { MESSAGE_TYPES, MESSAGE_STATUS } from 'next/message/constants.js';
import { MESSAGE_TYPES } from 'next/message/constants.js';
import { useTranslations } from 'dashboard/composables/useTranslations';
import { calculatePosition } from 'dashboard/helper/position.js';
const { id, status, content, contentAttributes, attachments, messageType } =
const { id, content, contentAttributes, attachments, messageType } =
useMessageContext();
const { inbox } = useInbox();
@@ -36,12 +36,12 @@ const isExpanded = ref(false);
const showQuotedMessage = ref(false);
const renderOriginal = ref(false);
const contentContainer = useTemplateRef('contentContainer');
const emailMeta = useTemplateRef('emailMeta');
// Forward form
// Forward form - managed locally but can be triggered by parent
const [showForwardMessageModal, toggleForwardModal] = useToggle();
const forwardFormPosition = reactive({ top: 0, right: 0 });
const conversationPanelScrollLock = ref(null);
const { width: windowWidth, height: windowHeight } = useWindowSize();
onMounted(() => {
isExpandable.value = contentContainer.value?.scrollHeight > 400;
@@ -52,12 +52,6 @@ const isIncoming = computed(() => !isOutgoing.value);
const isForwarded = computed(() => contentAttributes.value?.forwardedMessageId);
const showMessageMenu = computed(
() => ![MESSAGE_STATUS.FAILED, MESSAGE_STATUS.PROGRESS].includes(status.value)
);
const showMeta = computed(() => emailMeta.value?.showMeta);
const { hasTranslations, translationContent } =
useTranslations(contentAttributes);
@@ -126,16 +120,36 @@ const closeForwardModal = () => {
conversationPanelScrollLock.value.value = false;
};
const openForwardModal = event => {
const openForwardModal = (event = null) => {
// Lock conversation panel scroll
// To prevent the conversation from scrolling when the forward form is opened
const panel = document.querySelector('.conversation-panel');
if (panel) conversationPanelScrollLock.value = useScrollLock(panel, true);
// Set position from event
if (event?.target) {
const buttonRect = event.target.getBoundingClientRect();
forwardFormPosition.top = buttonRect.top - 9;
forwardFormPosition.right = window.innerWidth - buttonRect.right - 9;
// Form dimensions
const [formWidth, formHeight] = [672, 500];
const { value: winWidth } = windowWidth;
const { value: winHeight } = windowHeight;
// Position calculation
const rect = event?.target?.getBoundingClientRect?.();
if (rect) {
// Calculate position based on click location of context menu forward button
const { left, top } = calculatePosition(
rect.left,
rect.top,
formWidth,
formHeight,
winWidth,
winHeight
);
forwardFormPosition.top = top;
forwardFormPosition.right = winWidth - left - formWidth;
} else {
// Center the form when no trigger event
forwardFormPosition.top = Math.max(0, (winHeight - formHeight) / 2);
forwardFormPosition.right = Math.max(0, (winWidth - formWidth) / 2);
}
toggleForwardModal(true);
@@ -145,6 +159,11 @@ onUnmounted(() => {
if (conversationPanelScrollLock.value)
conversationPanelScrollLock.value.value = false;
});
defineExpose({
openForwardModal,
closeForwardModal,
});
</script>
<template>
@@ -156,39 +175,13 @@ onUnmounted(() => {
}"
data-bubble-name="email"
>
<div
v-show="showMeta"
<EmailMeta
class="p-3"
:class="{
'border-b border-n-strong': isIncoming,
'border-b border-n-slate-8/20': isOutgoing,
}"
>
<EmailMeta ref="emailMeta" class="w-full flex justify-end items-start">
<div
v-if="showMessageMenu"
class="flex gap-2 skip-context-menu flex-shrink-0 items-center relative"
>
<MessageMenu @open-forward="openForwardModal" />
<Teleport to="body">
<ForwardMessageForm
v-if="showForwardMessageModal"
:message="contentAttributes?.email"
:content="content"
:inbox="inbox"
:attachments="attachments"
:message-id="id"
class="fixed z-50 skip-context-menu"
:style="{
top: `${forwardFormPosition.top}px`,
right: `${forwardFormPosition.right}px`,
}"
@close="closeForwardModal"
/>
</Teleport>
</div>
</EmailMeta>
</div>
/>
<section ref="contentContainer" class="p-3">
<div
@@ -273,6 +266,22 @@ onUnmounted(() => {
>
<AttachmentChips :attachments="attachments" class="gap-1" />
</section>
<Teleport v-if="showForwardMessageModal" to="body">
<ForwardMessageForm
:message="contentAttributes?.email"
:content="content"
:inbox="inbox"
:attachments="attachments"
:message-id="id"
class="fixed z-50 skip-context-menu"
:style="{
top: `${forwardFormPosition.top}px`,
right: `${forwardFormPosition.right}px`,
}"
@close="closeForwardModal"
/>
</Teleport>
</BaseBubble>
</template>
app/javascript/dashboard/components-next/message/forwardMessage/components/ForwardMessageForm.vue
+24 -20
View File
@@ -130,9 +130,11 @@ const handleSendMessage = async () => {
<template>
<div
class="w-[42rem] max-h-[31.25rem] overflow-y-scroll divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full justify-between flex flex-col border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl"
class="w-[42rem] max-h-[31.25rem] divide-y divide-n-strong transition-all duration-300 ease-in-out top-full justify-between flex flex-col border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl overflow-hidden"
>
<div class="relative flex-1 px-4 py-3 overflow-y-visible bg-n-alpha-3">
<div
class="relative flex-1 rounded-t-xl px-4 py-3 overflow-y-visible bg-n-alpha-3"
>
<div class="flex items-baseline w-full gap-3 min-h-7">
<label class="text-sm font-medium text-n-slate-11 whitespace-nowrap">
{{ t('FORWARD_MESSAGE_FORM.FROM') }}
@@ -162,25 +164,27 @@ const handleSendMessage = async () => {
@clear-selected-contact="clearSelectedContact"
@update-dropdown="handleDropdownUpdate"
/>
<EmailMessageEditor
v-model="state.message"
class="bg-n-alpha-3"
:content="content"
:is-plain-email="isPlainEmail"
:has-quoted-message="hasQuotedMessage"
:full-html="fullHtml"
:unquoted-html="unquotedHtml"
:text-to-show="textToShow"
/>
<section
v-if="Array.isArray(attachments) && attachments.length"
class="px-4 pb-4 pt-2 !border-t-0 space-y-2 bg-n-alpha-3"
>
<AttachmentChips
:attachments="attachments"
class="gap-1 !justify-start"
<div class="overflow-y-scroll">
<EmailMessageEditor
v-model="state.message"
class="bg-n-alpha-3"
:content="content"
:is-plain-email="isPlainEmail"
:has-quoted-message="hasQuotedMessage"
:full-html="fullHtml"
:unquoted-html="unquotedHtml"
:text-to-show="textToShow"
/>
</section>
<section
v-if="Array.isArray(attachments) && attachments.length"
class="px-4 pb-4 pt-2 !border-t-0 space-y-2 bg-n-alpha-3"
>
<AttachmentChips
:attachments="attachments"
class="gap-1 !justify-start"
/>
</section>
</div>
<AttachmentPreviews
v-if="state.attachedFiles.length > 0"
:attachments="state.attachedFiles"