n/nyxmuks
1
0
Fork 0
forked from Mirrors/gomuks
Code Pull requests Activity

web/timeline: open user panel when clicking on avatar

Browse source
This commit is contained in:
Tulir Asokan 2024-11-12 16:51:10 +02:00
parent 321b53a98a
commit 9b65140302
2 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/ui/MainScreen.tsx
View file

@ -76,6 +76,8 @@ class ContextFields implements MainScreenContextFields {
const type = evt.currentTarget.getAttribute("data-target-panel") const type = evt.currentTarget.getAttribute("data-target-panel")
if (type === "pinned-messages" || type === "members") { if (type === "pinned-messages" || type === "members") {
this.setRightPanel({ type }) this.setRightPanel({ type })
} else if (type === "user") {
this.setRightPanel({ type, userID: evt.currentTarget.getAttribute("data-target-user")! })
} else { } else {
throw new Error(`Invalid right panel type ${type}`) throw new Error(`Invalid right panel type ${type}`)
} }

12
web/src/ui/timeline/TimelineEvent.tsx
View file

@ -19,7 +19,7 @@ import { useRoomState } from "@/api/statestore"
import { MemDBEvent, MemberEventContent, UnreadType } from "@/api/types" import { MemDBEvent, MemberEventContent, UnreadType } from "@/api/types"
import { isEventID } from "@/util/validation.ts" import { isEventID } from "@/util/validation.ts"
import ClientContext from "../ClientContext.ts" import ClientContext from "../ClientContext.ts"
import { LightboxContext } from "../modal/Lightbox.tsx" import MainScreenContext from "../MainScreenContext.ts"
import { useRoomContext } from "../roomview/roomcontext.ts" import { useRoomContext } from "../roomview/roomcontext.ts"
import { ReplyIDBody } from "./ReplyBody.tsx" import { ReplyIDBody } from "./ReplyBody.tsx"
import { ContentErrorBoundary, HiddenEvent, getBodyType, isSmallEvent } from "./content" import { ContentErrorBoundary, HiddenEvent, getBodyType, isSmallEvent } from "./content"
@ -71,6 +71,7 @@ const EventSendStatus = ({ evt }: { evt: MemDBEvent }) => {
const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => { const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => {
const roomCtx = useRoomContext() const roomCtx = useRoomContext()
const client = use(ClientContext)! const client = use(ClientContext)!
const mainScreen = use(MainScreenContext)
const [forceContextMenuOpen, setForceContextMenuOpen] = useState(false) const [forceContextMenuOpen, setForceContextMenuOpen] = useState(false)
const memberEvt = useRoomState(roomCtx.store, "m.room.member", evt.sender) const memberEvt = useRoomState(roomCtx.store, "m.room.member", evt.sender)
const memberEvtContent = memberEvt?.content as MemberEventContent | undefined const memberEvtContent = memberEvt?.content as MemberEventContent | undefined
@ -104,12 +105,17 @@ const TimelineEvent = ({ evt, prevEvt, disableMenu }: TimelineEventProps) => {
{!disableMenu && <div className={`context-menu-container ${forceContextMenuOpen ? "force-open" : ""}`}> {!disableMenu && <div className={`context-menu-container ${forceContextMenuOpen ? "force-open" : ""}`}>
<EventMenu evt={evt} setForceOpen={setForceContextMenuOpen}/> <EventMenu evt={evt} setForceOpen={setForceContextMenuOpen}/>
</div>} </div>}
{renderAvatar && <div className="sender-avatar" title={evt.sender}> {renderAvatar && <div
className="sender-avatar"
title={evt.sender}
data-target-panel="user"
data-target-user={evt.sender}
onClick={mainScreen.clickRightPanelOpener}
>
<img <img
className={`${smallAvatar ? "small" : ""} avatar`} className={`${smallAvatar ? "small" : ""} avatar`}
loading="lazy" loading="lazy"
src={getAvatarURL(evt.sender, memberEvtContent)} src={getAvatarURL(evt.sender, memberEvtContent)}
onClick={use(LightboxContext)!}
alt="" alt=""
/> />
</div>} </div>}