extern/bruno
1
0
Fork 1
mirror of https://github.com/usebruno/bruno.git synced 2025-02-18 02:30:58 +01:00
Code Issues Packages Projects Releases Wiki Activity

Issue:62,fix Split line should have max squeeze limit (#64)

Browse Source 
Co-authored-by: Ankur Singh Chauhan <anx450z@gmail.com>
This commit is contained in:
Ankur Singh Chauhan 2022-11-07 03:03:35 +05:30 committed by GitHub
parent 530af1f929
commit 82fb2819c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,6 +16,9 @@ import useGraphqlSchema from '../../hooks/useGraphqlSchema';
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>;
@ -29,7 +32,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(() => {
@ -38,14 +41,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) => {
@ -55,7 +58,7 @@ const RequestTabPanel = () => {
dispatch( dispatch(
updateRequestPaneTabWidth({ updateRequestPaneTabWidth({
uid: activeTabUid, uid: activeTabUid,
requestPaneWidth: e.clientX - asideWidth - 5 requestPaneWidth: e.clientX - asideWidth - DEFAULT_PADDING
}) })
); );
} }
@ -115,7 +118,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
onRunQuery={runQuery} onRunQuery={runQuery}