[COMPASS-6112] Bring the nav tree items and connection list items in line with each other Created: 08/Sep/22  Updated: 05/Oct/22  Resolved: 23/Sep/22

Status: Closed
Project: Compass
Component/s: Sidebar
Affects Version/s: None
Fix Version/s: 1.34.0

Type: Task Priority: Major - P3
Reporter: Le Roux Bodenstein Assignee: Le Roux Bodenstein
Resolution: Done Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Epic Link: COMPASS-5486
Story Points: 3
Documentation Changes: Not Needed
Sprint: Iteration Kraken

 Description   

Follow-up from https://github.com/mongodb-js/compass/pull/3443

I'd like to have the sidebar nav hover effect (from the user's perspective) work like in the connections list where you hover "off" the tree item when hovering over the icon on the right. Then you can always see the hilight effect properly.

Also, from Sergey:
> You can restructure it if you want, if you keep your changes inside the tree item, it should not affect the keyboard navigation

> Also worth noting that similar refactor would be needed for the connection list because buttons are not lists and navigating it with a keyboard although at least possible compared to the previous implementation is not great at the moment

> Another issue with the layout done in connection list style to keep in mind is that you have to explicitly set some sort of offset on the sibling container, you can see that there we sort of always cut some text more than needed even when the button is not showing



 Comments   
Comment by Githook User [ 05/Oct/22 ]

Author:

{'name': 'Le Roux Bodenstein', 'email': 'lerouxb@gmail.com', 'username': 'lerouxb'}

Message: chore(sidebar): Make hover in the sidebar work like in the connection list COMPASS-6112 (#3496)

  • Make hover in the sidebar work like in the connection list
  • factor out databases navigation css
  • better solution
  • remove commented code
  • :lipstick:
  • Update packages/compass-databases-navigation/src/tree-item.tsx

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>

  • also apply the changes to navigation ite,s

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>
Branch: 1.34-releases
https://github.com/mongodb-js/compass/commit/df3eec15703fef183601fe3174362170d1fdc768

Comment by Githook User [ 28/Sep/22 ]

Author:

{'name': 'Le Roux Bodenstein', 'email': 'lerouxb@gmail.com', 'username': 'lerouxb'}

Message: chore(sidebar): Make hover in the sidebar work like in the connection list COMPASS-6112 (#3496)

  • Make hover in the sidebar work like in the connection list
  • factor out databases navigation css
  • better solution
  • remove commented code
  • :lipstick:
  • Update packages/compass-databases-navigation/src/tree-item.tsx

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>

  • also apply the changes to navigation ite,s

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>
Branch: update-compass-shell-to-shared-config
https://github.com/mongodb-js/compass/commit/df3eec15703fef183601fe3174362170d1fdc768

Comment by Githook User [ 23/Sep/22 ]

Author:

{'name': 'Le Roux Bodenstein', 'email': 'lerouxb@gmail.com', 'username': 'lerouxb'}

Message: chore(sidebar): Make hover in the sidebar work like in the connection list COMPASS-6112 (#3496)

  • Make hover in the sidebar work like in the connection list
  • factor out databases navigation css
  • better solution
  • remove commented code
  • :lipstick:
  • Update packages/compass-databases-navigation/src/tree-item.tsx

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>

  • also apply the changes to navigation ite,s

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>
Branch: align-background
https://github.com/mongodb-js/compass/commit/df3eec15703fef183601fe3174362170d1fdc768

Comment by Githook User [ 23/Sep/22 ]

Author:

{'name': 'Le Roux Bodenstein', 'email': 'lerouxb@gmail.com', 'username': 'lerouxb'}

Message: chore(sidebar): Make hover in the sidebar work like in the connection list COMPASS-6112 (#3496)

  • Make hover in the sidebar work like in the connection list
  • factor out databases navigation css
  • better solution
  • remove commented code
  • :lipstick:
  • Update packages/compass-databases-navigation/src/tree-item.tsx

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>

  • also apply the changes to navigation ite,s

Co-authored-by: Sergey Petushkov <petushkov.sergey@gmail.com>
Branch: main
https://github.com/mongodb-js/compass/commit/df3eec15703fef183601fe3174362170d1fdc768

Generated at Wed Feb 07 22:41:58 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.