UI: Floating toolbar labels. #2561
Conversation
|
Thank you for your contribution and Welcome to our Open Source Community! To make sure your pull request is accepted successfully, we ask all our open source contributors to sign a Contributor License Agreement; having reviewed our contributor list, we require a CLA for the following people : (@brianblakely). The repository you are attempting to contribute to uses a CLA Bot to check pull requests; in order to be added to the CLA Bot you must follow these instructions. Thank you once again for your contribution. Let us work with you to make the CLA process quick, easy and efficient so we can move forward with reviewing and accepting your pull request. Feel free to email help@finos.org for any questions. |
There was a problem hiding this comment.
This image was centered.
There was a problem hiding this comment.
A light variant of this graphic was required for Pro Light, because the original was the same color as the dropdown background.
There was a problem hiding this comment.
Slightly more semantic/accessible.
There was a problem hiding this comment.
This image now configurable by theme.
There was a problem hiding this comment.
Merely whitespace consistency.
| width: calc(100% + 28px); | ||
| height: 36px; | ||
| } | ||
|
|
There was a problem hiding this comment.
Pseudo-element positioned in gap allows cursor to traverse from toolbar button to dropdown without losing hover.
|
@cla-bot[bot] check |
|
The cla-bot has been summoned, and re-checked this pull request! |
Issue
When hovering over the viewer toolbar, button width changes and shifts the position of buttons onscreen. This can be problematic if you hover over a toolbar button en-route to, for example, the theme picker, as illustrated below. In the diagram, X1 is the original distance from the plugin selector to the theme picker, and X2 is the new distance after hovering over another toolbar button en route.
Proposed Solution
Instead of rendering button labels inline, render them floating below the toolbar buttons. This floating system works with the theme picker dropdown as well.
simplescreenrecorder-2024-03-10_21.19.25.mp4