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

feat: icons for capture text

Browse Source
This commit is contained in:
karishmas6
2024-08-06 06:04:22 +05:30
parent 3efd0a8e9e
commit cc734f86d6
1 changed files with 27 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/organisms/RightSidePanel.tsx
View File

@@ -1,5 +1,7 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import { Button, Paper, Box, TextField } from "@mui/material"; import { Button, Paper, Box, TextField } from "@mui/material";
import EditIcon from '@mui/icons-material/Edit';
import TextFieldsIcon from '@mui/icons-material/TextFields';
import styled from "styled-components"; import styled from "styled-components";
import { SimpleBox } from "../atoms/Box"; import { SimpleBox } from "../atoms/Box";
import Typography from "@mui/material/Typography"; import Typography from "@mui/material/Typography";
@@ -8,6 +10,8 @@ import { useActionContext } from '../../context/browserActions';
import { useBrowserSteps } from '../../context/browserSteps'; import { useBrowserSteps } from '../../context/browserSteps';
import { useSocketStore } from '../../context/socket'; import { useSocketStore } from '../../context/socket';
import { ScreenshotSettings } from '../../shared/types'; import { ScreenshotSettings } from '../../shared/types';
import InputAdornment from '@mui/material/InputAdornment';
export const RightSidePanel = () => { export const RightSidePanel = () => {
const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({}); const [textLabels, setTextLabels] = useState<{ [id: number]: string }>({});
@@ -98,12 +102,12 @@ export const RightSidePanel = () => {
<Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}> <Box display="flex" flexDirection="column" gap={2} style={{ margin: '15px' }}>
{!getText && !getScreenshot && <Button variant="contained" onClick={startGetText}>Capture Text</Button>} {!getText && !getScreenshot && <Button variant="contained" onClick={startGetText}>Capture Text</Button>}
{getText && {getText &&
<> <>
<Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}> <Box display="flex" justifyContent="space-between" gap={2} style={{ margin: '15px' }}>
<Button variant="outlined" onClick={stopCaptureAndEmitGetTextSettings}>Confirm</Button> <Button variant="outlined" onClick={stopCaptureAndEmitGetTextSettings}>Confirm</Button>
<Button variant="outlined" color="error" onClick={stopGetText}>Discard</Button> <Button variant="outlined" color="error" onClick={stopGetText}>Discard</Button>
</Box> </Box>
</> </>
} }
{!getText && !getScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>} {!getText && !getScreenshot && <Button variant="contained" onClick={startGetScreenshot}>Capture Screenshot</Button>}
@@ -130,14 +134,28 @@ export const RightSidePanel = () => {
margin="normal" margin="normal"
error={!!errors[step.id]} error={!!errors[step.id]}
helperText={errors[step.id]} helperText={errors[step.id]}
InputProps={{ readOnly: confirmedTextSteps[step.id] }} InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<EditIcon />
</InputAdornment>
)
}}
/> />
<TextField <TextField
label="Data" label="Data"
value={step.data} value={step.data}
fullWidth fullWidth
margin="normal" margin="normal"
InputProps={{ readOnly: confirmedTextSteps[step.id] }} InputProps={{
readOnly: confirmedTextSteps[step.id],
startAdornment: (
<InputAdornment position="start">
<TextFieldsIcon />
</InputAdornment>
)
}}
/> />
{!confirmedTextSteps[step.id] && ( {!confirmedTextSteps[step.id] && (
<Box display="flex" justifyContent="space-between" gap={2}> <Box display="flex" justifyContent="space-between" gap={2}>