feat: dragbar adjusting request and response panes

packages/grafnode-components/src/components/RequestTabPanel/StyledWrapper.js

@@ -1,6 +1,18 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  div.drag-request {
+    display: flex;
+    width: 0.5rem;
+    padding: 0;
+    cursor: col-resize;
+    background: transparent;
+    border-left: solid 1px var(--color-request-dragbar-background);
+
+    &:hover {
+      border-left: solid 1px var(--color-request-dragbar-background-active);
+    }
+  }
 `;
 
 export default StyledWrapper;

packages/grafnode-components/src/components/RequestTabPanel/index.js

@@ -18,37 +18,41 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     return <div></div>;
   }
 
-  let asideWidth = 200;
+  let asideWidth = 230;
   let {
     schema 
   } = useGraphqlSchema('https://api.spacex.land/graphql');
-  const [leftPaneWidth, setLeftPaneWidth] = useState(500);
-  const [rightPaneWidth, setRightPaneWidth] = useState(window.innerWidth - 700 - asideWidth);
+  const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar
+  const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2);
+  console.log((window.innerWidth - asideWidth)/2);
   const [dragging, setDragging] = useState(false);
   const handleMouseMove = (e) => {
-    e.preventDefault();
     if(dragging) {
-      setLeftPaneWidth(e.clientX - asideWidth );
+      e.preventDefault();
+      setLeftPaneWidth(e.clientX - asideWidth);
       setRightPaneWidth(window.innerWidth - (e.clientX));
     }
   };
   const handleMouseUp = (e) => {
-    e.preventDefault();
-    setDragging(false);
+    if(dragging) {
+      e.preventDefault();
+      setDragging(false);
+    }
   };
-  const handleMouseDown = (e) => {
+  const handleDragbarMouseDown = (e) => {
     e.preventDefault();
     setDragging(true);
   };
-  // useEffect(() => {
-  //   document.addEventListener('mouseup', handleMouseUp);
-  //   document.addEventListener('mousemove', handleMouseMove);
 
-  //   return () => {
-  //     document.removeEventListener('mouseup', handleMouseUp);
-  //     document.removeEventListener('mousemove', handleMouseMove);
-  //   };
-  // }, [dragging, leftPaneWidth]);
+  useEffect(() => {
+    document.addEventListener('mouseup', handleMouseUp);
+    document.addEventListener('mousemove', handleMouseMove);
+
+    return () => {
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, [dragging, leftPaneWidth]);
 
   const onUrlChange = (value) => {
     dispatch({
@@ -119,8 +123,11 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
         />
       </div>
       <section className="main flex flex-grow">
-        <section className="request-pane px-4">
-          <div style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}>
+        <section className="request-pane">
+          <div
+            className="px-4"
+            style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}
+          >
             {item.request.type === 'graphql' ? (
               <GraphQLRequestPane
                 onRunQuery={runQuery}
@@ -139,7 +146,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
           </div>
         </section>
 
-        <div className="drag-request" onMouseDown={handleMouseDown}>
+        <div className="drag-request" onMouseDown={handleDragbarMouseDown}>
         </div>
 
         <section className="response-pane px-4 flex-grow">

packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js

@@ -20,18 +20,6 @@ const Wrapper = styled.div`
     }
   }
 
-  div.drag-request {
-    display: flex;
-    width: 1px;
-    padding: 0;
-    cursor: col-resize;
-    background: var(--color-request-dragbar-background);
-
-    &:hover {
-      background: silver;
-    }
-  }
-
   .fw-600 {
     font-weight: 600;
   }

packages/grafnode-run/src/pageComponents/Main/index.js

@@ -28,6 +28,7 @@ import 'codemirror-graphql/jump';
 import 'codemirror-graphql/mode';
 
 import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/dialog/dialog.css';
 import 'codemirror/addon/hint/show-hint.css';
 
 const RequestTabPanel = dynamic(import('@grafnode/components').then(mod => mod.RequestTabPanel), { ssr: false });

packages/grafnode-run/src/styles/globals.css

@@ -4,6 +4,7 @@
   --color-sidebar-collection-item-focused-indent-border: #7b8de3;
   --color-sidebar-background: #f6f8fa;
   --color-request-dragbar-background: #e2e2e2;
+  --color-request-dragbar-background-active: #bbb;
   --color-tab-active-border: #4d4d4d;
   --color-layout-border: #dedede;
   --color-codemirror-border: #efefef;