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 a bubble around reactions

Browse source
This commit is contained in:
Tulir Asokan 2024-10-21 23:20:02 +03:00
parent f5eeb8461a
commit 293a6416fc
2 changed files with 21 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -136,6 +136,24 @@ div.timeline-event {
} }
} }
div.event-content > div.event-reactions {
display: flex;
gap: .25rem;
margin: .25rem 0;
> span.reaction {
background-color: #efe;
border: 1px solid #ada;
border-radius: 2rem;
padding: 0 .5rem;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 20rem;
}
}
div.hidden-event > div.sender-avatar, blockquote.reply-body > div.reply-sender > div.sender-avatar { div.hidden-event > div.sender-avatar, blockquote.reply-body > div.reply-sender > div.sender-avatar {
margin-top: 0; margin-top: 0;
display: flex; display: flex;

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

@ -41,9 +41,9 @@ const formatShortTime = (time: Date) =>
const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => { const EventReactions = ({ reactions }: { reactions: Record<string, number> }) => {
return <div className="event-reactions"> return <div className="event-reactions">
{Object.entries(reactions).map(([reaction, count]) => <span key={reaction} className="reaction"> {Object.entries(reactions).map(([reaction, count]) => count > 0 ? <span key={reaction} className="reaction" title={reaction}>
{reaction} {count} <span className="reaction">{reaction}</span> <span className="reaction-count">{count}</span>
</span>)} </span> : null)}
</div> </div>
} }