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

web/timeline: add title for message timestamp

Browse source
This commit is contained in:
Tulir Asokan 2024-10-11 23:32:24 +03:00
parent 15b7380b29
commit 10dd28bfda
2 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -63,6 +63,10 @@ div.html-body {
overflow: auto;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5rem;
}
p, ul, ol, dl, table, pre, blockquote {
&:not(:last-child) {
margin: 0 0 .25rem;

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

@ -39,6 +39,10 @@ function getBodyType(evt: MemDBEvent): React.FunctionComponent<EventContentProps
return HiddenEvent
}
const fullTimeFormatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "full", timeStyle: "medium" })
const formatShortTime = (time: Date) =>
`${time.getHours().toString().padStart(2, "0")}:${time.getMinutes().toString().padStart(2, "0")}`
const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
const evt = room.eventsByRowID.get(eventRowID)
if (!evt) {
@ -52,13 +56,14 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
// <BodyType room={room} event={evt}/>
// </div>
// }
const eventTS = new Date(evt.timestamp)
return <div className="timeline-event">
<div className="sender-avatar">
<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
</div>
<div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span>
<span className="event-time">{new Date(evt.timestamp).toLocaleTimeString()}</span>
<span className="event-time" title={fullTimeFormatter.format(eventTS)}>{formatShortTime(eventTS)}</span>
</div>
<div className="event-content">
<BodyType room={room} event={evt}/>