extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-01-11 00:18:46 +01: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
commit eecb60f5cf
1 changed files with 10 additions and 7 deletions
Show Stats 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';
const MIN_LEFT_PANE_WIDTH = 300;
const DEFAULT_PADDING = 5;
const RequestTabPanel = () => {
if (typeof window == 'undefined') {
return <div></div>;
@ -28,7 +31,7 @@ const RequestTabPanel = () => {
let asideWidth = useSelector((state) => state.app.leftSidebarWidth);
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 [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - 5);
const [rightPaneWidth, setRightPaneWidth] = useState(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
const [dragging, setDragging] = useState(false);
useEffect(() => {
@ -37,14 +40,14 @@ const RequestTabPanel = () => {
}, [screenWidth]);
useEffect(() => {
setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - 5);
setRightPaneWidth(screenWidth - asideWidth - leftPaneWidth - DEFAULT_PADDING);
}, [screenWidth, asideWidth, leftPaneWidth]);
const handleMouseMove = (e) => {
if (dragging) {
e.preventDefault();
setLeftPaneWidth(e.clientX - asideWidth - 5);
setRightPaneWidth(screenWidth - e.clientX - 5);
setLeftPaneWidth(Math.max((e.clientX - asideWidth - DEFAULT_PADDING), MIN_LEFT_PANE_WIDTH));
setRightPaneWidth(screenWidth - e.clientX - DEFAULT_PADDING);
}
};
const handleMouseUp = (e) => {
@ -54,7 +57,7 @@ const RequestTabPanel = () => {
dispatch(
updateRequestPaneTabWidth({
uid: activeTabUid,
requestPaneWidth: e.clientX - asideWidth - 5
requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
})
);
}
@ -107,7 +110,7 @@ const RequestTabPanel = () => {
</div>
<section className="main flex flex-grow pb-4">
<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' ? (
<GraphQLRequestPane
item={item}
@ -132,4 +135,4 @@ const RequestTabPanel = () => {
);
};
export default RequestTabPanel;
export default RequestTabPanel;