rayan/bruno
1
0
Fork 0
mirror of https://github.com/usebruno/bruno.git synced 2026-07-09 06:55:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:usebruno/bruno into main

Browse Source
This commit is contained in:
Anoop M D
2022-11-07 03:06:18 +05:30
parent 2aef7c61a4 82fb2819c2
commit eecb60f5cf
1 changed files with 10 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/bruno-app/src/components/RequestTabPanel/index.js
View File

@@ -15,6 +15,9 @@ import NetworkError from 'components/ResponsePane/NetworkError';
import StyledWrapper from './StyledWrapper'; import StyledWrapper from './StyledWrapper';
const MIN_LEFT_PANE_WIDTH = 300;
const DEFAULT_PADDING = 5;
const RequestTabPanel = () => { const RequestTabPanel = () => {
if (typeof window == 'undefined') { if (typeof window == 'undefined') {
return <div></div>; return <div></div>;
@@ -28,7 +31,7 @@ const RequestTabPanel = () => {
let asideWidth = useSelector((state) => state.app.leftSidebarWidth); let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
const focusedTab = find(tabs, (t) => t.uid === activeTabUid); const focusedTab = find(tabs, (t) => t.uid === activeTabUid);
const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller const [leftPaneWidth, setLeftPaneWidth] = useState(focusedTab && focusedTab.requestPaneWidth ? focusedTab.requestPaneWidth : (screenWidth - asideWidth) / 2.2); // 2.2 so that request pane is relatively smaller
const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - 5); const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
const [dragging, setDragging] = useState(false); const [dragging, setDragging] = useState(false);
useEffect(() => { useEffect(() => {
@@ -37,14 +40,14 @@ const RequestTabPanel = () => {
}, [screenWidth]); }, [screenWidth]);
useEffect(() => { useEffect(() => {
setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - 5); setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
}, [screenWidth, asideWidth, leftPaneWidth]); }, [screenWidth, asideWidth, leftPaneWidth]);
const handleMouseMove = (e) => { const handleMouseMove = (e) => {
if (dragging) { if (dragging) {
e.preventDefault(); e.preventDefault();
setLeftPaneWidth(e.clientX - asideWidth - 5); setLeftPaneWidth(Math.max((e.clientX - asideWidth - DEFAULT_PADDING), MIN_LEFT_PANE_WIDTH));
setRightPaneWidth(screenWidth - e.clientX - 5); setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
} }
}; };
const handleMouseUp = (e) => { const handleMouseUp = (e) => {
@@ -54,7 +57,7 @@ const RequestTabPanel = () => {
dispatch( dispatch(
updateRequestPaneTabWidth({ updateRequestPaneTabWidth({
uid: activeTabUid, uid: activeTabUid,
requestPaneWidth: e.clientX - asideWidth - 5 requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
}) })
); );
} }
@@ -107,7 +110,7 @@ const RequestTabPanel = () => {
</div> </div>
<section className="main flex flex-grow pb-4"> <section className="main flex flex-grow pb-4">
<section className="request-pane"> <section className="request-pane">
<div className="px-4" style={{ width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)' }}> <div className="px-4" style={{ width: `${Math.max(leftPaneWidth, MIN_LEFT_PANE_WIDTH)}px`, height: `calc(100% - ${DEFAULT_PADDING}px)` }}>
{item.type === 'graphql-request' ? ( {item.type === 'graphql-request' ? (
<GraphQLRequestPane <GraphQLRequestPane
item={item} item={item}
@@ -132,4 +135,4 @@ const RequestTabPanel = () => {
); );
}; };
export default RequestTabPanel; export default RequestTabPanel;