gorb/frontend
4
0
Fork 0
Code Issues 15 Pull requests 7 Projects Releases Packages 1 Wiki Activity Actions

feat: add context menu for usernames in chat

Browse source
This commit is contained in:
SauceyRed 2025-08-07 08:55:33 +02:00
parent 0d0dccaf84
commit 25c5a0e4a8
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
1 changed files with 12 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/Message.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined" <div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuItems)" :id="props.last ? 'last-message' : undefined"
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId" class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
:editing.sync="props.editing" :replying-to.sync="props.replyingTo"> :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
<div v-if="props.replyMessage" class="message-reply-svg"> <div v-if="props.replyMessage" class="message-reply-svg">
@ -33,7 +33,7 @@
</div> </div>
<div class="message-data"> <div class="message-data">
<div class="message-metadata"> <div class="message-metadata">
<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`"> <span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`" @contextmenu="showContextMenu($event, contextMenu, memberMenuItems)">
{{ getDisplayName(props.author) }} {{ getDisplayName(props.author) }}
</span> </span>
<span class="message-date" :title="date.toString()"> <span class="message-date" :title="date.toString()">
@ -47,7 +47,7 @@
</div> </div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" /> <MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined" <div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuItems)" :id="props.last ? 'last-message' : undefined"
class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo"> :data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
<div class="left-column"> <div class="left-column">
@ -72,6 +72,8 @@ import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const { getDisplayName } = useProfile() const { getDisplayName } = useProfile()
const route = useRoute();
const props = defineProps<MessageProps>(); const props = defineProps<MessageProps>();
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] })); const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
@ -144,21 +146,23 @@ console.log("media links:", mediaLinks);
// showHover.value = !showHover.value; // showHover.value = !showHover.value;
//} //}
const menuItems: ContextMenuItem[] = [ const messageMenuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } } { name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
] ]
console.log("me:", props.me); console.log("me:", props.me);
if (props.author?.user.uuid == props.me.uuid) { if (props.author.user.uuid == props.me.uuid) {
// Inserts "edit" option at index 1 (below the "reply" option) // Inserts "edit" option at index 1 (below the "reply" option)
menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } }); messageMenuItems.splice(Math.min(1, messageMenuItems.length), 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
} }
if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) { if (props.author.user.uuid == props.me.uuid /* || check message delete permission*/) {
// Inserts "edit" option at index 2 (below the "edit" option) // Inserts "edit" option at index 2 (below the "edit" option)
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} }); messageMenuItems.splice(Math.min(2, messageMenuItems.length), 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
} }
const memberMenuItems = await createMemberContextMenuItems(props.author, route.params.serverId as string);
function getDayDifference(date1: Date, date2: Date) { function getDayDifference(date1: Date, date2: Date) {
const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()); const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()); const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());