Implement ToolbeltButton with tool switching capability #819
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
kmagiera
added a commit
that referenced
this pull request
Jan 10, 2025
#893) This PR reduces the amount of margins between buttons in order to make it easier to fit more UI controls while also giving the device preview as much space as possible in the panel. We've been struggling with fitting all the buttons that we needed in the panel. Specifically after adding screenshots and tools buttons to the top bar. While we may want to eventually group some of the functions (i.e. ones responsible for recording/screenshots) as proposed in #819 it still seems like we're not using our space efficiently enough. For example, the size of the icons is the same as with all the editor button bars that VSCode renders, while we only add a significantly big paddings around these. The buttons in VSCode are functional and for users who need them to be bigger, can adjust that by changing the font size in VSCode which also impacts the IDE panel UI. Despite the amount of spaces in between the buttons, this change also shaves off some padding above and below the device preview making it bigger when the panel size is limited. Beside the button size adjustment, we're also changing font size for down-arrow that displays under the "reload" button, otherwise it wouldn't fit the new height. We also change the font size and offset of the badge that gets displayed along with the logs button also to accommodate for the button size change. Finally, this PR also adds `onCloseAutoFocus` to the dropdown menus (panel and device settings) to prevent the buttons from going into a focused mode when the menu is closed. Before: <img width="477" alt="image" src="https://github.com/user-attachments/assets/4207f3f5-7678-4bc6-98d7-50272de6f559" /> After: <img width="486" alt="image" src="https://github.com/user-attachments/assets/3c59eb30-c87b-45cc-9073-040a4f68861f" /> ### How Has This Been Tested: 1. Run IDE on any project 2. Click thought the interface to make sure there are no issues cause by the size changes (i.e. no cropped or overlapping items) 3. Specifically test dialogs, arrow next to reload button and make sure the logs badge goes over to two digit numbers.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR introduces the
ToolbeltButtoncomponent. It consists of two parts: a primary tool button and a dropdown trigger button, which enables the user to switch the tool reflected in the main button.Demo:
(in an actual usage scenario, the recording button's CSS may require adjustments)
Screen.Recording.2024-12-03.at.14.30.05.mov