starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-23 18:01:08 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Better tab dropdown handling

Browse Source
This commit is contained in:
Gregory Schier
2023-03-20 14:14:30 -07:00
parent ec8bec32ba
commit c5ca3daab3
3 changed files with 28 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -40,7 +40,9 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
[unorderedRequests],
);
const moveState = useRef<{ move: (e: MouseEvent) => void; up: () => void } | null>(null);
const moveState = useRef<{ move: (e: MouseEvent) => void; up: (e: MouseEvent) => void } | null>(
null,
);
const unsub = () => {
if (moveState.current !== null) {
document.documentElement.removeEventListener('mousemove', moveState.current.move);
@@ -57,9 +59,11 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
const startWidth = width.value;
moveState.current = {
move: (e: MouseEvent) => {
e.preventDefault(); // Prevent text selection and things
width.set(startWidth + (e.clientX - mouseStartX));
},
up: () => {
up: (e: MouseEvent) => {
e.preventDefault();
unsub();
setIsResizing(false);
},
@@ -79,13 +83,13 @@ export const Sidebar = memo(function Sidebar({ className }: Props) {
{/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
<div
aria-hidden
className="group absolute z-10 right-0 w-1 top-0 bottom-0 cursor-ew-resize flex justify-end"
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-0.5 group-hover:bg-gray-300 h-full pointer-events-none',
'transition-colors w-1 group-hover:bg-gray-300 h-full pointer-events-none',
isResizing && '!bg-blue-500/70',
)}
/>