Reduce spaces between icons on top and bottom bars in the IDE panel UI #893
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 ↗︎
|
filip131311
approved these changes
Jan 10, 2025
kmagiera
added a commit
that referenced
this pull request
Jan 13, 2025
kmagiera
added a commit
that referenced
this pull request
Jan 13, 2025
In #893 we updated styles to increase available space for icon buttons and for simulator. Apparently #893 introduced an error, because the button size constant was only being set for dark theme and not for the light one. This PR fixes this error by moving the definition of that size variable to the root object instead of keeping it to be theme-specific. Before: <img width="548" alt="image" src="https://github.com/user-attachments/assets/a764a0c9-d1ed-497d-b618-09c77b896e04" /> After: <img width="557" alt="image" src="https://github.com/user-attachments/assets/d401f8dd-3200-4baf-87f7-a4ccbdf5f7bf" /> ### How Has This Been Tested: 1. Open IDE in light mode. 2. Check if it looks good in dark mode too
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 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
onCloseAutoFocusto the dropdown menus (panel and device settings) to prevent the buttons from going into a focused mode when the menu is closed.Before:
After:
How Has This Been Tested: