vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: set panel dimensions on browser resize

Browse Source
This commit is contained in:
Rohit
2025-03-15 14:14:06 +05:30
parent 9818634734
commit a892e700cb
1 changed files with 19 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/recorder/RightSidePanel.tsx
View File

@@ -54,6 +54,9 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]); const [browserStepIdList, setBrowserStepIdList] = useState<number[]>([]);
const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false); const [isCaptureTextConfirmed, setIsCaptureTextConfirmed] = useState(false);
const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false); const [isCaptureListConfirmed, setIsCaptureListConfirmed] = useState(false);
const [panelDimensions, setPanelDimensions] = useState({
height: window.innerHeight * 0.64 + 137
});
const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore(); const { lastAction, notify, currentWorkflowActionsState, setCurrentWorkflowActionsState, resetInterpretationLog } = useGlobalInfoStore();
const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext(); const { getText, startGetText, stopGetText, getScreenshot, startGetScreenshot, stopGetScreenshot, getList, startGetList, stopGetList, startPaginationMode, stopPaginationMode, paginationType, updatePaginationType, limitType, customLimit, updateLimitType, updateCustomLimit, stopLimitMode, startLimitMode, captureStage, setCaptureStage, showPaginationOptions, setShowPaginationOptions, showLimitOptions, setShowLimitOptions, workflow, setWorkflow } = useActionContext();
@@ -66,6 +69,21 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
//setRecordingLength(data.workflow.length); //setRecordingLength(data.workflow.length);
}, []) }, [])
const handleResize = useCallback(() => {
// Update panel dimensions
setPanelDimensions({
height: window.innerHeight * 0.64 + 137
});
}, []);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [handleResize]);
useEffect(() => { useEffect(() => {
if (socket) { if (socket) {
socket.on("workflow", workflowHandler); socket.on("workflow", workflowHandler);
@@ -461,10 +479,8 @@ export const RightSidePanel: React.FC<RightSidePanelProps> = ({ onFinishCapture
const theme = useThemeMode(); const theme = useThemeMode();
const isDarkMode = theme.darkMode; const isDarkMode = theme.darkMode;
let panelHeight = `${(window.innerHeight * 0.64) + 137}px`
return ( return (
<Paper sx={{ height: panelHeight, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}> <Paper sx={{ height: panelDimensions.height, width: 'auto', alignItems: "center", background: 'inherit' }} id="browser-actions" elevation={0}>
{/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'> {/* <SimpleBox height={60} width='100%' background='lightGray' radius='0%'>
<Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography> <Typography sx={{ padding: '10px' }}>Last action: {` ${lastAction}`}</Typography>
</SimpleBox> */} </SimpleBox> */}