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

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; overflow: auto;
} }
h1, h2, h3, h4, h5, h6 {
margin: 0 0 .5rem;
}
p, ul, ol, dl, table, pre, blockquote { p, ul, ol, dl, table, pre, blockquote {
&:not(:last-child) { &:not(:last-child) {
margin: 0 0 .25rem; 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 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 TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
const evt = room.eventsByRowID.get(eventRowID) const evt = room.eventsByRowID.get(eventRowID)
if (!evt) { if (!evt) {
@ -52,13 +56,14 @@ const TimelineEvent = ({ room, eventRowID }: TimelineEventProps) => {
// <BodyType room={room} event={evt}/> // <BodyType room={room} event={evt}/>
// </div> // </div>
// } // }
const eventTS = new Date(evt.timestamp)
return <div className="timeline-event"> return <div className="timeline-event">
<div className="sender-avatar"> <div className="sender-avatar">
<img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" /> <img loading="lazy" src={getMediaURL(memberEvtContent?.avatar_url)} alt="" />
</div> </div>
<div className="event-sender-and-time"> <div className="event-sender-and-time">
<span className="event-sender">{memberEvtContent?.displayname ?? evt.sender}</span> <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>
<div className="event-content"> <div className="event-content">
<BodyType room={room} event={evt}/> <BodyType room={room} event={evt}/>