From 245dffa33e77a2ccd1a28535b3809c02f78ccc66 Mon Sep 17 00:00:00 2001
From: deanchen <antlet2004@gmail.com>
Date: Wed, 26 Jan 2022 21:18:44 +0800
Subject: [PATCH] feat: refine UI for matching tool

---
 .../CaptureMatching/CandidateImages.js        |  58 ++++++--
 .../CaptureMatching/CaptureHeader.js          |   2 +-
 .../CaptureMatching/CaptureImage.js           | 130 ++++++++++--------
 .../CaptureMatching/CaptureMatchingView.js    |  68 +++++++--
 .../CaptureMatching/CurrentCaptureNumber.js   |   2 +-
 src/components/CaptureMatching/Grower.js      |  37 ++---
 6 files changed, 200 insertions(+), 97 deletions(-)

diff --git a/src/components/CaptureMatching/CandidateImages.js b/src/components/CaptureMatching/CandidateImages.js
index dfd2930d1..b57651f14 100644
--- a/src/components/CaptureMatching/CandidateImages.js
+++ b/src/components/CaptureMatching/CandidateImages.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 
-import { Typography, Box, Button, Grid } from '@material-ui/core';
+import { Typography, Box, Button, Grid, Paper } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import CheckIcon from '@material-ui/icons/Check';
 import ClearIcon from '@material-ui/icons/Clear';
@@ -9,9 +9,7 @@ import theme from '../common/theme';
 const useStyles = makeStyles({
   containerBox: {
     marginTop: 0,
-    marginRight: theme.spacing(5),
     marginBottom: theme.spacing(5),
-    marginLeft: theme.spacing(5),
     paddingBottom: theme.spacing(2),
     background: '#fff',
     borderRadius: '4px',
@@ -37,12 +35,37 @@ const useStyles = makeStyles({
   },
 
   imageScroll: {
-    height: '76vh',
-    overflow: 'scroll',
+    // height: '76vh',
+    // overflow: 'scroll',
   },
 
   candidateImgBtn: {
-    marginTop: '10px',
+    padding: theme.spacing(5, 4),
+    display: 'flex',
+    gap: theme.spacing(2),
+  },
+  button: {
+    fontSize: '16px',
+  },
+  box2: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'baseline',
+    padding: '8px 16px',
+  },
+  box3: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  box1: {
+    width: '24px',
+    height: '24px',
+    backgroundColor: '#75B926',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: 'white',
   },
 });
 
@@ -70,20 +93,26 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
       {candidateImgData &&
         candidateImgData.map((tree, i) => {
           return (
-            <Box className={classes.containerBox} key={`${i}-${tree.id}`}>
+            <Paper
+              elevation={4}
+              className={classes.containerBox}
+              key={`${i}-${tree.id}`}
+            >
               <Box className={classes.headerBox}>
                 <Grid
                   container
-                  direction="row"
-                  justify="space-between"
-                  alignItems="baseline"
+                  className={classes.box2}
                   onClick={() => showImgBox(tree.id)}
                 >
-                  <Box>
+                  <Box className={classes.box3}>
+                    <Paper elevation={0} className={classes.box1}>
+                      {++i}
+                    </Paper>
                     <Typography variant="h5" style={{ padding: '10px' }}>
                       Tree {tree.tree_id}
                     </Typography>
                   </Box>
+                  <Box>{/* button */}</Box>
                 </Grid>
               </Box>
 
@@ -121,21 +150,22 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
 
                   <Box className={classes.candidateImgBtn}>
                     <Button
-                      style={{ margin: '0 0 20px 20px' }}
                       variant="contained"
                       color="primary"
                       startIcon={<CheckIcon />}
                       onClick={() => sameTreeHandler(tree.id)}
+                      style={{ color: 'white' }}
+                      className={classes.button}
                     >
                       Same Tree
                     </Button>
                     <Button
-                      style={{ margin: '0 0 20px 20px' }}
                       id={tree.tree_id}
                       variant="outlined"
                       color="primary"
                       startIcon={<ClearIcon />}
                       onClick={() => hideImgBox(tree.id)}
+                      className={classes.button}
                       value={i}
                     >
                       Different Tree
@@ -143,7 +173,7 @@ function CandidateImages({ candidateImgData, sameTreeHandler }) {
                   </Box>
                 </Box>
               ) : null}
-            </Box>
+            </Paper>
           );
         })}
     </Box>
diff --git a/src/components/CaptureMatching/CaptureHeader.js b/src/components/CaptureMatching/CaptureHeader.js
index 83f273157..510bb1c47 100644
--- a/src/components/CaptureMatching/CaptureHeader.js
+++ b/src/components/CaptureMatching/CaptureHeader.js
@@ -48,7 +48,7 @@ function CaptureHeader(props) {
   );
 
   return (
-    <Box style={{ margin: '20px' }}>
+    <Box>
       <Box>
         <Grid container className={classes.box1}>
           <CurrentCaptureNumber
diff --git a/src/components/CaptureMatching/CaptureImage.js b/src/components/CaptureMatching/CaptureImage.js
index bb0c11b4e..199c5f333 100644
--- a/src/components/CaptureMatching/CaptureImage.js
+++ b/src/components/CaptureMatching/CaptureImage.js
@@ -4,36 +4,67 @@ import CaptureHeader from './CaptureHeader';
 import Grower from './Grower';
 import theme from '../common/theme';
 
-import { Typography, Box, Button, Grid } from '@material-ui/core';
+import {
+  Tooltip,
+  Typography,
+  Box,
+  Button,
+  Grid,
+  Paper,
+} from '@material-ui/core';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import LocationOnOutlinedIcon from '@material-ui/icons/LocationOnOutlined';
 import SkipNextIcon from '@material-ui/icons/SkipNext';
 import { makeStyles } from '@material-ui/core/styles';
 import { getDateTimeStringLocale } from 'common/locale';
 
-const useStyles = makeStyles({
+const useStyles = makeStyles((theme) => ({
   containerBox: {
-    margin: theme.spacing(5),
     background: '#fff',
     borderRadius: '4px',
+    flexGrow: '1',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '1px',
   },
 
   headerBox: {
     display: 'flex',
-    flexDirection: 'spaceBetween',
+    justifyContent: 'space-between',
+    padding: theme.spacing(2),
+    alignItems: 'center',
   },
 
   imgBox: {
-    height: '52vh',
-    marginTop: '20px',
+    // height: '52vh',
+    flexGrow: 1,
     overflow: 'scroll',
   },
 
   imgContainer: {
     width: '100%',
   },
-  box1: {},
-});
+  box1: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  box3: {
+    display: 'flex',
+    gap: '4px',
+    justifyContent: 'start',
+    alignItems: 'center',
+    marginTop: '4px',
+    '& svg': {
+      width: '16px',
+      height: '16px',
+    },
+  },
+  button: {
+    width: 71,
+    height: 31,
+  },
+}));
 
 function CaptureImage(props) {
   const {
@@ -59,63 +90,54 @@ function CaptureImage(props) {
         captureImages={captureImages}
       />
 
+      <Box height={16} />
+
       {captureImages &&
         captureImages
           .slice((currentPage - 1) * imgPerPage, currentPage * imgPerPage)
           .map((capture) => {
             return (
-              <Box
+              <Paper
+                elevation={4}
                 key={`capture_${capture.id}`}
                 className={classes.containerBox}
               >
                 <Box className={classes.headerBox}>
-                  <Grid
-                    container
-                    direction="row"
-                    justify="space-around"
-                    // alignItems="baseline"
-                  >
-                    <Box style={{ marginTop: '15px' }}>
-                      <Typography
-                        variant="h5"
-                        style={{ width: '150px', wordWrap: 'break-word' }}
-                      >
-                        Capture {capture.id}
+                  <Box className={classes.box2}>
+                    <Tooltip title={capture.id}>
+                      <Typography variant="h5">
+                        Capture {(capture.id + '').substring(0, 10) + '...'}
+                      </Typography>
+                    </Tooltip>
+                    <Box className={classes.box3}>
+                      <AccessTimeIcon />
+                      <Typography variant="body1">
+                        {getDateTimeStringLocale(capture.created_at)}
                       </Typography>
-                      <Box display="flex">
-                        <AccessTimeIcon />
-                        <Typography variant="body1">
-                          {getDateTimeStringLocale(capture.created_at)}
-                        </Typography>
-                      </Box>
-
-                      <Box display="flex">
-                        <LocationOnOutlinedIcon />
-                        <Typography variant="body1">USA</Typography>
-                      </Box>
-                      {/* <UseLocation/> */}
                     </Box>
 
-                    <Grower
-                      planter_photo_url={capture.planter_photo_url}
-                      planter_username={capture.planter_username}
-                      status={capture.status}
-                    />
-
-                    <Button
-                      variant="outlined"
-                      color="primary"
-                      style={{
-                        height: '50px',
-                        width: '100px',
-                        marginTop: '10px',
-                      }}
-                      onClick={handleSkip}
-                    >
-                      Skip
-                      <SkipNextIcon />
-                    </Button>
-                  </Grid>
+                    <Box className={classes.box3}>
+                      <LocationOnOutlinedIcon />
+                      <Typography variant="body1">USA</Typography>
+                    </Box>
+                    {/* <UseLocation/> */}
+                  </Box>
+
+                  <Grower
+                    planter_photo_url={capture.planter_photo_url}
+                    planter_username={capture.planter_username}
+                    status={capture.status}
+                  />
+
+                  <Button
+                    variant="outlined"
+                    color="primary"
+                    onClick={handleSkip}
+                    className={classes.button}
+                  >
+                    Skip
+                    <SkipNextIcon />
+                  </Button>
                 </Box>
 
                 <Box className={classes.imgBox}>
@@ -128,7 +150,7 @@ function CaptureImage(props) {
                     alt={`Capture ${capture.id}`}
                   />
                 </Box>
-              </Box>
+              </Paper>
             );
           })}
     </Box>
diff --git a/src/components/CaptureMatching/CaptureMatchingView.js b/src/components/CaptureMatching/CaptureMatchingView.js
index b08c53229..c5d86f22d 100644
--- a/src/components/CaptureMatching/CaptureMatchingView.js
+++ b/src/components/CaptureMatching/CaptureMatchingView.js
@@ -6,32 +6,45 @@ import CandidateImages from './CandidateImages';
 import Navbar from '../Navbar';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Grid, Box, Paper } from '@material-ui/core';
+import { Grid, Box, Paper, Typography } from '@material-ui/core';
 import NatureOutlinedIcon from '@material-ui/icons/NatureOutlined';
 import theme from '../common/theme';
 import { documentTitle } from '../../common/variables';
+import EditIcon from '@material-ui/icons/Edit';
+import Fab from '@material-ui/core/Fab';
 
-const useStyle = makeStyles({
+const useStyle = makeStyles((theme) => ({
   container: {
     backgroundColor: '#E5E5E5',
     width: '100%',
-    height: 'auto',
     display: 'flex',
-    paddingBottom: '40px',
+    height: 'calc(100vh - 43px)',
   },
 
   candidateImgIcon: {
     fontSize: '37px',
   },
 
-  candidateIconBox: {
-    margin: theme.spacing(5),
-  },
+  candidateIconBox: {},
   box1: {
     backgroundColor: '#F0F0F0',
+    padding: theme.spacing(4, 4),
+    width: '50%',
+    height: '100%',
+    boxSizing: 'border-box',
+  },
+  box2: {
+    padding: theme.spacing(4, 4),
+    width: '50%',
+    overflow: 'scroll',
+  },
+  fab: {
+    color: 'white',
+    position: 'absolute',
+    right: '16px',
+    backgroundColor: 'rgba(118, 187, 35, .8)',
   },
-  box2: {},
-});
+}));
 
 // Set API as a variable
 const CAPTURE_API = `${process.env.REACT_APP_TREETRACKER_API_ROOT}`;
@@ -111,6 +124,28 @@ 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);
@@ -170,7 +205,19 @@ function CaptureMatchingView() {
             handleSkip={handleSkip}
           />
         </Paper>
-        <Box className={classes.box2}>
+        <Box className={classes.box2} ref={refBox}>
+          {floatTreeIcon && (
+            <Fab
+              color="primary"
+              aria-label="add"
+              className={classes.fab}
+              onClick={() => {
+                refBox.current.scrollTo(0, 0);
+              }}
+            >
+              <Typography variant="h5">{treesCount}</Typography>
+            </Fab>
+          )}
           <Box className={classes.candidateIconBox}>
             <CurrentCaptureNumber
               text={`Candidate Match${(treesCount !== 1 && 'es') || ''}`}
@@ -178,6 +225,7 @@ function CaptureMatchingView() {
               treesCount={treesCount}
             />
           </Box>
+          <Box height={14} />
           <CandidateImages
             candidateImgData={candidateImgData}
             sameTreeHandler={sameTreeHandler}
diff --git a/src/components/CaptureMatching/CurrentCaptureNumber.js b/src/components/CaptureMatching/CurrentCaptureNumber.js
index e8239ae00..5591cea81 100644
--- a/src/components/CaptureMatching/CurrentCaptureNumber.js
+++ b/src/components/CaptureMatching/CurrentCaptureNumber.js
@@ -44,7 +44,7 @@ function CurrentCaptureNumber(props) {
   const classes = useStyles();
   return (
     <Box>
-      <Paper elevation={4} className={classes.box1}>
+      <Paper elevation={3} className={classes.box1}>
         <Box className={classes.box2}>
           <Box className={classes.box3}>
             {props.cameraImg}
diff --git a/src/components/CaptureMatching/Grower.js b/src/components/CaptureMatching/Grower.js
index 6548c5d6e..1bc941215 100644
--- a/src/components/CaptureMatching/Grower.js
+++ b/src/components/CaptureMatching/Grower.js
@@ -1,25 +1,28 @@
 import React from 'react';
 
-import { Typography, Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { Avatar, Typography, Box } from '@material-ui/core';
 
+const useStyles = makeStyles((theme) => ({
+  box1: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 12,
+  },
+  avatar: {
+    width: 72,
+    height: 72,
+  },
+  box2: {},
+}));
 function Grower({ planter_photo_url, planter_username, status }) {
+  const classes = useStyles();
   return (
-    <Box style={{ display: 'flex' }}>
-      <img
-        src={planter_photo_url}
-        alt=""
-        style={{
-          borderRadius: '50%',
-          width: '130px',
-          height: '130px',
-          paddingTop: '20px',
-        }}
-      />
-      <Box style={{ margin: 'auto', paddingLeft: '10px' }}>
-        <Typography variant="body1" style={{ display: 'block' }}>
-          {planter_username}
-        </Typography>
-        <Typography variant="body1">{status}</Typography>
+    <Box className={classes.box1}>
+      <Avatar className={classes.avatar} src={planter_photo_url} />
+      <Box className={classes.box2}>
+        <Typography variant="h5">{planter_username}</Typography>
+        <Typography variant="body1">{/*status*/ 'Other info'}</Typography>
       </Box>
     </Box>
   );