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

feat: add type property to ContextMenu and set delete message item to danger

Browse source
This commit is contained in:
SauceyRed 2025-08-03 20:28:14 +02:00
parent fbb72919c3
commit 7f98992839
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7
3 changed files with 7 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

6
components/Message.vue
View file

@ -146,18 +146,18 @@ console.log("media links:", mediaLinks);
//} //}
const menuItems: ContextMenuItem[] = [ const menuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", 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?.uuid == props.me.uuid) { if (props.author?.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", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } }); menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
} }
if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) { if (props.author?.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", callback: () => {} }); menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
} }
function getDayDifference(date1: Date, date2: Date) { function getDayDifference(date1: Date, date2: Date) {

4
components/UserInterface/ContextMenu.vue
View file

@ -1,6 +1,8 @@
<template> <template>
<div id="context-menu"> <div id="context-menu">
<button v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)"> <button v-for="item of props.menuItems" class="context-menu-item"
:class="'context-menu-item-' + item.type"
@click="runCallback(item)">
{{ item.name }} <Icon v-if="item.icon" :name="item.icon" /> {{ item.name }} <Icon v-if="item.icon" :name="item.icon" />
</button> </button>
</div> </div>

1
types/interfaces.ts
View file

@ -102,6 +102,7 @@ export interface ModalProps {
export interface ContextMenuItem { export interface ContextMenuItem {
name: string, name: string,
icon?: string, icon?: string,
type: "normal" | "danger"
callback: (...args: any[]) => any; callback: (...args: any[]) => any;
} }