ui: improve tabbar styling #10822
Merged
ui: improve tabbar styling #10822
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 commit fixes the tabbar styling so that no shift happens when switching tabs (inactive/active). The fix includes: - adding a "transparent" border for inactive tabs. - removing extraneous code that made file-icons and the close icon shift when clicked. Signed-off-by: vince-fugnitto <vincent.fugnitto@ericsson.com>
vince-fugnitto
commented
Mar 1, 2022
Comment on lines
-264
to
-270
| .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .theia-tab-icon-label > .p-TabBar-tabIcon { | ||
| margin-top: -2px; | ||
| } | ||
|
|
||
| .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon { | ||
| margin-top: 0px; | ||
| } |
There was a problem hiding this comment.
@msujew I'm not sure why the changes were necessary for the current tab but it caused the shifting of the file-icon and the close to occur:
There was a problem hiding this comment.
Interesting, that only seems to happen on Chrome. I tested this (and build the original PR) on Firefox, where these lines of CSS fixed the shifting issue. But it seems like they introduced shifting in Chrome
|
I noticed a small regression with the preferences-ui which I'll address (unnecessary top border):
|
1 task
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.
What it does
The pull-request fixes some user-experience issues related to the tabbar styling.
Previously, when cycling through the tabs a shift would occur with the tab, file-icons, and close icons.
The pull-request addresses these problems by:
tab-styling.mp4
How to test
Review checklist
Reminder for reviewers
Signed-off-by: vince-fugnitto vincent.fugnitto@ericsson.com