feat(resizable-side-panels): Make the left and right side panels (optionally) resizable. #4672
+648
−233
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
…i library. Added a dependency to react-resizable-panels. The resizing dependency and logic is contained in the ViewerLayout component. Added the isExpanded prop to SidePanel so that expanded/collapsed is no longer tied to the activeTabIndex prop. Refactored SidePanel so that the border sizing info are props and thus the resizable panels can calculate their sizes accordingly. The side panel width sizes were already props. Removed the open and close transition (animation) for the side panels. Added options to make either, both or neither side panels resizable. The tricky part was handling window resizes and converting between pixels and percentages. Fixed the triggers for opening the side panels dynamically.
✅ Deploy Preview for ohif-platform-docs canceled.
|
✅ Deploy Preview for ohif-dev canceled.
|
sedghi
reviewed
Jan 10, 2025
sedghi
reviewed
Jan 10, 2025
sedghi
reviewed
Jan 10, 2025
sedghi
reviewed
Jan 10, 2025
sedghi
reviewed
Jan 10, 2025
sedghi
reviewed
Jan 10, 2025
Viewers
|
||||||||||||||||||||||||||||||||||
| Project |
Viewers
|
| Branch Review |
feat/panel-responsive-layout
|
| Run status |
|
| Run duration | 02m 29s |
| Commit |
|
| Committer | Joe Boccanfuso |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
1
|
Flaky
|
0
|
Pending
|
2
|
Skipped
|
0
|
Passing
|
43
|
| View all changes introduced in this branch ↗︎ | |
Tests for review
cypress/integration/measurement-tracking/OHIFMeasurementPanel.spec.js • 1 failed test
| Test | Artifacts | |
|---|---|---|
| OHIF Measurement Panel > checks if Measurements right panel can be hidden/displayed |
Test Replay
Screenshots
Video
|
|
…. This is essential for maintaining the size of the side panels whenever the browser window is resized.
jbocce
force-pushed
the
feat/resizeable-side-panels
branch
from
5e90e9c to
74d255d
Compare
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.
Context
Users might find that some side panels could use a little bit more real estate. Making the side panels resizable is one way to permit customized sizing of the side panels.
Changes & Results
Copied resizable component from shadcn/ui library.
Added a dependency to react-resizable-panels.
The resizing dependency and logic is contained in the ViewerLayout component. Added the isExpanded prop to SidePanel so that expanded/collapsed is no longer tied to the activeTabIndex prop.
Refactored SidePanel so that the border sizing info are props and thus the resizable panels can calculate their sizes accordingly. The side panel width sizes were already props.
Removed the open and close transition (animation) for the side panels. Added options to make either, both or neither side panels resizable. The tricky part was handling window resizes and converting between pixels and percentages.
Fixed the triggers for opening the side panels dynamically.
With these changes, the side panels can be resized by dragging either side edge of the viewport grid panel.
Testing
Attempt to resize either the left and/or right side panels.
Note that the resizing action will also collapse the side panel if one were to drag the edge of the viewport grid panel beyond the minimum size of the side panel.
Likewise dragging a collapsed side panel will expand the side panel.
Note also the effects of resizing the window. Care was taken to make the side panel sizing as consistent as possible for a window resize.
Checklist
PR
semantic-release format and guidelines.
Code
etc.)
Public Documentation Updates
additions or removals.
Tested Environment