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

Make context menu look nicer and handle rendering using v-if #58

Merged
sauceyred merged 12 commits from improved-context-menu into main 2025-08-04 01:55:47 +00:00
Conversation 2 Commits 12 Files changed 12 +9 -9
5 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d1518d1001 - Show all commits

2
app.vue
View file

@ -1,7 +1,7 @@
<template>
<div>
<Banner v-if="banner" />
<ContextMenu v-if="contextMenu && contextMenu.show" :cursor-x="contextMenu.cursorX" :cursor-y="contextMenu.cursorY" :menu-items="contextMenu.items" />
<ContextMenu v-if="contextMenu && contextMenu.show" :pointer-x="contextMenu.pointerX" :pointer-y="contextMenu.pointerY" :menu-items="contextMenu.items" />
<NuxtPage :keepalive="true" />
</div>
</template>

2
components/Message.vue
View file

@ -72,7 +72,7 @@ import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const props = defineProps<MessageProps>();
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, cursorX: 0, cursorY: 0, items: [] }));
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
const messageElement = ref<HTMLDivElement>();

4
types/interfaces.ts
View file

@ -107,7 +107,7 @@ export interface ContextMenuItem {
export interface ContextMenuInterface {
show: boolean,
cursorX: number,
cursorY: number,
pointerX: number,
pointerY: number,
items: ContextMenuItem[]
}

4
utils/removeContextMenu.ts
View file

@ -4,8 +4,8 @@ export default (contextMenu: Ref<ContextMenuInterface>) => {
console.log("resetting and hiding context menu");
contextMenu.value = {
show: false,
cursorX: 0,
cursorY: 0,
pointerX: 0,
pointerY: 0,
items: []
}
console.log("hidden context menu");

6
utils/showContextMenu.ts
View file

@ -2,11 +2,11 @@ import { render } from "vue";
import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
import type { ContextMenuInterface, ContextMenuItem } from "~/types/interfaces";
export default (e: MouseEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
export default (e: MouseEvent | PointerEvent, contextMenu: ContextMenuInterface, menuItems: ContextMenuItem[]) => {
console.log("Showing context menu");
contextMenu.show = true;
contextMenu.cursorX = e.clientX;
contextMenu.cursorY = e.clientY;
contextMenu.pointerX = e.clientX;
contextMenu.pointerY = e.clientY;
contextMenu.items = menuItems;
console.log("Showed");
}