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

chore(ui): Object viewer expand/collapse button simplification #3308

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

m-rgba
Copy link
Contributor

@m-rgba m-rgba commented Dec 23, 2024

Description

  • Simplified object viewer buttons to use one button for collapse / expand.
  • Show / hide functionality for clicking the header to hide/show the object viewer.
  • Adjusted the sizing of the header for the object viewer.
  • Adjusted padding for the object viewer in the calls panel.

Screenshot

Before After
object-before object-after

@circle-job-mirror
Copy link

@m-rgba
Copy link
Contributor Author

m-rgba commented Dec 30, 2024

@m-rgba m-rgba marked this pull request as ready for review December 30, 2024 15:54
@m-rgba m-rgba requested review from a team as code owners December 30, 2024 15:54
Copy link
Member

@gtarpenning gtarpenning left a comment

Choose a reason for hiding this comment

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

I think this makes sense, I like the icon change. One micro tioli style suggestion.

Note: This will change our users experience of the object flow, they might go looking for this button we have removed.

Also, not your problem, but the object viewer not auto resizing after collapse is annoying
object-viewer-empty

tooltip="View collapsed"
/>
<Title
onClick={() => setMode(mode === 'hidden' ? 'collapsed' : 'hidden')}>
Copy link
Member

Choose a reason for hiding this comment

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

total nit but i've been thinking that 1 liner functions are more aesthetic than I previously thought, we might consider adding a local isModeHidden fn like:

function isModeHidden(mode) {
   return mode === 'hidden'
}
function isModeExpanded...

Copy link
Member

Choose a reason for hiding this comment

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

and then obviously use it everywhere we test the mode state

@m-rgba m-rgba changed the title chore(ui): Simplified object viewer chore(ui): Object viewer expand/collapse button simplification Dec 30, 2024
@m-rgba
Copy link
Contributor Author

m-rgba commented Dec 30, 2024

I think this makes sense, I like the icon change. One micro tioli style suggestion.

Note: This will change our users experience of the object flow, they might go looking for this button we have removed.

Also, not your problem, but the object viewer not auto resizing after collapse is annoying !

For sure - I thought it was an acceptable level of moving the cheese since we use the title collapse elsewhere for the entire viewer, and the collapse/expand buttons being separate buttons when they're really a toggle was kind of an anti-pattern and was cluttering it up.

Yeah I saw the height re-size as well but I thought it may be better for a separate PR cause I know there was some stuff around setting the explicit height and virtualization to take into account.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants