305 lines
8.8 KiB
JavaScript
305 lines
8.8 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { connect } from 'react-redux';
|
|
import * as actions from 'src/js/actions/index.js';
|
|
import App from '@doodle3d/doodle3d-core/lib/components/App';
|
|
import injectSheet from 'react-jss';
|
|
import Popover from 'material-ui/Popover/Popover';
|
|
import Badge from 'material-ui/Badge';
|
|
import btnPrintWiFiImageURL from 'img/export/btnPrintWiFi.png';
|
|
import btnSaveSTLImageURL from 'img/export/btnSaveSTL.png';
|
|
import btn3DHubsImageURL from 'img/export/btn3DHubs.png';
|
|
import btnShapewaysImageURL from 'img/export/btnShapeways.png';
|
|
import btnThingiverseImageURL from 'img/export/btnThingiverse.png';
|
|
import btnSketchFabImageURL from 'img/export/btnSketchFab.png';
|
|
import btnMyMiniFactoryImageURL from 'img/export/btnMyMiniFactory.png';
|
|
import btnPolar3DImageURL from 'img/export/btnPolar3D.png';
|
|
import btnNewUrl from 'img/menu/btnNew.png';
|
|
import btnOpenUrl from 'img/menu/btnOpen.png';
|
|
import btnSaveUrl from 'img/menu/btnSave.png';
|
|
import btnSettingsUrl from 'img/menu/btnMenu.png';
|
|
import btnNewSmallUrl from 'img/menu/btnNewSmall.png';
|
|
import btnOpenSmallUrl from 'img/menu/btnOpenSmall.png';
|
|
import btnSaveSmallUrl from 'img/menu/btnSaveSmall.png';
|
|
import btnSettingsSmallUrl from 'img/menu/btnMenuSmall.png';
|
|
import btnExportUrl from 'img/menu/btnExport.png';
|
|
import btnExportSmallUrl from 'img/menu/btnExportSmall.png';
|
|
import btnLoveUrl from 'img/menu/btnLove.png';
|
|
import btnLoveSmallUrl from 'img/menu/btnLoveSmall.png';
|
|
import btnHelpUrl from 'img/menu/btnHelp.png';
|
|
import btnHelpSmallUrl from 'img/menu/btnHelpSmall.png';
|
|
|
|
import Menu from 'material-ui/Menu';
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
import ArrowDropLeft from 'material-ui/svg-icons/navigation/chevron-left';
|
|
|
|
const button = {
|
|
cursor: 'pointer',
|
|
margin: '0 2px'
|
|
};
|
|
|
|
const styles = {
|
|
badge: {
|
|
right: '-44px',
|
|
content: {
|
|
backgroundColor: 'red'
|
|
}
|
|
},
|
|
buttonLeft: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundColor: 'white'
|
|
},
|
|
userSelect: 'none',
|
|
position: 'absolute',
|
|
top: '0',
|
|
left: '0',
|
|
display: 'flex'
|
|
},
|
|
new: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnNewSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnNewUrl})`,
|
|
backgroundSize: '72px auto',
|
|
width: '72px',
|
|
height: '51px',
|
|
...button
|
|
},
|
|
open: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnOpenSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnOpenUrl})`,
|
|
backgroundSize: '80px auto',
|
|
width: '80px',
|
|
height: '55px',
|
|
...button
|
|
},
|
|
save: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnSaveSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnSaveUrl})`,
|
|
backgroundSize: '80px auto',
|
|
width: '80px',
|
|
height: '56px',
|
|
...button
|
|
},
|
|
settings: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnSettingsSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnSettingsUrl})`,
|
|
backgroundSize: '77px auto',
|
|
width: '77px',
|
|
height: '57px',
|
|
...button
|
|
},
|
|
love: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnLoveSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnLoveUrl})`,
|
|
backgroundSize: '77px auto',
|
|
width: '77px',
|
|
height: '57px',
|
|
...button
|
|
},
|
|
help: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnHelpSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnHelpUrl})`,
|
|
backgroundSize: '77px auto',
|
|
width: '77px',
|
|
height: '57px',
|
|
...button
|
|
},
|
|
export: {
|
|
'@media (max-width: 900px)': {
|
|
backgroundImage: `url(${btnExportSmallUrl})`,
|
|
backgroundSize: '40px auto',
|
|
width: '40px',
|
|
height: '40px'
|
|
},
|
|
backgroundImage: `url(${btnExportUrl})`,
|
|
backgroundSize: '60px auto',
|
|
position: 'absolute',
|
|
top: '0',
|
|
right: '0',
|
|
width: '60px',
|
|
height: '71px',
|
|
cursor: 'pointer'
|
|
},
|
|
};
|
|
|
|
class AppContainer extends React.Component {
|
|
static propTypes = {
|
|
children: PropTypes.node,
|
|
classes: PropTypes.objectOf(PropTypes.string),
|
|
downloadAllSketches: PropTypes.func.isRequired,
|
|
downloadStl: PropTypes.func.isRequired,
|
|
downloadObj: PropTypes.func.isRequired,
|
|
clear: PropTypes.func.isRequired,
|
|
toMyDoodles: PropTypes.func.isRequired,
|
|
toSave: PropTypes.func.isRequired,
|
|
toSettings: PropTypes.func.isRequired,
|
|
toDonate: PropTypes.func.isRequired,
|
|
toSlicer: PropTypes.func.isRequired,
|
|
toHelp: PropTypes.func.isRequired,
|
|
};
|
|
|
|
state = {
|
|
popover: { open: false, element: null },
|
|
popoverAbout: { open: false, element: null },
|
|
}
|
|
|
|
openPopover = (event) => {
|
|
this.setState({
|
|
popover: {
|
|
element: event.currentTarget,
|
|
open: true
|
|
}
|
|
});
|
|
};
|
|
closePopover = () => {
|
|
this.setState({
|
|
popover: {
|
|
element: null,
|
|
open: false
|
|
},
|
|
});
|
|
};
|
|
|
|
openPopoverAbout = (event) => {
|
|
this.setState({
|
|
popoverAbout: {
|
|
element: event.currentTarget,
|
|
open: true
|
|
}
|
|
});
|
|
};
|
|
closePopoverAbout = () => {
|
|
this.setState({
|
|
popoverAbout: {
|
|
element: null,
|
|
open: false
|
|
},
|
|
});
|
|
};
|
|
|
|
|
|
wrapFunction = (callback) => {
|
|
return async () => {
|
|
callback();
|
|
this.closePopover();
|
|
this.closePopoverAbout();
|
|
};
|
|
};
|
|
|
|
render() {
|
|
const {
|
|
downloadStl, downloadObj, downloadAllSketches,
|
|
clear, toMyDoodles, toSettings, toSave, children, classes,
|
|
toDonate, toHelp, toSlicer
|
|
} = this.props;
|
|
|
|
const _downloadStl = this.wrapFunction(downloadStl);
|
|
const _downloadObj = this.wrapFunction(downloadObj);
|
|
const _downloadAllSketches = this.wrapFunction(downloadAllSketches);
|
|
const _toSettings = this.wrapFunction(toSettings);
|
|
const _toHelp = this.wrapFunction(toHelp);
|
|
const _toDonate = this.wrapFunction(toDonate);
|
|
const _toSlicer = this.wrapFunction(toSlicer);
|
|
|
|
return (
|
|
<span>
|
|
<App />
|
|
<div className={classes.buttonLeft}>
|
|
<div className={classes.new} onClick={clear} />
|
|
<div className={classes.open} onClick={toMyDoodles} />
|
|
<div className={classes.save} onClick={toSave} />
|
|
<div className={classes.settings} onClick={_toSettings} />
|
|
<div className={classes.help} onClick={_toHelp} />
|
|
<div className={classes.love} onClick={_toDonate} />
|
|
</div>
|
|
<div className={classes.export} onClick={this.openPopover} />
|
|
<Popover
|
|
open={this.state.popover.open}
|
|
anchorEl={this.state.popover.element}
|
|
targetOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
style={{ marginTop:"50px" }}
|
|
onRequestClose={this.closePopover}
|
|
>
|
|
<Menu>
|
|
<MenuItem
|
|
primaryText="STL"
|
|
onClick={_downloadStl}
|
|
/>
|
|
<MenuItem
|
|
primaryText="OBJ"
|
|
onClick={_downloadObj}
|
|
/>
|
|
<MenuItem
|
|
primaryText="GCODE"
|
|
onClick={_toSlicer}
|
|
/>
|
|
<MenuItem
|
|
primaryText="Backup as ZIP"
|
|
onClick={_downloadAllSketches}
|
|
/>
|
|
</Menu>
|
|
</Popover>
|
|
|
|
<Popover
|
|
open={this.state.popoverAbout.open}
|
|
anchorEl={this.state.popoverAbout.element}
|
|
targetOrigin={{ horizontal: 'left', vertical: 'top' }}
|
|
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
|
|
style={{marginTop: "50px", marginLeft: "-20px", minWidth: "140px", }}
|
|
onRequestClose={this.closePopoverAbout}
|
|
>
|
|
<Menu>
|
|
<MenuItem primaryText="Donate" onClick={_toDonate}/>
|
|
<MenuItem primaryText="Help" onClick={_toHelp}/>
|
|
<MenuItem primaryText="About" onClick={_toSettings}/>
|
|
</Menu>
|
|
</Popover>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default connect(state => ({ }), {
|
|
toMyDoodles: () => actions.router.push('/my-doodles'),
|
|
toSave: () => actions.router.push('/save'),
|
|
toDonate: () => actions.router.push('/donate'),
|
|
toHelp: () => actions.router.push('/help'),
|
|
toSettings: () => actions.router.push('/settings'),
|
|
toSlicer: () => actions.router.push('/slicer'),
|
|
clear: actions.sketcher.clear,
|
|
downloadStl: actions.downloadStl,
|
|
downloadObj: actions.downloadObj,
|
|
downloadAllSketches: actions.files.downloadAllSketches
|
|
})(injectSheet(styles)(AppContainer));
|