TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(side-panels): Added resize handle interactive feedback for side panels (#4734)

Browse Source
This commit is contained in:
Joe Boccanfuso authored and GitHub committed 2025-01-28 11:33:53 -05:00
1 parent fe658c6392
commit 6abb095b8a
5 files changed
+90 -107
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui-next/src/components/Resizable/Resizable.tsx
+1 -1
View File
@@ -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",
className
)}
{...props}
platform/ui-next/src/components/SidePanel/SidePanel.tsx
+3 -3
View File
@@ -136,7 +136,7 @@ const createStyleMap = (
collapsedInsideBorderSize: number,
collapsedOutsideBorderSize: number
): StyleMap => {
const collapsedHideWidth = expandedWidth - collapsedWidth - collapsedInsideBorderSize;
const collapsedHideWidth = expandedWidth - collapsedWidth - collapsedOutsideBorderSize;
return {
open: {
@@ -146,11 +146,11 @@ const createStyleMap = (
closed: {
left: {
marginLeft: `-${collapsedHideWidth}px`,
marginRight: `${collapsedOutsideBorderSize}px`,
marginRight: `${collapsedInsideBorderSize}px`,
alignItems: `flex-end`,
},
right: {
marginLeft: `${collapsedOutsideBorderSize}px`,
marginLeft: `${collapsedInsideBorderSize}px`,
marginRight: `-${collapsedHideWidth}px`,
alignItems: `flex-start`,
},