UI: Floating toolbar labels. #2561
Conversation
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.
|
@brianblakely Thanks for the PR! I've cherry-picked these commits into #2618 (1acea92), with a few modifications, a slightly different presentation, and I've reverted the Theme button changes as this dropdown specifically is particularly hairy to use in float position as you must hover the mouse through a narrow gauntlet to arrive on a clickable surface. Screen.Recording.2024-05-30.at.3.56.26.PM.mov#2618 has already been merged and will be in the 3.0 release. |
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