schuelerlabor-cleverlab/smarti
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

display statistics as menu, if screen is too small

Browse Source
This commit is contained in:
Delucse 2020-09-15 17:05:22 +02:00
parent 28fb2c3bab
commit 1c29dd2109
3 changed files with 116 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Home.js
View File

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

2
src/components/WorkspaceFunc.js
View File

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

93
src/components/WorkspaceStats.js
View File

@ -4,12 +4,15 @@ import { connect } from 'react-redux';
import * as Blockly from 'blockly/core'; import * as Blockly from 'blockly/core';
import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
import { withStyles } from '@material-ui/core/styles'; import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip'; import Tooltip from '@material-ui/core/Tooltip';
import IconButton from '@material-ui/core/IconButton';
import Chip from '@material-ui/core/Chip'; import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar'; 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"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
const styles = (theme) => ({ const styles = (theme) => ({
@ -19,65 +22,123 @@ const styles = (theme) => ({
marginLeft: '50px', marginLeft: '50px',
padding: '3px 10px', padding: '3px 10px',
// borderRadius: '25%' // 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 { class WorkspaceStats extends Component {
state={
anchor: null
}
handleClose = () => {
this.setState({ anchor: null });
}
handleClick = (event) => {
this.setState({ anchor: event.currentTarget });
};
render() { render() {
const bigDisplay = !isWidthDown('xs', this.props.width);
const workspace = Blockly.getMainWorkspace(); const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null; const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
return ( const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
<div style={{ marginBottom: '20px' }}> <Tooltip title="Anzahl aktueller Blöcke" arrow>
<Tooltip title="Anzahl aktueller Blöcke" >
<Chip <Chip
style={{ marginRight: '1rem' }} style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary" color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>} avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
label={workspace ? workspace.getAllBlocks().length : 0}> label={workspace ? workspace.getAllBlocks().length : 0}>
</Chip> </Chip>
</Tooltip> </Tooltip>
<Tooltip title="Anzahl neuer Blöcke" > <Tooltip title="Anzahl neuer Blöcke" arrow>
<Chip <Chip
style={{ marginRight: '1rem' }} style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary" color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>} 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 */} label={this.props.create > 0 ? this.props.create : 0}> {/* initialXML is created automatically, Block is not part of the statistics */}
</Chip> </Chip>
</Tooltip> </Tooltip>
<Tooltip title="Anzahl veränderter Blöcke" > <Tooltip title="Anzahl veränderter Blöcke" arrow>
<Chip <Chip
style={{ marginRight: '1rem' }} style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary" color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>} avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
label={this.props.change}> label={this.props.change}>
</Chip> </Chip>
</Tooltip> </Tooltip>
<Tooltip title="Anzahl bewegter Blöcke" > <Tooltip title="Anzahl bewegter Blöcke" arrow>
<Chip <Chip
style={{ marginRight: '1rem' }} style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary" color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>} 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 */} label={this.props.move > 0 ? this.props.move : 0}> {/* initialXML is moved automatically, Block is not part of the statistics */}
</Chip> </Chip>
</Tooltip> </Tooltip>
<Tooltip title="Anzahl gelöschter Blöcke" > <Tooltip title="Anzahl gelöschter Blöcke" arrow>
<Chip <Chip
style={{ marginRight: '1rem' }} style={remainingBlocksInfinity ? bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'} : {}}
color="primary" color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>} avatar={<Avatar><FontAwesomeIcon icon={faTrash} /></Avatar>}
label={this.props.delete}> label={this.props.delete}>
</Chip> </Chip>
</Tooltip> </Tooltip>
{remainingBlocksInfinity ? {remainingBlocksInfinity ?
<Tooltip title="Verbleibende Blöcke" > <Tooltip title="Verbleibende Blöcke" arrow>
<Chip <Chip
style={{ marginRight: '1rem' }} style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
color="primary" color="primary"
label={workspace.remainingCapacity()}> label={workspace.remainingCapacity()}>
</Chip> </Chip>
</Tooltip> : null} </Tooltip> : null}
</div> </div>
return (
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 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)));