gorb/frontend
4
0
Fork 0
Code Issues 14 Pull requests 2 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>
<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"/>
<span class="member-display-name" :style="`color: ${generateIrcColor(props.member.user.uuid)}`">
{{ getDisplayName(props.member) }}
@ -15,8 +15,6 @@ import type { ContextMenuInterface, GuildMemberResponse } from '~/types/interfac
const { getDisplayName } = useProfile()
const contextMenu = useState<ContextMenuInterface>("contextMenu");
const props = defineProps<{
member: GuildMemberResponse
}>();

14
components/Message.vue
View file

@ -1,5 +1,5 @@
<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)) }"
:data-message-id="props.message.uuid" :editing.sync="props.editing">
<div v-if="props.replyMessage" class="message-reply-svg">
@ -27,12 +27,12 @@
:text="props.replyMessage?.message"
:reply-id="props.replyMessage.uuid" max-width="reply" />
<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 class="message-data">
<div class="message-metadata">
<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) }}
</span>
<span class="message-date" :title="date.toString()">
@ -46,7 +46,7 @@
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</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 }"
:data-message-id="props.message.uuid" :editing.sync="props.editing">
<div class="left-column">
@ -81,8 +81,6 @@ const props = defineProps<MessageProps>();
const me = await getUser()
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, sections: [] }));
const messageElement = ref<HTMLDivElement>();
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: () => {} });
}
messageMenuSections.push(regularSection);
if (regularSection.items.length) {
messageMenuSections.push(regularSection);
}
function getDayDifference(date1: Date, date2: Date) {
const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());

10
components/UserInterface/ResizableSidebar.vue
View file

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

25
utils/showContextMenu.ts
View file

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