Skip to content

Commit

Permalink
feat: improve consistency between Tree Detail and Planter Detail dial…
Browse files Browse the repository at this point in the history
…ogs #10 (#143)

* feat: improve consistency between Tree Detail and Planter Detail dialogs #10

* fix: remove dialog transition, fix Close button exception, and make capture image larger
  • Loading branch information
chromium-52 authored Aug 14, 2021
1 parent 39926dd commit 7197969
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 55 deletions.
133 changes: 86 additions & 47 deletions src/components/CaptureDetailDialog.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
import React, { Fragment, useRef, useState, useEffect } from 'react';
import React, { Fragment, useCallback, useState, useEffect } from 'react';

import compose from 'recompose/compose';
import { connect } from 'react-redux';

import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import Grid from '@material-ui/core/Grid';
import Divider from '@material-ui/core/Divider';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import Snackbar from '@material-ui/core/Snackbar';
import Drawer from '@material-ui/core/Drawer';
import Box from '@material-ui/core/Box';
import Close from '@material-ui/icons/Close';

import FileCopy from '@material-ui/icons/FileCopy';
import CloseIcon from '@material-ui/icons/Close';
Expand Down Expand Up @@ -57,20 +57,46 @@ const useStyles = makeStyles((theme) => ({
fontSize: '0.8em',
color: 'rgba(0,0,0,0.5)',
},
root: {
width: 340,
},
drawer: {
width: 0,
// remove backdrop
'& .MuiBackdrop-root': {
display: 'none',
},
},
dialog: {
backgroundColor: 'rgba(0, 0, 0, 0.75)',
},
box: {
padding: theme.spacing(4),
},
}));

function CaptureDetailDialog(props) {
const { open, TransitionComponent, capture } = props;
const { open, capture } = props;

const [snackbarOpen, setSnackbarOpen] = useState(false);
const [snackbarLabel, setSnackbarLabel] = useState('');
const [renderCapture, setRenderCapture] = useState(capture);
const [screenWidth, setScreenWidth] = useState(window.innerWidth);
const [screenHeight, setScreenHeight] = useState(window.innerHeight);
const resizeWindow = useCallback(() => {
setScreenWidth(window.innerWidth);
setScreenHeight(window.innerHeight);
}, []);
const classes = useStyles();
const textAreaRef = useRef(null);

useEffect(() => {
props.captureDetailDispatch.getCaptureDetail(props.capture.id);
}, [props.captureDetailDispatch, props.capture]);

window.addEventListener('resize', resizeWindow);
return () => {
window.removeEventListener('resize', resizeWindow);
};
}, [props.captureDetailDispatch, props.capture, resizeWindow]);

/*
* Render the most complete capture detail we have
Expand Down Expand Up @@ -132,15 +158,26 @@ function CaptureDetailDialog(props) {
}

return (
<Grid item container direction="column" spacing={4}>
<Grid container direction="column">
<Grid item>
<Typography color="primary" variant="h6">
Capture <LinkToWebmap value={capture.id} type="tree" />
<CopyButton label="Capture ID" value={capture.id} />
</Typography>
<Grid container justify="space-between" alignItems="center">
<Grid item>
<Box m={4}>
<Typography color="primary" variant="h6">
Capture <LinkToWebmap value={capture.id} type="tree" />
<CopyButton label="Capture ID" value={capture.id} />
</Typography>
</Box>
</Grid>
<Grid item>
<IconButton onClick={handleClose}>
<Close />
</IconButton>
</Grid>
</Grid>
</Grid>
<Divider />
<Grid item>
<Grid item className={classes.box}>
<Typography className={classes.subtitle}>Capture Data</Typography>
{[
{
Expand Down Expand Up @@ -180,7 +217,7 @@ function CaptureDetailDialog(props) {
))}
</Grid>
<Divider />
<Grid item>
<Grid item className={classes.box}>
<Typography className={classes.subtitle}>
Verification Status
</Typography>
Expand All @@ -202,7 +239,7 @@ function CaptureDetailDialog(props) {
)}
</Grid>
<Divider />
<Grid item>
<Grid item className={classes.box}>
<Typography className={classes.subtitle}>Tags</Typography>
<Typography variant="subtitle1">Species</Typography>
{species && species.name ? (
Expand All @@ -227,7 +264,7 @@ function CaptureDetailDialog(props) {
)}
</Grid>
<Divider />
<Grid item>
<Grid item className={classes.box}>
<Typography className={classes.subtitle}>Capture Token</Typography>
<Typography variant="body1">
{getTokenStatus(capture.tokenId)}
Expand Down Expand Up @@ -261,40 +298,42 @@ function CaptureDetailDialog(props) {
}

return (
<Dialog
open={open}
TransitionComponent={TransitionComponent}
onClose={handleClose}
maxWidth="xl"
>
<DialogContent>
<Grid container spacing={4} wrap="nowrap">
<Grid item>
<OptimizedImage
src={renderCapture.imageUrl}
width={640}
style={{ maxWidth: '100%' }}
fixed
<React.Fragment>
<Dialog
open={open}
onClose={handleClose}
style={{ width: screenWidth - 340 }}
BackdropProps={{
classes: {
root: classes.dialog,
},
}}
>
<OptimizedImage
src={renderCapture.imageUrl}
width={screenWidth * 0.5}
height={screenHeight * 0.8}
style={{ maxWidth: '100%' }}
fixed
/>
</Dialog>
<Drawer
anchor="right"
open={open}
className={classes.drawer}
onClose={handleClose}
>
<Grid className={classes.root}>
<Grid container direction="column">
<Tags
capture={renderCapture}
species={props.captureDetail.species}
captureTags={props.captureDetail.tags}
/>
</Grid>
<Grid container item style={{ width: '300px' }} spacing={2}>
<Grid container direction="row" spacing={4}>
<Tags
capture={renderCapture}
species={props.captureDetail.species}
captureTags={props.captureDetail.tags}
/>
</Grid>
</Grid>
</Grid>
</DialogContent>
<DialogActions justify="center">
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
<textarea ref={textAreaRef} hidden />
</Dialog>
</Drawer>
</React.Fragment>
);
}

Expand Down
10 changes: 2 additions & 8 deletions src/components/Verify.js
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import React, { useEffect, useState, useRef, forwardRef } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import clsx from 'clsx';
import { connect } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Button from '@material-ui/core/Button'; // replace with icons down the line
import Slide from '@material-ui/core/Slide';

import { selectedHighlightColor, documentTitle } from '../common/variables.js';
import Grid from '@material-ui/core/Grid';
Expand Down Expand Up @@ -182,10 +181,6 @@ const ToVerifyCounter = withData(({ data }) => (
</>
));

const Transition = forwardRef(function Transition(props, ref) {
return <Slide direction="up" ref={ref} {...props} />;
});

const Verify = (props) => {
// console.log('render: verify');
const classes = useStyles(props);
Expand Down Expand Up @@ -593,8 +588,7 @@ const Verify = (props) => {
/>
<CaptureDetailDialog
open={captureDetail.isOpen}
TransitionComponent={Transition}
onClose={handleCloseCaptureDetail}
onClose={() => handleCloseCaptureDetail()}
capture={captureDetail.capture}
/>
</React.Fragment>
Expand Down

0 comments on commit 7197969

Please sign in to comment.