Skip to content

chore: Improvements in Hovering and Selecting Pins and Nodes#213

Merged
GabiGrin merged 5 commits intoflydelabs:mainfrom
Wr4th100:Wr4th100/hover-and-select-improvements
Apr 4, 2025
Merged

chore: Improvements in Hovering and Selecting Pins and Nodes#213
GabiGrin merged 5 commits intoflydelabs:mainfrom
Wr4th100:Wr4th100/hover-and-select-improvements

Conversation

@Wr4th100
Copy link
Copy Markdown
Contributor

@Wr4th100 Wr4th100 commented Apr 2, 2025

/claim #207
/closes #207

Changes

Screenshots:

  1. Node Selection (Dark)
    darkselection

  2. Node Selection (Light)
    lightselection

  3. Hovering over a pin and a node (Video)

video.mp4

Updated the node header selection styles.
Added styles to help distinguish between hovering a pin and a node.
@GabiGrin
Copy link
Copy Markdown
Contributor

GabiGrin commented Apr 3, 2025

Thanks @Wr4th100! Code looks good, gonna play with it locally now

@GabiGrin GabiGrin self-requested a review April 3, 2025 11:56
Copy link
Copy Markdown
Contributor

@GabiGrin GabiGrin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wr4th100 when hovering the node and not a pin, the icon shouldn't be grayed out.
The "effect" should only be triggered if a pin is on hover.

See TW's group helper for a possible direction - https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

@Wr4th100
Copy link
Copy Markdown
Contributor Author

Wr4th100 commented Apr 3, 2025

@Wr4th100 when hovering the node and not a pin, the icon shouldn't be grayed out. The "effect" should only be triggered if a pin is on hover.

See TW's group helper for a possible direction - https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

I have made the changes @GabiGrin . Does this look right?

iconhoverchanges.mp4

@Wr4th100 Wr4th100 requested a review from GabiGrin April 3, 2025 17:18
@GabiGrin
Copy link
Copy Markdown
Contributor

GabiGrin commented Apr 3, 2025

Almost :) the other pins should be dimmed also only if a pin is hovered.
The motivation is to make it clear that a pin is hovered, but not hurt readability when the node itself is.

Copy link
Copy Markdown
Contributor

@GabiGrin GabiGrin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the other pins should be dimmed also only if a pin is hovered.
The motivation is to make it clear that a pin is hovered, but not hurt readability when the node itself is.

@Wr4th100
Copy link
Copy Markdown
Contributor Author

Wr4th100 commented Apr 3, 2025

Almost :) the other pins should be dimmed also only if a pin is hovered. The motivation is to make it clear that a pin is hovered, but not hurt readability when the node itself is.

Yes, that was bugging me for a while... I have updated the code accordingly. This is how it looks now:

nodeselectionchanges.mp4

@Wr4th100 Wr4th100 requested a review from GabiGrin April 3, 2025 19:22
Copy link
Copy Markdown
Contributor

@GabiGrin GabiGrin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Wr4th100 looks great now! Good job 🥂

@GabiGrin GabiGrin enabled auto-merge (squash) April 4, 2025 04:26
@GabiGrin GabiGrin merged commit a6970f6 into flydelabs:main Apr 4, 2025
1 check passed
@Wr4th100 Wr4th100 deleted the Wr4th100/hover-and-select-improvements branch April 4, 2025 07:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Distinguishing between a hovered pin and a hovered instance is hard + node selection indication needs improvement

2 participants