diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js index f7da03cdf..3fdfdf64c 100644 --- a/src/components/CaptureMatching/CaptureImage.js +++ b/src/components/CaptureMatching/CaptureImage.js @@ -64,7 +64,7 @@ const useStyles = makeStyles((theme) => ({ imgBox: { // height: '52vh', flexGrow: 1, - overflow: 'scroll', + overflow: 'auto', }, imgContainer: { diff --git a/src/components/CaptureMatching/CaptureMatchingView.js b/src/components/CaptureMatching/CaptureMatchingView.js index 65624db61..b8847a34d 100644 --- a/src/components/CaptureMatching/CaptureMatchingView.js +++ b/src/components/CaptureMatching/CaptureMatchingView.js @@ -6,10 +6,9 @@ import CandidateImages from './CandidateImages'; import Navbar from '../Navbar'; import { makeStyles } from '@material-ui/core/styles'; -import { Grid, Box, Paper, Typography } from '@material-ui/core'; +import { Grid, Box, Paper } from '@material-ui/core'; import NatureOutlinedIcon from '@material-ui/icons/NatureOutlined'; import { documentTitle } from '../../common/variables'; -import Fab from '@material-ui/core/Fab'; const useStyle = makeStyles((theme) => ({ container: { @@ -34,13 +33,7 @@ const useStyle = makeStyles((theme) => ({ box2: { padding: theme.spacing(4, 4), width: '50%', - overflow: 'scroll', - }, - fab: { - color: 'white', - position: 'absolute', - right: '16px', - backgroundColor: 'rgba(118, 187, 35, .8)', + overflow: 'auto', }, })); @@ -122,28 +115,6 @@ function CaptureMatchingView() { setImgCount(captureImages.length); }, [captureImages]); - // detect scroll - const refBox = React.useRef(null); - const [floatTreeIcon, setFloatTreeIcon] = useState(false); - useEffect(() => { - function checkPosition() { - const pos = refBox.current.scrollTop; - console.warn('ref:', pos); - if (parseInt(pos) > 144 && !floatTreeIcon) { - console.warn('show float icon'); - setFloatTreeIcon(true); - } - if (parseInt(pos) < 144 && floatTreeIcon) { - console.warn('close float icon'); - setFloatTreeIcon(false); - } - } - - refBox.current.addEventListener('scroll', checkPosition); - checkPosition(); - return () => window.removeEventListener('scroll', checkPosition); - }, []); - // Capture Image Pagination function const handleChange = (e, value) => { setCurrentPage(value); @@ -203,19 +174,7 @@ function CaptureMatchingView() { handleSkip={handleSkip} /> - - {floatTreeIcon && ( - { - refBox.current.scrollTo(0, 0); - }} - > - {treesCount} - - )} + ({ }, box4: {}, text: { - fontFamily: 'Roboto', fontSize: '12px', fontStyle: 'normal', fontWeight: '400',