Skip to content

Commit

Permalink
fix: Approve UX (#89)
Browse files Browse the repository at this point in the history 
* fix: ux draft

* fix: add add tags to reject

* fix: add bottom margin to reject
  • Loading branch information
@luacmartins
luacmartins authored May 21, 2021
1 parent 6ed13d9 commit d94fa19
Showing 1 changed file with 181 additions and 151 deletions.
332 changes: 181 additions & 151 deletions src/components/TreeImageScrubber.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,9 @@ const useStyles = makeStyles((theme) => ({
sidePanelSubmitButton: {
width: '128px',
},
mb: {
marginBottom: '1rem',
},
}));

const ToVerifyCounter = withData(({ data }) => (
Expand Down Expand Up @@ -689,63 +692,6 @@ function SidePanel(props) {
direction={'column'}
className={classes.sidePanelContainer}
>
<Grid>
<Typography variant="h5">Tags</Typography>
</Grid>
<Grid className={`${classes.bottomLine} ${classes.sidePanelItem}`}>
<RadioGroup value={morphology} className={classes.radioGroup}>
<FormControlLabel
value="seedling"
onClick={() => setMorphology('seedling')}
control={<Radio />}
label="Seedling"
/>
<FormControlLabel
value="direct_seedling"
control={<Radio />}
onClick={() => setMorphology('direct_seedling')}
label="Direct seeding"
/>
<FormControlLabel
onClick={() => setMorphology('fmnr')}
value="fmnr"
control={<Radio />}
label="Pruned/tied (FMNR)"
/>
</RadioGroup>
</Grid>
<Grid className={`${classes.bottomLine} ${classes.sidePanelItem}`}>
<RadioGroup value={age} className={classes.radioGroup}>
<FormControlLabel
onClick={() => setAge('new_tree')}
value="new_tree"
control={<Radio />}
label="New tree(s)"
/>
<FormControlLabel
onClick={() => setAge('over_two_years')}
value="over_two_years"
control={<Radio />}
label="> 2 years old"
/>
</RadioGroup>
</Grid>
{/*
<Grid className={`${classes.bottomLine} ${classes.sidePanelItem}`}>
<RadioGroup className={classes.radioGroup}>
<FormControlLabel disabled value='Create token' control={<Radio/>} label='Create token' />
<FormControlLabel disabled value='No token' control={<Radio/>} label='No token' />
</RadioGroup>
</Grid>
*/}
<Grid>
<Typography variant="h6">Species (if known)</Typography>
<Species />
</Grid>
<Grid>
<Typography variant="h6">Additional tags</Typography>
<TreeTags placeholder="Add other text tags" />
</Grid>
<Grid className={`${classes.bottomLine} ${classes.sidePanelItem}`}>
<Tabs
indicatorColor="primary"
Expand All @@ -767,102 +713,186 @@ function SidePanel(props) {
/>
</Tabs>
{switchApprove === 0 && (
<RadioGroup value={captureApprovalTag}>
<FormControlLabel
onClick={() => setCaptureApprovalTag('simple_leaf')}
value="simple_leaf"
control={<Radio />}
label="Simple leaf"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('complex_leaf')}
value="complex_leaf"
control={<Radio />}
label="Complex leaf"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('acacia_like')}
value="acacia_like"
control={<Radio />}
label="Acacia-like"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('conifer')}
value="conifer"
control={<Radio />}
label="Conifer"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('fruit')}
value="fruit"
control={<Radio />}
label="Fruit"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('mangrove')}
value="mangrove"
control={<Radio />}
label="Mangrove"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('palm')}
value="palm"
control={<Radio />}
label="Palm"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('timber')}
value="timber"
control={<Radio />}
label="Timber"
/>
</RadioGroup>
<>
<Grid>
<Typography className={classes.sidePanelItem} variant="h6">
Morphology
</Typography>
</Grid>
<Grid
className={`${classes.bottomLine} ${classes.sidePanelItem}`}
>
<RadioGroup value={morphology} className={classes.radioGroup}>
<FormControlLabel
value="seedling"
onClick={() => setMorphology('seedling')}
control={<Radio />}
label="Seedling"
/>
<FormControlLabel
value="direct_seedling"
control={<Radio />}
onClick={() => setMorphology('direct_seedling')}
label="Direct seeding"
/>
<FormControlLabel
onClick={() => setMorphology('fmnr')}
value="fmnr"
control={<Radio />}
label="Pruned/tied (FMNR)"
/>
</RadioGroup>
</Grid>
<Grid
className={`${classes.bottomLine} ${classes.sidePanelItem}`}
>
<Typography variant="h6">Age</Typography>
<RadioGroup value={age} className={classes.radioGroup}>
<FormControlLabel
onClick={() => setAge('new_tree')}
value="new_tree"
control={<Radio />}
label="New tree(s)"
/>
<FormControlLabel
onClick={() => setAge('over_two_years')}
value="over_two_years"
control={<Radio />}
label="> 2 years old"
/>
</RadioGroup>
</Grid>
{/*
<Grid className={`${classes.bottomLine} ${classes.sidePanelItem}`}>
<RadioGroup className={classes.radioGroup}>
<FormControlLabel disabled value='Create token' control={<Radio/>} label='Create token' />
<FormControlLabel disabled value='No token' control={<Radio/>} label='No token' />
</RadioGroup>
</Grid>
*/}
<Grid>
<Typography className={classes.sidePanelItem} variant="h6">
Species (if known)
</Typography>
<Species />
</Grid>
<Grid>
<Typography className={classes.sidePanelItem} variant="h6">
Additional tags
</Typography>
<TreeTags placeholder="Add other text tags" />
</Grid>
<RadioGroup
className={classes.sidePanelItem}
value={captureApprovalTag}
>
<FormControlLabel
onClick={() => setCaptureApprovalTag('simple_leaf')}
value="simple_leaf"
control={<Radio />}
label="Simple leaf"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('complex_leaf')}
value="complex_leaf"
control={<Radio />}
label="Complex leaf"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('acacia_like')}
value="acacia_like"
control={<Radio />}
label="Acacia-like"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('conifer')}
value="conifer"
control={<Radio />}
label="Conifer"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('fruit')}
value="fruit"
control={<Radio />}
label="Fruit"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('mangrove')}
value="mangrove"
control={<Radio />}
label="Mangrove"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('palm')}
value="palm"
control={<Radio />}
label="Palm"
/>
<FormControlLabel
onClick={() => setCaptureApprovalTag('timber')}
value="timber"
control={<Radio />}
label="Timber"
/>
</RadioGroup>
</>
)}
{switchApprove === 1 && (
<RadioGroup value={rejectionReason}>
<FormControlLabel
onClick={() => setRejectionReason('not_tree')}
value="not_tree"
control={<Radio />}
label="Not a tree"
/>
<FormControlLabel
onClick={() => setRejectionReason('unapproved_tree')}
value="unapproved_tree"
control={<Radio />}
label="Not an approved tree"
/>
<FormControlLabel
onClick={() => setRejectionReason('blurry_image')}
value="blurry_image"
control={<Radio />}
label="Blurry photo"
/>
<FormControlLabel
onClick={() => setRejectionReason('dead')}
value="dead"
control={<Radio />}
label="Dead"
/>
<FormControlLabel
onClick={() => setRejectionReason('duplicate_image')}
value="duplicate_image"
control={<Radio />}
label="Duplicate photo"
/>
<FormControlLabel
onClick={() => setRejectionReason('flag_user')}
value="flag_user"
control={<Radio />}
label="Flag user!"
/>
<FormControlLabel
onClick={() => setRejectionReason('needs_contact_or_review')}
value="needs_contact_or_review"
control={<Radio />}
label="Flag tree for contact/review"
/>
</RadioGroup>
<>
<RadioGroup
className={classes.sidePanelItem}
value={rejectionReason}
>
<FormControlLabel
onClick={() => setRejectionReason('not_tree')}
value="not_tree"
control={<Radio />}
label="Not a tree"
/>
<FormControlLabel
onClick={() => setRejectionReason('unapproved_tree')}
value="unapproved_tree"
control={<Radio />}
label="Not an approved tree"
/>
<FormControlLabel
onClick={() => setRejectionReason('blurry_image')}
value="blurry_image"
control={<Radio />}
label="Blurry photo"
/>
<FormControlLabel
onClick={() => setRejectionReason('dead')}
value="dead"
control={<Radio />}
label="Dead"
/>
<FormControlLabel
onClick={() => setRejectionReason('duplicate_image')}
value="duplicate_image"
control={<Radio />}
label="Duplicate photo"
/>
<FormControlLabel
onClick={() => setRejectionReason('flag_user')}
value="flag_user"
control={<Radio />}
label="Flag user!"
/>
<FormControlLabel
onClick={() => setRejectionReason('needs_contact_or_review')}
value="needs_contact_or_review"
control={<Radio />}
label="Flag tree for contact/review"
/>
</RadioGroup>
<Grid className={classes.mb}>
<Typography className={classes.sidePanelItem} variant="h6">
Additional tags
</Typography>
<TreeTags placeholder="Add other text tags" />
</Grid>
</>
)}
</Grid>
{/*Hidden until functionality is implemented. Issuer: https://github.com/Greenstand/treetracker-admin/issues/371*/}
Expand Down

0 comments on commit d94fa19

Please sign in to comment.