diff --git a/web/src/ui/MessageComposer.tsx b/web/src/ui/MessageComposer.tsx index c6df7ca..4d40c11 100644 --- a/web/src/ui/MessageComposer.tsx +++ b/web/src/ui/MessageComposer.tsx @@ -180,7 +180,10 @@ const MessageComposer = ({ room, scrollToBottomRef, setReplyToRef }: MessageComp }, [room, state]) const openFilePicker = useCallback(() => fileInput.current!.click(), []) const clearMedia = useCallback(() => setState({ media: null }), []) - const closeReply = useCallback(() => setState({ replyTo: null }), []) + const closeReply = useCallback((evt: React.MouseEvent) => { + evt.stopPropagation() + setState({ replyTo: null }) + }, []) return
{replyToEvt && } {loadingMedia &&
} diff --git a/web/src/ui/timeline/ReplyBody.tsx b/web/src/ui/timeline/ReplyBody.tsx index 5423ce2..d05b723 100644 --- a/web/src/ui/timeline/ReplyBody.tsx +++ b/web/src/ui/timeline/ReplyBody.tsx @@ -25,7 +25,7 @@ import "./ReplyBody.css" interface ReplyBodyProps { room: RoomStateStore event: MemDBEvent - onClose?: () => void + onClose?: (evt: React.MouseEvent) => void } interface ReplyIDBodyProps { @@ -45,10 +45,31 @@ export const ReplyIDBody = ({ room, eventID }: ReplyIDBodyProps) => { return } +const onClickReply = (evt: React.MouseEvent) => { + const targetEvt = document.querySelector(`div[data-event-id="${evt.currentTarget.getAttribute("data-reply-to")}"]`) + if (targetEvt) { + targetEvt.scrollIntoView({ + block: "center", + }) + targetEvt.classList.add("jump-highlight") + setTimeout(() => { + targetEvt.classList.add("jump-highlight-fadeout") + targetEvt.classList.remove("jump-highlight") + setTimeout(() => { + targetEvt.classList.remove("jump-highlight-fadeout") + }, 1500) + }, 3000) + } +} + export const ReplyBody = ({ room, event, onClose }: ReplyBodyProps) => { const memberEvt = room.getStateEvent("m.room.member", event.sender) const memberEvtContent = memberEvt?.content as MemberEventContent | undefined - return
+ return
div.sender-avatar { diff --git a/web/src/ui/timeline/TimelineEvent.tsx b/web/src/ui/timeline/TimelineEvent.tsx index 1d1555e..19c4fe7 100644 --- a/web/src/ui/timeline/TimelineEvent.tsx +++ b/web/src/ui/timeline/TimelineEvent.tsx @@ -135,7 +135,7 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyToRef }: TimelineEventProps const shortTime = formatShortTime(eventTS) const editTime = editEventTS ? `Edited at ${fullTimeFormatter.format(editEventTS)}` : null const replyTo = (evt.orig_content ?? evt.content)["m.relates_to"]?.["m.in_reply_to"]?.event_id - const mainEvent =
+ const mainEvent =