Skip to content

Issue controls panel UI #81

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

Merged
merged 12 commits into from
May 12, 2025

Conversation

Yahiewi
Copy link
Contributor

@Yahiewi Yahiewi commented Apr 23, 2025

Made the controls panel resizable to manly fix the issue of joint names being too long to read:
-Added the pseudo element .urdf-gui::before in base.css for the invisible handle.
-Added a min and max width for the panel.
-Overwritten style for the "close controls" button to fix some issues.
-Added a function _setupResizeHandling in controls.ts to implement this.

Copy link
Contributor

Binder 👈 Launch a Binder on branch Yahiewi/jupyterlab-urdf/issue-controls-panel-ui

@IsabelParedes IsabelParedes added bug Something isn't working enhancement New feature or request labels Apr 23, 2025
@Yahiewi Yahiewi force-pushed the issue-controls-panel-ui branch from 7403b2d to 2246948 Compare April 23, 2025 15:08
@IsabelParedes
Copy link
Member

Resolves #57

Copy link
Member

@IsabelParedes IsabelParedes left a comment

Choose a reason for hiding this comment

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

gui short gui long

This is going in the right direction, but it could be better. At the moment, when the panel is resized, all 3 columns (joint names, sliders, and input boxes) stretch. We should keep the width of the sliders and input boxes fixed so that the joint names can occupy the newly created space when resizing the gui.

@Yahiewi Yahiewi requested a review from IsabelParedes April 30, 2025 08:20
@Yahiewi
Copy link
Contributor Author

Yahiewi commented Apr 30, 2025

The control panel now resizes as requested:
-The div containing the slider and input box stretches to a maximum of 180 pixels (when the controls panel is stretched) and doesn't have a minimum width so it can shrink along with the controls panel.
-The control panel has a maximum width of 98% which allows it to stretch almost as wide as the canvas.

Copy link
Member

@IsabelParedes IsabelParedes left a comment

Choose a reason for hiding this comment

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

The resizing seems to be working well, however, long joint names are still being truncated and there's leftover space that is not being used.

image

To fix this, this div could be turned into a flex container.

<li class="cr number has-slider">
    <div>...</div>
</li>

Then the style of the property-name can be changed so that it can grow and not shrink and keep the default width of 40%. Then also setting the overflow to scroll instead of hidden for those extra long joint names.

The resizing functionality is good, but for future reference, it might be worth looking into Resize Observers.

@Yahiewi Yahiewi requested a review from IsabelParedes May 7, 2025 08:57
@Yahiewi
Copy link
Contributor Author

Yahiewi commented May 7, 2025

I made some CSS changes to fix the overflow for the joint names by making the div that contains the control row into a flex container and tweaking some parameters.
I also added a horizontal scrollbar that only appears on hover for the extra long joint names (or if a user prefers to use it instead of resizing the panel). This doesn't work as perfectly on Chromium based browsers (I've tested on Brave and Chrome) as it does on Firefox.

@Yahiewi
Copy link
Contributor Author

Yahiewi commented May 12, 2025

I merged the changes from main to resolve the conflict that existed.

Copy link
Member

@IsabelParedes IsabelParedes left a comment

Choose a reason for hiding this comment

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

Works great! Thanks!

@IsabelParedes IsabelParedes merged commit 070f3c8 into jupyter-robotics:main May 12, 2025
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants