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

Merge remote-tracking branch 'origin/main' into profile-modal
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details
ci/woodpecker/pr/build-and-publish Pipeline was successful
Details

Browse source
This commit is contained in:
Twig 2025-08-04 20:20:20 +02:00
commit 83d4f02c3a
Signed by: twig
SSH key fingerprint: SHA256:nBO+OwpTkd8LYhe38PIqdxmDvkIg9Vw2EbrRZM97dkU
18 changed files with 147 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

30
components/Message.vue
View file

@ -1,5 +1,5 @@
<template>
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
<div v-if="props.replyMessage" class="message-reply-svg">
@ -47,7 +47,7 @@
</div>
<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
</div>
<div v-else ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
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">
<div class="left-column">
@ -68,11 +68,14 @@ import { parse } from 'marked';
import type { MessageProps } from '~/types/props';
import MessageMedia from './MessageMedia.vue';
import MessageReply from './UserInterface/MessageReply.vue';
import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
const { getDisplayName } = useProfile()
const props = defineProps<MessageProps>();
const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
const messageElement = ref<HTMLDivElement>();
const dateHidden = ref<boolean>(true);
@ -128,9 +131,6 @@ onMounted(async () => {
}
if (mediaLinks.length) {
hasEmbed.value = true
setTimeout(() => {
scrollToBottom(document.getElementById("messages") as HTMLDivElement);
}, 500);
};
} catch (error) {
console.error(error);
@ -144,13 +144,19 @@ console.log("media links:", mediaLinks);
// showHover.value = !showHover.value;
//}
const menuItems = [
{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
const menuItems: ContextMenuItem[] = [
{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
]
console.log("me:", props.me);
if (props.author?.uuid == props.me.uuid) {
menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
// 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) */ } });
}
if (props.author?.uuid == props.me.uuid /* || check message delete permission*/) {
// Inserts "edit" option at index 2 (below the "edit" option)
menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
}
function getDayDifference(date1: Date, date2: Date) {
@ -286,3 +292,11 @@ function getDayDifference(date1: Date, date2: Date) {
padding-left: 1em;
}
</style>
<style>
.replying-to {
background-color: var(--primary-highlighted-color);
}
</style>