Mirrors/gomuks
1
0
Fork 1
mirror of https://github.com/tulir/gomuks.git synced 2025-04-20 10:33:41 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

web/timeline: highlight messages that mention you

Browse source
This commit is contained in:
Tulir Asokan 2024-10-18 01:16:13 +03:00
parent 2179fb2c18
commit e00baf6853
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
web/src/ui/timeline/TimelineEvent.css
View file

@ -10,8 +10,16 @@ div.timeline-event {
"avatar gap content status" auto "avatar gap content status" auto
/ 2.5rem .5rem 1fr 2rem; / 2.5rem .5rem 1fr 2rem;
&.highlight {
background-color: rgba(255, 255, 0, .1);
}
&:hover { &:hover {
background-color: #eee; background-color: #eee;
&.highlight {
background-color: #eec;
}
} }
> div.sender-avatar { > div.sender-avatar {

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

@ -16,7 +16,7 @@
import React, { use, useCallback } from "react" import React, { use, useCallback } from "react"
import { getAvatarURL } from "@/api/media.ts" import { getAvatarURL } from "@/api/media.ts"
import { RoomStateStore } from "@/api/statestore" import { RoomStateStore } from "@/api/statestore"
import { MemDBEvent, MemberEventContent } 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 "../Lightbox.tsx" import { LightboxContext } from "../Lightbox.tsx"
@ -24,11 +24,7 @@ import { ReplyIDBody } from "./ReplyBody.tsx"
import EncryptedBody from "./content/EncryptedBody.tsx" import EncryptedBody from "./content/EncryptedBody.tsx"
import HiddenEvent from "./content/HiddenEvent.tsx" import HiddenEvent from "./content/HiddenEvent.tsx"
import MemberBody from "./content/MemberBody.tsx" import MemberBody from "./content/MemberBody.tsx"
import { import { MediaMessageBody, TextMessageBody, UnknownMessageBody } from "./content/MessageBody.tsx"
MediaMessageBody,
TextMessageBody,
UnknownMessageBody,
} from "./content/MessageBody.tsx"
import RedactedBody from "./content/RedactedBody.tsx" import RedactedBody from "./content/RedactedBody.tsx"
import { EventContentProps } from "./content/props.ts" import { EventContentProps } from "./content/props.ts"
import ErrorIcon from "../../icons/error.svg?react" import ErrorIcon from "../../icons/error.svg?react"
@ -122,6 +118,9 @@ const TimelineEvent = ({ room, evt, prevEvt, setReplyTo }: TimelineEventProps) =
const eventTS = new Date(evt.timestamp) const eventTS = new Date(evt.timestamp)
const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null const editEventTS = evt.last_edit ? new Date(evt.last_edit.timestamp) : null
const wrapperClassNames = ["timeline-event"] const wrapperClassNames = ["timeline-event"]
if (evt.unread_type & UnreadType.Highlight) {
wrapperClassNames.push("highlight")
}
let smallAvatar = false let smallAvatar = false
if (isSmallEvent(BodyType)) { if (isSmallEvent(BodyType)) {
wrapperClassNames.push("hidden-event") wrapperClassNames.push("hidden-event")