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

feat: get context menu state variable directly in showContextMenu instead of requiring a context menu object as a parameter

Browse source
This commit is contained in:
SauceyRed 2025-08-16 15:06:31 +02:00
parent 538566e9e1
commit 1d21d476d5
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
4 changed files with 26 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
components/Guild/MemberEntry.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, contextMenu, menuSections)"> <div class="member-item" @click.prevent="showModalPopup" tabindex="0" @contextmenu="showContextMenu($event, menuSections)">
<Avatar :profile="props.member" class="member-avatar"/> <Avatar :profile="props.member" class="member-avatar"/>
<span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`"> <span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
{{ getDisplayName(props.member) }} {{ getDisplayName(props.member) }}
@ -15,8 +15,6 @@ import type { ContextMenuInterface, GuildMemberResponse } from '~/types/interfac
const { getDisplayName } = useProfile() const { getDisplayName } = useProfile()
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const props = defineProps<{ const props = defineProps<{
member: GuildMemberResponse member: GuildMemberResponse
}>(); }>();

14
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, messageMenuSections)" <div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }" class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
:data-message-id="props.message.uuid" :editing.sync="props.editing"> :data-message-id="props.message.uuid" :editing.sync="props.editing">
<div v-if="props.replyMessage" class="message-reply-svg"> <div v-if="props.replyMessage" class="message-reply-svg">
@ -27,12 +27,12 @@
:text="props.replyMessage?.message" :text="props.replyMessage?.message"
:reply-id="props.replyMessage.uuid" max-width="reply" /> :reply-id="props.replyMessage.uuid" max-width="reply" />
<div class="left-column"> <div class="left-column">
<Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, contextMenu, memberMenuSections)" /> <Avatar :profile="props.message.member" class="message-author-avatar" @contextmenu="showContextMenu($event, memberMenuSections)" />
</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: ${generateIrcColor(props.message.member.user.uuid)}`" <span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`"
@contextmenu="showContextMenu($event, contextMenu, memberMenuSections)"> @contextmenu="showContextMenu($event, memberMenuSections)">
{{ getDisplayName(props.message.member) }} {{ getDisplayName(props.message.member) }}
</span> </span>
<span class="message-date" :title="date.toString()"> <span class="message-date" :title="date.toString()">
@ -46,7 +46,7 @@
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" /> <MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div> </div>
</div> </div>
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, messageMenuSections)" <div v-else ref="messageElement" @contextmenu="showContextMenu($event, messageMenuSections)"
class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }" class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
:data-message-id="props.message.uuid" :editing.sync="props.editing"> :data-message-id="props.message.uuid" :editing.sync="props.editing">
<div class="left-column"> <div class="left-column">
@ -81,8 +81,6 @@ const props = defineProps<MessageProps>();
const me = await getUser() const me = await getUser()
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
const messageElement = ref<HTMLDivElement>(); const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true); const dateHidden = ref<boolean>(true);
@ -193,7 +191,9 @@ if (props.message.member.user.uuid == me!.uuid) {
regularSection.items.push({ name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} }); regularSection.items.push({ name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
} }
messageMenuSections.push(regularSection); if (regularSection.items.length) {
messageMenuSections.push(regularSection);
}
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());

10
components/UserInterface/ResizableSidebar.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div ref="resizableSidebar" class="resizable-sidebar" @contextmenu="showContextMenu($event, contextMenu, menuSections)" <div ref="resizableSidebar" class="resizable-sidebar"
:style="{ :style="{
'width': storedWidth ? storedWidth : props.width, 'width': storedWidth ? storedWidth : props.width,
'min-width': props.minWidth, 'min-width': props.minWidth,
@ -8,13 +8,15 @@
'border-top': props.borderSides?.includes('top') ? borderStyling : undefined, 'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined, 'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
}"> }">
<div v-if="props.borderSides != 'right'" class="width-resizer-bar"> <div v-if="props.borderSides != 'right'" class="width-resizer-bar"
@contextmenu="showContextMenu($event, menuSections)">
<div ref="widthResizer" class="width-resizer"></div> <div ref="widthResizer" class="width-resizer"></div>
</div> </div>
<div class="sidebar-content"> <div class="sidebar-content">
<slot /> <slot />
</div> </div>
<div v-if="props.borderSides == 'right'" class="width-resizer-bar"> <div v-if="props.borderSides == 'right'" class="width-resizer-bar"
@contextmenu="showContextMenu($event, menuSections)">
<div ref="widthResizer" class="width-resizer"></div> <div ref="widthResizer" class="width-resizer"></div>
</div> </div>
</div> </div>
@ -31,8 +33,6 @@ const resizableSidebar = ref<HTMLDivElement>();
const widthResizer = ref<HTMLDivElement>(); const widthResizer = ref<HTMLDivElement>();
const storedWidth = ref<string>(); const storedWidth = ref<string>();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const menuSections: ContextMenuSection[] = [{ const menuSections: ContextMenuSection[] = [{
items: [ items: [
{ {

11
utils/showContextMenu.ts
View file

@ -2,16 +2,17 @@ import { render } from "vue";
import ContextMenu from "~/components/UserInterface/ContextMenu.vue"; import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from "~/types/interfaces"; import type { ContextMenuInterface, ContextMenuItem, ContextMenuSection } from "~/types/interfaces";
export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, sections: ContextMenuSection[]) => { export default (e: MouseEvent | PointerEvent, sections: ContextMenuSection[]) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
const contextMenu = useState<ContextMenuInterface>("contextMenu");
console.log("Menu sections:", sections); console.log("Menu sections:", sections);
if (sections.length) { if (sections.length) {
console.log("Showing context menu"); console.log("Showing context menu");
contextMenu.show = true; contextMenu.value.show = true;
contextMenu.pointerX = e.clientX; contextMenu.value.pointerX = e.clientX;
contextMenu.pointerY = e.clientY; contextMenu.value.pointerY = e.clientY;
contextMenu.sections = sections; contextMenu.value.sections = sections;
console.log("Showed"); console.log("Showed");
} }
} }