Update webviews to vscode style #1554
Conversation
|
Pull request has been marked as |
brianignacio5
added
ongoing
|
Download the artifacts for this pull request: |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
brianignacio5
force-pushed
the
enhance/vscode-elements
branch
from
80147a1 to
27eea99
Compare
There was a problem hiding this comment.
Nice work! It looks much better and I think we can push it as it is.
If we want to spend more time on this UI changes, I do have some feedback for small improvements to make the style identical to vs code's regarding SDKMenuconfig as well as some personal preferences on the "Welcome Page".
Personal Prefferences:
Welcome page:
-
Remove bottom border from header (picture-1)
-
Remove double sidebar (picture-2)
Must based on VS Code style
If we want to copy style from "Preferences: Open Settings (UI)" Vs Code
SDK Config MENU
- On the left side list of categories (collapsible event should be triggered also on text, currently is just on the icon)
- Elements on the left side list should not have padding
- "Replace ESP-IDF and project paths in binaries" option not working
- Clicking on the categories on the left side list is not accurate, the scroll with have an offset(this will make the category above to be bold)
- Parent elements on the right menu do not have hover effect. Ex: Enable C++ exceptions (picture-3)
- Main categories' font should be 26px, sub categories' font 22px, sub-sub categories' 18px. Our subcategories' font is 26px
- Categories and subcategories should have a padding: 10px 10px 10px 15px. We don't have padding, we have a bottom margin of 0.25em
- Dropdowns' height should be 26px and inputs' height should be 25px
- Elements should have margin top or bottom of 9px. We have 0.5em (on .form-group) + [0.75em (.field:not(:last-child)) or +0.5rem (.field)]
- Search bar should be active when opening the menu
- Scroll bar has different style from vs codes' which does not have arrows and it's slimmer
- When scrolling to sdk config editor, main categories, sub-categories and sub-sub-categories should be sticky, just like in the vscode terminal
- Search bar's height should be 26px
- Padding inside dropdowns should be 2px (for top and bottom, currently is set to 4px)
- On the right menu elements, information icon could be vertically centered to be aligned with the text next to it
If you want to make some of these changes, but they are unclear, we can have a quick call.
brianignacio5
force-pushed
the
enhance/vscode-elements
branch
from
aa4e4ad to
999131f
Compare
There was a problem hiding this comment.
The Show examples command was removed correct? Should be removed on the qemu.rst file as well. Note that the "New Project" command should refer to "New Project Wizard".
Fabricio-ESP
left a comment
Fabricio-ESP
left a comment
There was a problem hiding this comment.
Confirmed new deign working as expected. tested on muitliple OS.
Description
This PR aims to introduce vscode styles in our web views to match vscode aesthetics by updating webviews style to match vscode settings UI.
Type of change
Steps to test this pull request
Provide a list of steps to test changes in this PR and required output
Expected behaviour:
Expected output:
How has this been tested?
Manual steps above. Changes in this PR are UI so take a look and see if this feel like a vscode UI.
Test Configuration:
Checklist