|
|
@@ -0,0 +1,430 @@
|
|
|
+import React, { Component } from "react";
|
|
|
+import { render } from "react-dom";
|
|
|
+import { makeStyles, useTheme, withStyles } from '@material-ui/core/styles';
|
|
|
+import AppBar from '@material-ui/core/AppBar';
|
|
|
+import Toolbar from '@material-ui/core/Toolbar';
|
|
|
+import Typography from '@material-ui/core/Typography';
|
|
|
+import Button from '@material-ui/core/Button';
|
|
|
+import IconButton from '@material-ui/core/IconButton';
|
|
|
+import MenuIcon from '@material-ui/icons/Menu';
|
|
|
+import clsx from 'clsx';
|
|
|
+import Drawer from '@material-ui/core/Drawer';
|
|
|
+import List from '@material-ui/core/List';
|
|
|
+import CssBaseline from '@material-ui/core/CssBaseline';
|
|
|
+import Divider from '@material-ui/core/Divider';
|
|
|
+import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
|
|
|
+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 InboxIcon from '@material-ui/icons/MoveToInbox';
|
|
|
+import MailIcon from '@material-ui/icons/Mail';
|
|
|
+import ImageList from './imageList';
|
|
|
+import PhotoIcon from '@material-ui/icons/Photo';
|
|
|
+import ShareIcon from '@material-ui/icons/Share';
|
|
|
+import PhotoAlbumIcon from '@material-ui/icons/PhotoAlbum';
|
|
|
+import LibraryAddCheckIcon from '@material-ui/icons/LibraryAddCheck';
|
|
|
+import Grid from '@material-ui/core/Grid';
|
|
|
+import DeleteIcon from '@material-ui/icons/Delete';
|
|
|
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
|
|
|
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
|
|
|
+import SettingsIcon from '@material-ui/icons/Settings';
|
|
|
+import Avatar from '@material-ui/core/Avatar';
|
|
|
+import Icon from '@material-ui/core/Icon';
|
|
|
+import AddCircle from '@material-ui/icons/AddCircle';
|
|
|
+import CloudIcon from '@material-ui/icons/Cloud';
|
|
|
+import LinearProgress from '@material-ui/core/LinearProgress';
|
|
|
+import Modal from '@material-ui/core/Modal';
|
|
|
+import Backdrop from '@material-ui/core/Backdrop';
|
|
|
+import Fade from '@material-ui/core/Fade';
|
|
|
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
|
|
|
+import ImageIcon from '@material-ui/icons/Image';
|
|
|
+import WorkIcon from '@material-ui/icons/Work';
|
|
|
+import BeachAccessIcon from '@material-ui/icons/BeachAccess';
|
|
|
+import Paper from '@material-ui/core/Paper';
|
|
|
+import TodayIcon from '@material-ui/icons/Today';
|
|
|
+import CropOriginalIcon from '@material-ui/icons/CropOriginal';
|
|
|
+import CameraIcon from '@material-ui/icons/Camera';
|
|
|
+import LocationOnIcon from '@material-ui/icons/LocationOn';
|
|
|
+import CloseIcon from '@material-ui/icons/Close';
|
|
|
+import ListSubheader from '@material-ui/core/ListSubheader';
|
|
|
+import Fab from '@material-ui/core/Fab';
|
|
|
+import AddIcon from '@material-ui/icons/Add';
|
|
|
+import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
|
|
|
+import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
|
|
|
+import GridList from '@material-ui/core/GridList';
|
|
|
+import GridListTile from '@material-ui/core/GridListTile';
|
|
|
+
|
|
|
+const drawerWidth = 240;
|
|
|
+
|
|
|
+const BorderLinearProgress = withStyles((theme) => ({
|
|
|
+ colorPrimary: {
|
|
|
+ backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700],
|
|
|
+ },
|
|
|
+ bar: {
|
|
|
+ borderRadius: 5,
|
|
|
+ backgroundColor: '#1a90ff',
|
|
|
+ },
|
|
|
+}))(LinearProgress);
|
|
|
+
|
|
|
+const useStyles = makeStyles((theme) => ({
|
|
|
+ root: {
|
|
|
+ flexGrow: 1,
|
|
|
+ },
|
|
|
+ menuButton: {
|
|
|
+ marginRight: theme.spacing(2),
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ flexGrow: 1,
|
|
|
+ },
|
|
|
+ toolbar: {
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'flex-end',
|
|
|
+ padding: theme.spacing(0, 1),
|
|
|
+ // necessary for content to be below app bar
|
|
|
+ ...theme.mixins.toolbar,
|
|
|
+ },
|
|
|
+ root: {
|
|
|
+ display: 'flex',
|
|
|
+ },
|
|
|
+ appBar: {
|
|
|
+ zIndex: theme.zIndex.drawer + 1,
|
|
|
+ transition: theme.transitions.create(['width', 'margin'], {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ appBarShift: {
|
|
|
+ marginLeft: drawerWidth,
|
|
|
+ width: `calc(100% - ${drawerWidth}px)`,
|
|
|
+ transition: theme.transitions.create(['width', 'margin'], {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ menuButton: {
|
|
|
+ marginRight: 36,
|
|
|
+ },
|
|
|
+ hide: {
|
|
|
+ display: 'none',
|
|
|
+ },
|
|
|
+ drawer: {
|
|
|
+ width: drawerWidth,
|
|
|
+ flexShrink: 0,
|
|
|
+ whiteSpace: 'nowrap',
|
|
|
+ },
|
|
|
+ drawerOpen: {
|
|
|
+ width: drawerWidth,
|
|
|
+ transition: theme.transitions.create('width', {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.enteringScreen,
|
|
|
+ }),
|
|
|
+ },
|
|
|
+ drawerClose: {
|
|
|
+ transition: theme.transitions.create('width', {
|
|
|
+ easing: theme.transitions.easing.sharp,
|
|
|
+ duration: theme.transitions.duration.leavingScreen,
|
|
|
+ }),
|
|
|
+ overflowX: 'hidden',
|
|
|
+ width: theme.spacing(7) + 1,
|
|
|
+ [theme.breakpoints.up('sm')]: {
|
|
|
+ width: theme.spacing(9) + 1,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ toolbar: {
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'flex-end',
|
|
|
+ padding: theme.spacing(0, 1),
|
|
|
+ // necessary for content to be below app bar
|
|
|
+ ...theme.mixins.toolbar,
|
|
|
+ },
|
|
|
+ content: {
|
|
|
+ flexGrow: 1,
|
|
|
+ padding: theme.spacing(3),
|
|
|
+ },
|
|
|
+ modal: {
|
|
|
+ display: 'flex',
|
|
|
+ alignItems: 'center',
|
|
|
+ justifyContent: 'center',
|
|
|
+ },
|
|
|
+ paper: {
|
|
|
+ backgroundColor: theme.palette.background.paper,
|
|
|
+ width: '100%',
|
|
|
+ height: '100%',
|
|
|
+ //boxShadow: theme.shadows[5],
|
|
|
+ //padding: theme.spacing(2, 4, 3),
|
|
|
+ },
|
|
|
+ fabL: {
|
|
|
+ position: 'absolute',
|
|
|
+ bottom: '50%',
|
|
|
+ left: theme.spacing(2),
|
|
|
+ },
|
|
|
+ fabR: {
|
|
|
+ position: 'absolute',
|
|
|
+ bottom: '50%',
|
|
|
+ //left: `calc(95% - ${theme.spacing(2)}px)`,
|
|
|
+ //right: theme.spacing(2),
|
|
|
+ right: `calc(${theme.spacing(2)}px + ( 100vw / 4 ))`,
|
|
|
+ Mcontainer: {
|
|
|
+ display: "flex",
|
|
|
+ flexWrap: "wrap",
|
|
|
+ position: "absolute",
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ height: "100%",
|
|
|
+ width: "100%",
|
|
|
+ alignItems: "center"
|
|
|
+ },
|
|
|
+ },
|
|
|
+}));
|
|
|
+
|
|
|
+class MainPanel extends Component {
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ this.state = {
|
|
|
+ name: "React",
|
|
|
+ showHideDemo1: false,
|
|
|
+ showHideDemo2: false,
|
|
|
+ showHideDemo3: false
|
|
|
+ };
|
|
|
+ this.hideComponent = this.hideComponent.bind(this);
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ hideComponent(name) {
|
|
|
+ console.log(name);
|
|
|
+ switch (name) {
|
|
|
+ case "showHideDemo1":
|
|
|
+ this.setState({ showHideDemo1: !this.state.showHideDemo1 });
|
|
|
+ break;
|
|
|
+ case "showHideDemo2":
|
|
|
+ this.setState({ showHideDemo2: !this.state.showHideDemo2 });
|
|
|
+ break;
|
|
|
+ case "showHideDemo3":
|
|
|
+ this.setState({ showHideDemo3: !this.state.showHideDemo3 });
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ render() {
|
|
|
+
|
|
|
+//const classes = useStyles();
|
|
|
+//const theme = useTheme();
|
|
|
+ const { classes } = this.props;
|
|
|
+ const { theme } = this.props;
|
|
|
+const [open, setOpen] = this.useState(false);
|
|
|
+ const { showHideDemo1, showHideDemo2, showHideDemo3 } = this.state;
|
|
|
+
|
|
|
+ const handleDrawerOpen = () => {
|
|
|
+ setOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleDrawerClose = () => {
|
|
|
+ setOpen(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ const [Imageopen, setImageOpen] = React.useState(false);
|
|
|
+
|
|
|
+ const handleImageOpen = () => {
|
|
|
+ setImageOpen(true);
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleImageClose = () => {
|
|
|
+ setImageOpen(false);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className={classes.root}>
|
|
|
+ <AppBar position="fixed" style={{ background: '#2196f3' }} className={
|
|
|
+ clsx(classes.appBar, {
|
|
|
+ [classes.appBarShift]: open,
|
|
|
+ })
|
|
|
+ }>
|
|
|
+ <Toolbar >
|
|
|
+ <IconButton edge="start" onClick={handleDrawerOpen} className={
|
|
|
+ clsx(classes.menuButton, {
|
|
|
+ [classes.hide]: open,
|
|
|
+ })
|
|
|
+ } className={classes.menuButton} color="inherit" aria-label="menu">
|
|
|
+ <MenuIcon />
|
|
|
+ </IconButton>
|
|
|
+ <Typography variant="h6" className={classes.title}>
|
|
|
+ 谷狗相薄
|
|
|
+ </Typography>
|
|
|
+ <Button variant="contained" startIcon={<CloudUploadIcon />} type="button" onClick={handleImageOpen}>上載</Button>
|
|
|
+ <IconButton style={{ color: '#ffffff' }} aria-label="delete">
|
|
|
+ <HelpOutlineIcon />
|
|
|
+ </IconButton>
|
|
|
+ <IconButton style={{ color: '#ffffff' }} aria-label="delete">
|
|
|
+ <SettingsIcon />
|
|
|
+ </IconButton>
|
|
|
+ <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
|
|
|
+ </Toolbar>
|
|
|
+ </AppBar>
|
|
|
+ <Drawer
|
|
|
+ variant="permanent"
|
|
|
+ className={
|
|
|
+ clsx(classes.drawer, {
|
|
|
+ [classes.drawerOpen]: open,
|
|
|
+ [classes.drawerClose]: !open,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ classes={
|
|
|
+ {
|
|
|
+ paper: clsx({
|
|
|
+ [classes.drawerOpen]: open,
|
|
|
+ [classes.drawerClose]: !open,
|
|
|
+ }),
|
|
|
+ }
|
|
|
+ }>
|
|
|
+ <div className={classes.toolbar}>
|
|
|
+ <IconButton onClick={handleDrawerClose}>
|
|
|
+ {theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
|
|
|
+ </IconButton>
|
|
|
+ </div>
|
|
|
+ <Divider />
|
|
|
+ <List>
|
|
|
+ {['相片', '共享', '相簿', '實用工具'].map((text, index) => (
|
|
|
+ <ListItem button key={text} onClick={() => this.hideComponent("showHideDemo1")}>
|
|
|
+ <ListItemIcon>{index == 0 ? < PhotoIcon /> : index == 1 ? < ShareIcon /> : index == 2 ? < PhotoAlbumIcon /> : < LibraryAddCheckIcon />}</ListItemIcon>
|
|
|
+ <ListItemText primary={text} />
|
|
|
+ </ListItem>
|
|
|
+ ))}
|
|
|
+ </List>
|
|
|
+ <Divider />
|
|
|
+ <List>
|
|
|
+ {['儲存空間'].map((text, index) => (
|
|
|
+ <ListItem button key={text}>
|
|
|
+ <ListItemIcon>{< CloudIcon />}</ListItemIcon>
|
|
|
+ <ListItemText primary={text} secondary={<BorderLinearProgress variant="determinate" value={50} />} />
|
|
|
+ </ListItem>
|
|
|
+ ))}
|
|
|
+ </List>
|
|
|
+ </Drawer>
|
|
|
+ <main className={classes.content}>
|
|
|
+ <div className={classes.toolbar} />
|
|
|
+ {showHideDemo1 && <ImageList />}
|
|
|
+ <hr />
|
|
|
+ {showHideDemo2 && <ImageList />}
|
|
|
+ <hr />
|
|
|
+ {showHideDemo3 && <ImageList />}
|
|
|
+ <hr />
|
|
|
+ <div>
|
|
|
+ <button onClick={() => this.hideComponent("showHideDemo1")}>
|
|
|
+ Click to hide Demo1 component
|
|
|
+ </button>
|
|
|
+ <button onClick={() => this.hideComponent("showHideDemo2")}>
|
|
|
+ Click to hide Demo2 component
|
|
|
+ </button>
|
|
|
+ <button onClick={() => this.hideComponent("showHideDemo3")}>
|
|
|
+ Click to hide Demo3 component
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </main>
|
|
|
+ <Modal
|
|
|
+ aria-labelledby="transition-modal-title"
|
|
|
+ aria-describedby="transition-modal-description"
|
|
|
+ className={classes.modal}
|
|
|
+ open={Imageopen}
|
|
|
+ onClose={handleImageClose}
|
|
|
+ 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>
|
|
|
+ </div>
|
|
|
+ </Fade>
|
|
|
+ </Modal>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+export default MainPanel;
|
yeungalan