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

feat: match robot config layout w new menu layout

Browse Source
This commit is contained in:
amhsirak
2025-11-05 21:09:30 +05:30
parent 11fa50f727
commit c394198321
1 changed files with 117 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/components/robot/pages/RobotConfigPage.tsx
View File

@@ -59,142 +59,138 @@ export const RobotConfigPage: React.FC<RobotConfigPageProps> = ({
}; };
return ( return (
<Box sx={{
maxWidth: 1000,
margin: '50px auto',
display: 'flex',
flexDirection: 'column',
width: '100%',
height: 'auto',
minHeight: 'calc(100vh - 64px)',
boxSizing: 'border-box'
}}>
<Box sx={{ <Box sx={{
maxWidth: 1000, display: 'flex',
margin: '50px auto', alignItems: 'center',
maxHeight: '64px',
mb: 2,
flexShrink: 0
}}>
<IconButton
onClick={onArrowBack ? onArrowBack : handleBack}
sx={{
ml: -1,
mr: 1,
color: theme.palette.text.primary,
backgroundColor: 'transparent !important',
'&:hover': {
backgroundColor: 'transparent !important',
},
'&:active': {
backgroundColor: 'transparent !important',
},
'&:focus': {
backgroundColor: 'transparent !important',
},
'&:focus-visible': {
backgroundColor: 'transparent !important',
},
}}
disableRipple
>
<ArrowBack />
</IconButton>
{icon && (
<Box sx={{ mr: 2, color: theme.palette.text.primary }}>
{icon}
</Box>
)}
<Typography
variant="h5"
sx={{
color: theme.palette.text.primary,
lineHeight: 1.2
}}
>
{title}
</Typography>
</Box>
<Divider sx={{ mb: 4, flexShrink: 0 }} />
<Box sx={{
flex: 1,
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
width: '1000px', minHeight: 0,
height: '100%', mt: 2,
overflowY: 'auto', // Allow scrolling if content exceeds height mb: 3,
}}> }}>
{/* Header Section - Fixed Position */} {children}
<Box sx={{ </Box>
display: 'flex',
alignItems: 'center', {(showSaveButton || showCancelButton || onBackToSelection) && (
maxHeight: '64px', <Box
mb: 2, sx={{
flexShrink: 0 display: 'flex',
}}> justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
<IconButton gap: 2,
onClick={onArrowBack ? onArrowBack : handleBack} pt: 3,
sx={{ borderTop: `1px solid ${theme.palette.divider}`,
ml: -1, flexShrink: 0,
mr: 1, width: '100%',
color: theme.palette.text.primary, }}
backgroundColor: 'transparent !important', >
'&:hover': { {onBackToSelection && (
backgroundColor: 'transparent !important', <Button
}, variant="outlined"
'&:active': { onClick={onBackToSelection}
backgroundColor: 'transparent !important', disabled={isLoading}
}, sx={{
'&:focus': { color: '#ff00c3 !important',
backgroundColor: 'transparent !important', borderColor: '#ff00c3 !important',
}, backgroundColor: 'white !important',
'&:focus-visible': { }} >
backgroundColor: 'transparent !important', {backToSelectionText || t("buttons.back_arrow")}
}, </Button>
}}
disableRipple
>
<ArrowBack />
</IconButton>
{icon && (
<Box sx={{ mr: 2, color: theme.palette.text.primary }}>
{icon}
</Box>
)} )}
<Typography
variant="h5"
sx={{
color: theme.palette.text.primary,
lineHeight: 1.2
}}
>
{title}
</Typography>
</Box>
<Divider sx={{ mb: 4, flexShrink: 0 }} />
{/* Content Section */} <Box sx={{ display: 'flex', gap: 2 }}>
<Box sx={{ {showCancelButton && (
flex: 1,
display: 'flex',
flexDirection: 'column',
minHeight: 0,
mt: 2,
mb: 3,
}}>
{children}
</Box>
{/* Action Buttons */}
{(showSaveButton || showCancelButton || onBackToSelection) && (
<Box
sx={{
display: 'flex',
justifyContent: onBackToSelection ? 'space-between' : 'flex-start',
gap: 2,
pt: 3, // Reduce padding top to minimize space above
borderTop: `1px solid ${theme.palette.divider}`,
flexShrink: 0,
width: '100%',
}}
>
{/* Left side - Back to Selection button */}
{onBackToSelection && (
<Button <Button
variant="outlined" variant="outlined"
onClick={onBackToSelection} onClick={handleBack}
disabled={isLoading} disabled={isLoading}
sx={{ sx={{
color: '#ff00c3 !important', color: '#ff00c3 !important',
borderColor: '#ff00c3 !important', borderColor: '#ff00c3 !important',
backgroundColor: 'white !important', backgroundColor: 'white !important',
}} > }} >
{backToSelectionText || t("buttons.back_arrow")} {cancelButtonText || t("buttons.cancel")}
</Button> </Button>
)} )}
{showSaveButton && onSave && (
{/* Right side - Save/Cancel buttons */} <Button
<Box sx={{ display: 'flex', gap: 2 }}> variant="contained"
{showCancelButton && ( onClick={onSave}
<Button disabled={isLoading}
variant="outlined" sx={{
onClick={handleBack} bgcolor: '#ff00c3',
disabled={isLoading} '&:hover': {
sx={{ bgcolor: '#cc0099',
color: '#ff00c3 !important',
borderColor: '#ff00c3 !important',
backgroundColor: 'white !important',
}} >
{cancelButtonText || t("buttons.cancel")}
</Button>
)}
{showSaveButton && onSave && (
<Button
variant="contained"
onClick={onSave}
disabled={isLoading}
sx={{
bgcolor: '#ff00c3',
'&:hover': {
bgcolor: '#cc0099',
boxShadow: 'none',
},
textTransform: 'none',
fontWeight: 500,
px: 3,
boxShadow: 'none', boxShadow: 'none',
}} },
> textTransform: 'none',
{isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))} fontWeight: 500,
</Button> px: 3,
)} boxShadow: 'none',
</Box> }}
>
{isLoading ? t("buttons.saving") : (saveButtonText || t("buttons.save"))}
</Button>
)}
</Box> </Box>
)} </Box>
</Box> )}
); </Box>
}; );
}