feat(side-panels): Added resize handle interactive feedback for side panels #4734
+91
−108
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
✅ Deploy Preview for ohif-platform-docs canceled.
|
jbocce
commented
Jan 24, 2025
| @@ -34,7 +34,7 @@ const useResizablePanels = ( | |||
| ); | |||
| const [leftResizablePanelMinimumSize, setLeftResizablePanelMinimumSize] = useState(0); | |||
| const [rightResizablePanelMinimumSize, setRightResizablePanelMinimumSize] = useState(0); | |||
| const [leftResizeablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0); | |||
| const [leftResizablePanelCollapsedSize, setLeftResizePanelCollapsedSize] = useState(0); | |||
✅ Deploy Preview for ohif-dev ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
jbocce
commented
Jan 24, 2025
| ); | ||
|
|
There was a problem hiding this comment.
This chunk of code is from an earlier implementation and is no longer needed. It was an attempt to handle an extreme edge case when the viewport grid is zero width. However it is such an extreme edge case that actually is handled fairly well by the underlying library now that we respond better to window resizing.
jbocce
commented
Jan 24, 2025
| }, []); | ||
|
|
||
| /** |
There was a problem hiding this comment.
Some nice utility functions for converting between pixels and percentages. Much more important now that we have handles of width > 0.
jbocce
commented
Jan 24, 2025
| @@ -1,6 +1,6 @@ | |||
| const expandedInsideBorderSize = 4; | |||
| const expandedInsideBorderSize = 0; | |||
There was a problem hiding this comment.
Former borders are now used by the handles.
jbocce
commented
Jan 24, 2025
| @@ -27,7 +27,7 @@ const ResizableHandle = ({ | |||
| }) => ( | |||
| <ResizablePrimitive.PanelResizeHandle | |||
| className={cn( | |||
| 'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90', | |||
| "[&[data-resize-handle-state='hover']]:bg-primary/40 [&[data-resize-handle-state='drag']]:bg-primary/40 focus-visible:ring-ring relative flex w-1 items-center justify-center rounded-full after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", | |||
There was a problem hiding this comment.
I put styling that will likely apply to ANY/ALL resize handles that will be used in OHIF here. I put width in here too, but it can be moved out as well. Let me know.
jbocce
commented
Jan 24, 2025
| @@ -9,6 +9,8 @@ import SidePanelWithServices from '../Components/SidePanelWithServices'; | |||
| import { Onboarding, ResizablePanelGroup, ResizablePanel, ResizableHandle } from '@ohif/ui-next'; | |||
| import useResizablePanels from './ResizablePanelsHook'; | |||
|
|
|||
| const resizableHandleClassName = 'mt-[1px] bg-black'; | |||
There was a problem hiding this comment.
Styling for handles particular to the side panels use of the resizable panels library.
jbocce
commented
Jan 24, 2025
| @@ -136,7 +136,7 @@ const createStyleMap = ( | |||
| collapsedInsideBorderSize: number, | |||
| collapsedOutsideBorderSize: number | |||
| ): StyleMap => { | |||
| const collapsedHideWidth = expandedWidth - collapsedWidth - collapsedInsideBorderSize; | |||
| const collapsedHideWidth = expandedWidth - collapsedWidth - collapsedOutsideBorderSize; | |||
There was a problem hiding this comment.
Ooops, I had the collapsed inside and outside borders swapped. Silly me.
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
Provide some feedback that indicates the side panels are resizable. In particular change the colour of the divider separating the side panel from the viewport grid on hover and while dragging to resize the side panel.
Special thanks to @dan-rukas for input on the design and to @IbrahimCSAE for the refactoring that preceded this PR. The code , functionality and design are all much better thanks to you.
Changes & Results
handle.styling.mp4
Testing
Hover over the area between either side panel and the viewport grid. That area should change colour and show a thin rectangle with rounded corners. Drag that area/rectangle to resize the side panel. @dan-rukas please provide feedback on the colour, it sometimes feels a little muted next to the bright border of the viewport grid. Thanks.
Checklist
PR
semantic-release format and guidelines.
Code
etc.)
Public Documentation Updates
additions or removals.
Tested Environment