Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

styling: TreeWidget Highlighted nodes full display #12470

Merged

Conversation

FernandoAscencio
Copy link
Contributor

What it does

There is a display discrepancy on selected nodes between Theia and VS Code, as seen below:

VS Code

VSCode

Theia

MasterDisplay

This commit fixes that discrepancy in display. As seen below:

This Commit

BranchDisplay

Notes

I have added some extra code handling to keep the current display of Theia. However, as seen in VS Code, the left margin/padding for the Search-In-Workspace and Source-Control trees is no different from the Explorer and Reference trees. As such, if the VS Code tree alignment is preferable, it would also reduce the number of lines added.

How to test

  1. Run example Theia
  2. Do a search and modify a file
  3. Check that the selection (both $\textcolor{blue}{\textsf{on focus}}$ and $\textcolor{gray}{\textsf{out of focus}}$) highlights the entire row instead of leaving a space.

Review checklist

Reminder for reviewers

@FernandoAscencio FernandoAscencio force-pushed the fa/TreeWidgetNodeStyling branch from 2d1d891 to fe08fd6 Compare April 27, 2023 20:34
@vince-fugnitto vince-fugnitto modified the milestone: 1.37.0 Apr 27, 2023
@msujew msujew self-requested a review May 31, 2023 20:25
Copy link
Member

@msujew msujew left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me. I couldn't see any regressions and the changes fix the issues at hand 👍

@vince-fugnitto vince-fugnitto added ui/ux issues related to user interface / user experience tree issues related to the tree (ex: tree widget) labels Jun 8, 2023
Copy link
Member

@vince-fugnitto vince-fugnitto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall the changes look much better when selecting or highlighting nodes in trees.
I only have a minor comment.

packages/search-in-workspace/src/browser/styles/index.css Outdated Show resolved Hide resolved
This commit changes how nodes are displayed to bring the selected node
display in line with VS Code

Signed-Off-By: FernandoAscencio <fernando.ascencio.cama@ericsson.com>
@FernandoAscencio FernandoAscencio force-pushed the fa/TreeWidgetNodeStyling branch from 5199df2 to a26e9f1 Compare July 5, 2023 15:05
@vince-fugnitto vince-fugnitto merged commit ecb8e1e into eclipse-theia:master Jul 13, 2023
@vince-fugnitto vince-fugnitto deleted the fa/TreeWidgetNodeStyling branch July 13, 2023 15:10
@vince-fugnitto vince-fugnitto added this to the 1.40.0 milestone Jul 27, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tree issues related to the tree (ex: tree widget) ui/ux issues related to user interface / user experience
Projects
Archived in project
Development

Successfully merging this pull request may close these issues.

3 participants