display statistics as menu, if screen is too small

src/components/Home.js

@@ -72,8 +72,8 @@ class Home extends Component {
   render() {
     return (
       <div>
-        <div style={{float: 'left'}}><WorkspaceStats /></div>
-        <div style={{float: 'right'}}><WorkspaceFunc /></div>
+        <div style={{float: 'right', height: '40px', marginBottom: '20px'}}><WorkspaceFunc /></div>
+        <div style={{float: 'left', height: '40px', position: 'relative'}}><WorkspaceStats /></div>
         <Grid container spacing={2}>
           <Grid item xs={12} md={this.state.codeOn ? 6 : 12} style={{ position: 'relative' }}>
             <Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >

src/components/WorkspaceFunc.js

@@ -102,7 +102,7 @@ class WorkspaceFunc extends Component {
 
   render() {
     return (
-      <div style={{ marginBottom: '20px', width: 'max-content', display: 'flex'}}>
+      <div style={{width: 'max-content', display: 'flex'}}>
         <Compile iconButton />
         <Tooltip title='Blöcke speichern' arrow style={{marginRight: '5px'}}>
           <IconButton

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 =  <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
+                    <Tooltip title="Anzahl aktueller Blöcke" arrow>
+                      <Chip
+                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+                        color="primary"
+                        avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
+                        label={workspace ? workspace.getAllBlocks().length : 0}>
+                      </Chip>
+                    </Tooltip>
+                    <Tooltip title="Anzahl neuer Blöcke" arrow>
+                      <Chip
+                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+                        color="primary"
+                        avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
+                        label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
+                      </Chip>
+                    </Tooltip>
+                    <Tooltip title="Anzahl veränderter Blöcke" arrow>
+                      <Chip
+                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+                        color="primary"
+                        avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
+                        label={this.props.change}>
+                      </Chip>
+                    </Tooltip>
+                    <Tooltip title="Anzahl bewegter Blöcke" arrow>
+                      <Chip
+                        style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+                        color="primary"
+                        avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
+                        label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
+                      </Chip>
+                    </Tooltip>
+                    <Tooltip title="Anzahl gelöschter Blöcke" arrow>
+                      <Chip
+                        style={remainingBlocksInfinity ? bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'} : {}}
+                        color="primary"
+                        avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
+                        label={this.props.delete}>
+                      </Chip>
+                    </Tooltip>
+                    {remainingBlocksInfinity ?
+                      <Tooltip title="Verbleibende Blöcke" arrow>
+                        <Chip
+                          style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
+                          color="primary"
+                          label={workspace.remainingCapacity()}>
+                        </Chip>
+                      </Tooltip> : null}
+                    </div>
     return (
-      <div style={{ marginBottom: '20px' }}>
-        <Tooltip title="Anzahl aktueller Blöcke" >
-          <Chip
-            style={{ marginRight: '1rem' }}
-            color="primary"
-            avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
-            label={workspace ? workspace.getAllBlocks().length : 0}>
-          </Chip>
-        </Tooltip>
-        <Tooltip title="Anzahl neuer Blöcke" >
-          <Chip
-            style={{ marginRight: '1rem' }}
-            color="primary"
-            avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
-            label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
-          </Chip>
-        </Tooltip>
-        <Tooltip title="Anzahl veränderter Blöcke" >
-          <Chip
-            style={{ marginRight: '1rem' }}
-            color="primary"
-            avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
-            label={this.props.change}>
-          </Chip>
-        </Tooltip>
-        <Tooltip title="Anzahl bewegter Blöcke" >
-          <Chip
-            style={{ marginRight: '1rem' }}
-            color="primary"
-            avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
-            label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
-          </Chip>
-        </Tooltip>
-        <Tooltip title="Anzahl gelöschter Blöcke" >
-          <Chip
-            style={{ marginRight: '1rem' }}
-            color="primary"
-            avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
-            label={this.props.delete}>
-          </Chip>
-        </Tooltip>
-        {remainingBlocksInfinity ?
-          <Tooltip title="Verbleibende Blöcke" >
-            <Chip
-              style={{ marginRight: '1rem' }}
-              color="primary"
-              label={workspace.remainingCapacity()}>
-            </Chip>
-          </Tooltip> : null}
-      </div>
+      bigDisplay ?
+        <div style={{bottom: 0, position: 'absolute'}}>
+          {stats}
+        </div>
+      :
+        <div>
+          <Tooltip title='Statistiken anzeigen' arrow>
+            <IconButton
+              className={this.props.classes.menu}
+              onClick={(event) => this.handleClick(event)}
+            >
+              <FontAwesomeIcon icon={faEllipsisH} size="xs"/>
+            </IconButton>
+          </Tooltip>
+          <Popover
+            open={Boolean(this.state.anchor)}
+            anchorEl={this.state.anchor}
+            onClose={this.handleClose}
+            anchorOrigin={{
+              vertical: 'bottom',
+              horizontal: 'center',
+            }}
+            transformOrigin={{
+              vertical: 'top',
+              horizontal: 'center',
+            }}
+            PaperProps={{
+              style: {margin: '5px'}
+            }}
+          >
+            <div style={{margin: '10px'}}>
+              {stats}
+            </div>
+          </Popover>
+        </div>
     );
   };
 }
@@ -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)));