feature: add buttons "Dock to bottom" and "Dock to right" (usebruno#1041

)
busy-panda · Apr 20, 2024 · e52a6d6 · e52a6d6
1 parent d027d90
commit e52a6d6
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 6 deletions.
diff --git a/packages/bruno-app/src/components/RequestTabPanel/index.js b/packages/bruno-app/src/components/RequestTabPanel/index.js
@@ -70,12 +70,7 @@ const RequestTabPanel = () => {
     if (dragging) {
       e.preventDefault();
       let leftPaneXPosition = e.clientX + 2;
-      if (
-        leftPaneXPosition < asideWidth + DEFAULT_PADDING + MIN_LEFT_PANE_WIDTH ||
-        leftPaneXPosition > screenWidth - MIN_RIGHT_PANE_WIDTH
-      ) {
-        return;
-      }
+
       setLeftPaneWidth(leftPaneXPosition - asideWidth);
       setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
     }

diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseDockBottom/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseDockBottom/StyledWrapper.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  font-size: 0.8125rem;
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseDockBottom/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseDockBottom/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseDockBottom = ({}) => {
+  const dockToBottom = () => {
+    alert('dock to bottom');
+  };
+
+  return (
+    <StyledWrapper className="ml-2 flex items-center">
+      <button onClick={dockToBottom} title="Dock to bottom">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 29 24"
+          height="16"
+          width="17"
+          version="1.0"
+        >
+          <g
+            transform="translate(4,22) scale(0.08,-0.085)"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-linecap="round"
+          >
+            <path d="M10 120 l0 -110 135 0 135 0 0 110 0 110 -135 0 -135 0 0 -110z m250 30 l0 -60 -115 0 -115 0 0 60 0 60 115 0 115 0 0 -60z" />
+          </g>
+        </svg>
+      </button>
+    </StyledWrapper>
+  );
+};
+export default ResponseDockBottom;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseDockRight/StyledWrapper.js b/packages/bruno-app/src/components/ResponsePane/ResponseDockRight/StyledWrapper.js
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  font-size: 0.8125rem;
+  color: ${(props) => props.theme.requestTabPanel.responseStatus};
+`;
+
+export default StyledWrapper;
diff --git a/packages/bruno-app/src/components/ResponsePane/ResponseDockRight/index.js b/packages/bruno-app/src/components/ResponsePane/ResponseDockRight/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import StyledWrapper from './StyledWrapper';
+
+const ResponseDockRight = ({}) => {
+  const dockToRight = () => {
+    alert('dock to right');
+  };
+
+  return (
+    <StyledWrapper className="ml-2 flex items-center">
+      <button onClick={dockToRight} title="Dock to right">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 29 24"
+          height="16"
+          width="17"
+          version="1.0"
+        >
+          <g
+            transform="translate(4,22) scale(0.08,-0.085)"
+            fill="currentColor"
+            stroke="currentColor"
+            stroke-linecap="round"
+          >
+            <path d="M10 120 l0 -110 135 0 135 0 0 110 0 110 -135 0 -135 0 0 -110z m180 0 l0 -90 -80 0 -80 0 0 90 0 90 80 0 80 0 0 -90z" />
+          </g>
+        </svg>
+      </button>
+    </StyledWrapper>
+  );
+};
+export default ResponseDockRight;
diff --git a/packages/bruno-app/src/components/ResponsePane/index.js b/packages/bruno-app/src/components/ResponsePane/index.js
@@ -16,6 +16,8 @@ import TestResultsLabel from './TestResultsLabel';
 import StyledWrapper from './StyledWrapper';
 import ResponseSave from 'src/components/ResponsePane/ResponseSave';
 import ResponseClear from 'src/components/ResponsePane/ResponseClear';
+import ResponseDockBottom from 'src/components/ResponsePane/ResponseDockBottom';
+import ResponseDockRight from 'src/components/ResponsePane/ResponseDockRight';
 
 const ResponsePane = ({ rightPaneWidth, item, collection }) => {
   const dispatch = useDispatch();
@@ -117,6 +119,8 @@ const ResponsePane = ({ rightPaneWidth, item, collection }) => {
           <div className="flex flex-grow justify-end items-center">
             <ResponseClear item={item} collection={collection} />
             <ResponseSave item={item} />
+            <ResponseDockBottom />
+            <ResponseDockRight />
             <StatusCode status={response.status} />
             <ResponseTime duration={response.duration} />
             <ResponseSize size={response.size} />