Show the related activity events on hover/click in timeline #2790
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
KATIETOLER
requested review from
Alex-Tideman and
andrewzamojc
and removed request for
rossedfort
andrewzamojc
left a comment
andrewzamojc
left a comment
There was a problem hiding this comment.
Code looks pretty good to me! I'll try it shortly.
| tr[data-testid='event-summary-row'].active:hover { | ||
| @apply border-l-4 border-slate-600 bg-slate-300; | ||
| } |
There was a problem hiding this comment.
Suggestion: Any reason not to do this with tailwind? Instead of conditionally applying the .active class and styling it here, you could probably modify you're first class entry
class={[
// existing
'hover:cursor-pointer',
// new
hasRelatedActivities(group, hoveredEventId) && 'bg-slate-800 hover:bg-slate-300 etc'
]}
or something like that.
| /> | ||
| {:else} | ||
| <EventSummaryRow | ||
| bind:hoveredEventId |
There was a problem hiding this comment.
Comment: Pretty slick solution.
|
This is looking great! One suggestion, I would try to flip the hover backgrounds so the background of the row you are currently hovering is the brighter background, and the related backgrounds are the more subtle ones. See how it looks. 
|
|
We'll want a different color too for light mode 
|
|
Looking awesome! Couple of tiny little things: I would have all rows be the interactive bg on hover, it's a little confusing when they are different colors depending on what the row is (workflow task doesn't have the interactive bg for example) On light mode, let's make the event id white text on row hover. all the other text is white on hover except that. RowHighlighting.mov |
…-hover for better contrast and consistency on hover
This is the first step in adding highlighting related activities in the event timeline/summary row.
when hovering on an activity event row, a user can see a visual indicator on the related event rows
Next steps: