+
+ {this.props.solutionCheck ?
:
}
+
+ this.saveXmlFile(this.props.xml)}
+ >
+
+
+
+
+
{this.uploadXmlFile(e.target.files[0])}}
+ id="open-blocks"
+ type="file"
+ />
+
+
+
+ this.resetWorkspace()}
+ >
+
+
+
-
-
-
-
);
};
@@ -60,7 +157,9 @@ class WorkspaceFunc extends Component {
WorkspaceFunc.propTypes = {
arduino: PropTypes.string.isRequired,
- xml: PropTypes.string.isRequired
+ xml: PropTypes.string.isRequired,
+ clearStats: PropTypes.func.isRequired,
+ onChangeCode: PropTypes.func.isRequired
};
const mapStateToProps = state => ({
@@ -68,4 +167,4 @@ const mapStateToProps = state => ({
xml: state.workspace.code.xml
});
-export default connect(mapStateToProps, null)(WorkspaceFunc);
+export default connect(mapStateToProps, { clearStats, onChangeCode })(withStyles(styles, {withTheme: true})(WorkspaceFunc));
diff --git a/src/components/WorkspaceStats.js b/src/components/WorkspaceStats.js
index 9a98571..32fbf1d 100644
--- a/src/components/WorkspaceStats.js
+++ b/src/components/WorkspaceStats.js
@@ -4,12 +4,15 @@ import { connect } from 'react-redux';
import * as Blockly from 'blockly/core';
+import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
+import IconButton from '@material-ui/core/IconButton';
import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
+import Popover from '@material-ui/core/Popover';
-import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
+import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt, faEllipsisH } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({
@@ -19,65 +22,123 @@ const styles = (theme) => ({
marginLeft: '50px',
padding: '3px 10px',
// borderRadius: '25%'
+ },
+ menu: {
+ backgroundColor: theme.palette.secondary.main,
+ color: theme.palette.secondary.contrastText,
+ width: '40px',
+ height: '40px',
+ '&:hover': {
+ backgroundColor: theme.palette.secondary.main,
+ color: theme.palette.primary.main,
+ }
}
});
class WorkspaceStats extends Component {
+ state={
+ anchor: null
+ }
+
+ handleClose = () => {
+ this.setState({ anchor: null });
+ }
+
+ handleClick = (event) => {
+ this.setState({ anchor: event.currentTarget });
+ };
+
render() {
+ const bigDisplay = !isWidthDown('xs', this.props.width);
const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
+ const stats =
+
+ }
+ label={workspace ? workspace.getAllBlocks().length : 0}>
+
+
+
+ }
+ label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
+
+
+
+ }
+ label={this.props.change}>
+
+
+
+ }
+ label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
+
+
+
+ }
+ label={this.props.delete}>
+
+
+ {remainingBlocksInfinity ?
+
+
+
+ : null}
+
return (
-
-
- }
- label={workspace ? workspace.getAllBlocks().length : 0}>
-
-
-
- }
- label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
-
-
-
- }
- label={this.props.change}>
-
-
-
- }
- label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
-
-
-
- }
- label={this.props.delete}>
-
-
- {remainingBlocksInfinity ?
-
-
-
- : null}
-
+ bigDisplay ?
+
+ {stats}
+
+ :
+
+
+ this.handleClick(event)}
+ >
+
+
+
+
+
+ {stats}
+
+
+
);
};
}
@@ -98,4 +159,4 @@ const mapStateToProps = state => ({
workspaceChange: state.workspace.change
});
-export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(WorkspaceStats));
+export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceStats)));