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

Merge pull request 'Implement reply highlighting' (#60) from highlight-reply into main
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
Details

Browse source 
Reviewed-on: #60
Reviewed-by: Twig <git@beaver.mom>
This commit is contained in:
SauceyRed 2025-08-04 01:58:41 +00:00
commit cb91dd9d0d
4 changed files with 29 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Message.vue
View file

@ -290,3 +290,11 @@ function getDayDifference(date1: Date, date2: Date) {
padding-left: 1em; padding-left: 1em;
} }
</style> </style>
<style>
.replying-to {
background-color: var(--primary-highlighted-color);
}
</style>

4
components/MessageArea.vue
View file

@ -221,6 +221,10 @@ function sendMessage(e: Event) {
if (messageReply && messageReply.dataset.messageId) { if (messageReply && messageReply.dataset.messageId) {
console.log("[MSG] message is a reply"); console.log("[MSG] message is a reply");
message.reply_to = messageReply.dataset.messageId; message.reply_to = messageReply.dataset.messageId;
const replyToMessage = document.querySelector(`.message[data-message-id='${message.reply_to}']`);
if (replyToMessage) {
replyToMessage.classList.remove("replying-to");
}
} }
console.log("[MSG] sent message:", message); console.log("[MSG] sent message:", message);

15
components/UserInterface/MessageReply.vue
View file

@ -46,11 +46,22 @@ onMounted(async () => {
function scrollToReply(e: MouseEvent) { function scrollToReply(e: MouseEvent) {
e.preventDefault(); e.preventDefault();
console.log("clicked on reply box"); console.log("clicked on reply box");
const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`); let replyId: string;
if (reply) { if (props.maxWidth == "reply") {
replyId = props.replyId;
} else {
replyId = props.id;
}
const reply = document.querySelector(`.message[data-message-id="${replyId}"]`);
if (reply instanceof HTMLDivElement) {
console.log("reply:", reply); console.log("reply:", reply);
console.log("scrolling into view"); console.log("scrolling into view");
reply.scrollIntoView({ behavior: "smooth", block: "center" }); reply.scrollIntoView({ behavior: "smooth", block: "center" });
reply.style.transition = "background-color .3s";
reply.style.backgroundColor = "var(--primary-highlighted-color)";
setTimeout(() => {
reply.style.backgroundColor = "";
}, 1000);
} }
} }

4
utils/replyToMessage.ts
View file

@ -10,5 +10,9 @@ export default (element: HTMLDivElement, props: MessageProps) => {
const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" }); const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
messageBox.prepend(div); messageBox.prepend(div);
render(messageReply, div); render(messageReply, div);
const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);
if (message) {
message.classList.add("replying-to");
}
} }
} }