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: 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
/ 2.5rem .25rem 1fr 2rem;
&:hover {
background-color: #eee;
}
> div.sender-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 {
overflow: hidden;
img[data-mx-emoticon] {

19
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 dateFormatter = new Intl.DateTimeFormat("en-GB", { dateStyle: "full" })
const formatShortTime = (time: Date) =>
`${time.getHours().toString().padStart(2, "0")}:${time.getMinutes().toString().padStart(2, "0")}`
@ -92,7 +93,7 @@ const TimelineEvent = ({ room, evt, prevEvt }: TimelineEventProps) => {
const fullTime = fullTimeFormatter.format(eventTS)
const shortTime = formatShortTime(eventTS)
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}>
<img
className="avatar"
@ -117,6 +118,22 @@ const TimelineEvent = ({ room, evt, prevEvt }: TimelineEventProps) => {
</div>
{evt.transaction_id ? <EventSendStatus evt={evt}/> : null}
</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