|
|
@@ -16,6 +16,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
|
|
|
import ListItem from '@material-ui/core/ListItem';
|
|
|
import ListItemIcon from '@material-ui/core/ListItemIcon';
|
|
|
import ListItemText from '@material-ui/core/ListItemText';
|
|
|
+import InfoIcon from '@material-ui/icons/Info';
|
|
|
import InboxIcon from '@material-ui/icons/MoveToInbox';
|
|
|
import MailIcon from '@material-ui/icons/Mail';
|
|
|
import ImageList from './imageList';
|
|
|
@@ -200,14 +201,14 @@ export default function ButtonAppBar() {
|
|
|
setOpen(false);
|
|
|
};
|
|
|
|
|
|
- const [Imageopen, setImageOpen] = React.useState(false);
|
|
|
+ const [Settingopen, setSettingOpen] = React.useState(false);
|
|
|
|
|
|
- const handleImageOpen = () => {
|
|
|
- setImageOpen(true);
|
|
|
+ const handleSettingOpen = () => {
|
|
|
+ setSettingOpen(true);
|
|
|
};
|
|
|
|
|
|
- const handleImageClose = () => {
|
|
|
- setImageOpen(false);
|
|
|
+ const handleSettingClose = () => {
|
|
|
+ setSettingOpen(false);
|
|
|
};
|
|
|
|
|
|
const [Alertopen, setAlertOpen] = React.useState(false);
|
|
|
@@ -279,7 +280,7 @@ export default function ButtonAppBar() {
|
|
|
<IconButton style={{ color: '#ffffff' }} aria-label="help" onClick={handleAlertClick}>
|
|
|
<HelpOutlineIcon />
|
|
|
</IconButton>
|
|
|
- <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleImageOpen}>
|
|
|
+ <IconButton style={{ color: '#ffffff' }} aria-label="settings" onClick={handleSettingOpen}>
|
|
|
<SettingsIcon />
|
|
|
</IconButton>
|
|
|
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
|
|
|
@@ -340,98 +341,39 @@ export default function ButtonAppBar() {
|
|
|
aria-labelledby="transition-modal-title"
|
|
|
aria-describedby="transition-modal-description"
|
|
|
className={classes.modal}
|
|
|
- open={Imageopen}
|
|
|
- onClose={handleImageClose}
|
|
|
+ open={Settingopen}
|
|
|
+ onClose={handleSettingClose}
|
|
|
closeAfterTransition
|
|
|
BackdropComponent={Backdrop}
|
|
|
BackdropProps={{
|
|
|
timeout: 500,
|
|
|
}}
|
|
|
>
|
|
|
- <Fade in={Imageopen}>
|
|
|
- <div className={classes.paper}>
|
|
|
- <Grid container spacing={0}>
|
|
|
- <Grid item xs={9}
|
|
|
- style={{
|
|
|
- alignItems: 'center',
|
|
|
- alignContent: 'center',
|
|
|
- backgroundColor: 'black',
|
|
|
- height: '100vh',
|
|
|
- }}
|
|
|
- align="center"
|
|
|
- justify="center"
|
|
|
- direction="column"
|
|
|
- >
|
|
|
- <Grid
|
|
|
- container
|
|
|
- spacing={0}
|
|
|
- direction="column"
|
|
|
- alignItems="center"
|
|
|
- justify="center"
|
|
|
- style={{ minHeight: '100vh' }}
|
|
|
- >
|
|
|
- <Grid item xs={12}>
|
|
|
- <img src="./images/Q1_PHYS.jpeg"
|
|
|
- style={{
|
|
|
- margin: "auto",
|
|
|
- maxHeight: "100vh",
|
|
|
- maxWidth: "100%",
|
|
|
- }}
|
|
|
-
|
|
|
- ></img>
|
|
|
- </Grid>
|
|
|
-
|
|
|
- </Grid>
|
|
|
-
|
|
|
-
|
|
|
- <Fab color="inherit" aria-label="add" className={classes.fabL}>
|
|
|
- <ArrowBackIosIcon />
|
|
|
- </Fab>
|
|
|
- <Fab color="inherit" aria-label="add" className={classes.fabR}>
|
|
|
- <ArrowForwardIosIcon />
|
|
|
- </Fab>
|
|
|
- </Grid>
|
|
|
- <Grid item xs={3}>
|
|
|
- <Typography component="h5">
|
|
|
- <IconButton aria-label="delete" type="button" onClick={handleImageClose}>
|
|
|
- <CloseIcon />
|
|
|
- </IconButton>
|
|
|
- 資訊
|
|
|
- </Typography>
|
|
|
- <List
|
|
|
- subheader={
|
|
|
- <ListSubheader component="div" id="nested-list-subheader">
|
|
|
- 詳細資料
|
|
|
- </ListSubheader>
|
|
|
- }
|
|
|
- >
|
|
|
- <ListItem>
|
|
|
- <ListItemIcon>
|
|
|
- <TodayIcon />
|
|
|
- </ListItemIcon>
|
|
|
- <ListItemText primary="2016年7月14日" secondary="週六 下午5:43 GMT+08:00"/>
|
|
|
- </ListItem>
|
|
|
- <ListItem>
|
|
|
- <ListItemIcon>
|
|
|
- <CropOriginalIcon />
|
|
|
- </ListItemIcon>
|
|
|
- <ListItemText primary="IMG_20160716_174348.jpg" secondary="12.8MP 3096×4128 1.6MB" />
|
|
|
- </ListItem>
|
|
|
- <ListItem>
|
|
|
- <ListItemIcon>
|
|
|
- <CameraIcon />
|
|
|
- </ListItemIcon>
|
|
|
- <ListItemText primary="Samsung GT-I9505" secondary="ƒ/2.2 1/33 4.2mm ISO125"/>
|
|
|
- </ListItem>
|
|
|
- <ListItem>
|
|
|
- <ListItemIcon>
|
|
|
- <LocationOnIcon />
|
|
|
- </ListItemIcon>
|
|
|
- <ListItemText primary="中國广东省廣州市" secondary="概估位置" />
|
|
|
- </ListItem>
|
|
|
- </List>
|
|
|
- </Grid>
|
|
|
- </Grid>
|
|
|
+ <Fade in={Settingopen}>
|
|
|
+ <div className={classes.paper}>
|
|
|
+ <Grid container alignItems="flex-start" justify="flex-end" direction="row">
|
|
|
+ <IconButton color="primary" aria-label="close" onClick={handleSettingClose}>
|
|
|
+ <CloseIcon />
|
|
|
+ </IconButton>
|
|
|
+ </Grid>
|
|
|
+ <List>
|
|
|
+ <ListItem button>
|
|
|
+ <ListItemAvatar>
|
|
|
+ <Avatar>
|
|
|
+ <InfoIcon />
|
|
|
+ </Avatar>
|
|
|
+ </ListItemAvatar>
|
|
|
+ <ListItemText primary="Version" secondary="v1.0.0-alpha" />
|
|
|
+ </ListItem>
|
|
|
+ <ListItem button>
|
|
|
+ <ListItemAvatar>
|
|
|
+ <Avatar>
|
|
|
+ <InfoIcon />
|
|
|
+ </Avatar>
|
|
|
+ </ListItemAvatar>
|
|
|
+ <ListItemText primary="Developer" secondary="Alanyeung.co" />
|
|
|
+ </ListItem>
|
|
|
+ </List>
|
|
|
</div>
|
|
|
</Fade>
|
|
|
</Modal>
|
yeungalan