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

web/timeline: add date separators

Browse source
This commit is contained in:
Tulir Asokan 2024-10-12 18:37:46 +03:00
parent d8582a4abe
commit 371cd599a8
2 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,10 @@ div.timeline-event {
"avatar gap content status" auto "avatar gap content status" auto
/ 2.5rem .25rem 1fr 2rem; / 2.5rem .25rem 1fr 2rem;
&:hover {
background-color: #eee;
}
> div.sender-avatar { > div.sender-avatar {
grid-area: avatar; grid-area: avatar;
@ -111,6 +115,17 @@ div.timeline-event {
} }
} }
div.date-separator {
display: flex;
align-items: center;
gap: .5rem;
> hr {
flex: 1;
opacity: .2;
}
}
div.html-body { div.html-body {
overflow: hidden; overflow: hidden;
img[data-mx-emoticon] { img[data-mx-emoticon] {

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

@ -54,6 +54,7 @@ function getBodyType(evt: MemDBEvent): React.FunctionComponent<EventContentProps
} }
const fullTimeFormatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "full", timeStyle: "medium" }) const fullTimeFormatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "full", timeStyle: "medium" })
const dateFormatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "full" })
const formatShortTime = (time: Date) => const formatShortTime = (time: Date) =>
`${time.getHours().toString().padStart(2, "0")}:${time.getMinutes().toString().padStart(2, "0")}` `${time.getHours().toString().padStart(2, "0")}:${time.getMinutes().toString().padStart(2, "0")}`
@ -67,11 +68,11 @@ const EventReactions = ({ reactions }: { reactions: Record<string, number> }) =>
const EventSendStatus = ({ evt }: { evt: MemDBEvent }) => { const EventSendStatus = ({ evt }: { evt: MemDBEvent }) => {
if (evt.send_error && evt.send_error !== "not sent") { if (evt.send_error && evt.send_error !== "not sent") {
return <div className="event-send-status error" title={evt.send_error}><ErrorIcon /></div> return <div className="event-send-status error" title={evt.send_error}><ErrorIcon/></div>
} else if (evt.event_id.startsWith("~")) { } else if (evt.event_id.startsWith("~")) {
return <div className="event-send-status sending"><PendingIcon /></div> return <div className="event-send-status sending"><PendingIcon/></div>
} else { } else {
return <div className="event-send-status sent"><SentIcon /></div> return <div className="event-send-status sent"><SentIcon/></div>
} }
} }
@ -92,7 +93,7 @@ const TimelineEvent = ({ room, evt, prevEvt }: TimelineEventProps) => {
const fullTime = fullTimeFormatter.format(eventTS) const fullTime = fullTimeFormatter.format(eventTS)
const shortTime = formatShortTime(eventTS) const shortTime = formatShortTime(eventTS)
const editTime = editEventTS ? `Edited at ${fullTimeFormatter.format(editEventTS)}` : null const editTime = editEventTS ? `Edited at ${fullTimeFormatter.format(editEventTS)}` : null
return <div className={wrapperClassNames.join(" ")}> const mainEvent = <div className={wrapperClassNames.join(" ")}>
<div className="sender-avatar" title={evt.sender}> <div className="sender-avatar" title={evt.sender}>
<img <img
className="avatar" className="avatar"
@ -117,6 +118,22 @@ const TimelineEvent = ({ room, evt, prevEvt }: TimelineEventProps) => {
</div> </div>
{evt.transaction_id ? <EventSendStatus evt={evt}/> : null} {evt.transaction_id ? <EventSendStatus evt={evt}/> : null}
</div> </div>
let dateSeparator = null
const prevEvtDate = prevEvt ? new Date(prevEvt.timestamp) : null
if (prevEvtDate && (
eventTS.getDay() !== prevEvtDate.getDay() ||
eventTS.getMonth() !== prevEvtDate.getMonth() ||
eventTS.getFullYear() !== prevEvtDate.getFullYear())) {
dateSeparator = <div className="date-separator">
<hr role="none"/>
{dateFormatter.format(eventTS)}
<hr role="none"/>
</div>
}
return <>
{dateSeparator}
{mainEvent}
</>
} }
export default TimelineEvent export default TimelineEvent