starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-20 15:51:23 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Pull out resize bar

Browse Source
This commit is contained in:
Gregory Schier
2023-03-21 16:53:49 -07:00
parent 2caa13fdec
commit c51805fe69
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src-web/components/ResponsePane.tsx
View File

@@ -47,7 +47,7 @@ export const ResponsePane = memo(function ResponsePane({ className }: Props) {
<div <div
className={classnames( className={classnames(
'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ', 'max-h-full h-full grid grid-rows-[auto_minmax(0,1fr)] grid-cols-1 ',
'dark:bg-gray-100 rounded-md overflow-hidden border border-gray-200', 'dark:bg-gray-100 rounded-md overflow-hidden border border-highlight',
'shadow shadow-gray-100 dark:shadow-gray-0', 'shadow shadow-gray-100 dark:shadow-gray-0',
)} )}
> >

42
src-web/components/Sidebar.tsx
View File

@@ -80,25 +80,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
return ( return (
<div className="relative"> <div className="relative">
<div <ResizeBar isResizing={isResizing} onResizeStart={handleResizeStart} onReset={width.reset} />
aria-hidden
className="group absolute z-10 right-0 w-2 top-0 bottom-0 cursor-ew-resize flex justify-end"
onMouseDown={handleResizeStart}
onDoubleClick={width.reset}
>
<div // drag-divider
className={classnames(
'transition-colors w-1 group-hover:bg-gray-300 h-full pointer-events-none',
isResizing && '!bg-blue-500/70',
)}
/>
</div>
<div <div
ref={sidebarRef} ref={sidebarRef}
style={sidebarStyles} style={sidebarStyles}
className={classnames( className={classnames(
className, className,
'bg-gray-100 h-full border-r border-gray-200 relative grid grid-rows-[auto_minmax(0,1fr)_auto]', 'bg-gray-100 h-full border-r border-highlight relative grid grid-rows-[auto_minmax(0,1fr)_auto]',
)} )}
> >
<HStack as={WindowDragRegion} alignItems="center" justifyContent="end"> <HStack as={WindowDragRegion} alignItems="center" justifyContent="end">
@@ -389,3 +377,29 @@ const DraggableSidebarItem = memo(function DraggableSidebarItem({
/> />
); );
}); });
interface ResizeBarProps {
isResizing: boolean;
onResizeStart: (e: ReactMouseEvent<HTMLDivElement>) => void;
onReset: () => void;
}
function ResizeBar({ onResizeStart, onReset, isResizing }: ResizeBarProps) {
return (
<div
aria-hidden
className="group absolute z-10 right-0 w-3 top-0 bottom-0 flex justify-end cursor-ew-resize"
onMouseDown={onResizeStart}
onDoubleClick={onReset}
>
{/* Show global overlay with cursor style to ensure cursor remains the same when moving quickly */}
{isResizing && <div className="fixed inset-0 cursor-ew-resize" />}
<div // drag-divider
className={classnames(
'transition-colors w-1 group-hover:bg-highlight h-full pointer-events-none',
isResizing && '!bg-blue-500/70',
)}
/>
</div>
);
}