display statistics as menu, if screen is too small
This commit is contained in:
Delucse
parent
28fb2c3bab
commit
1c29dd2109
@ -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'} >
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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;
|
||||
return (
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<Tooltip title="Anzahl aktueller Blöcke" >
|
||||
const stats = <div style={bigDisplay ? {display: 'flex'} : {display: 'inline'}}>
|
||||
<Tooltip title="Anzahl aktueller Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
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" >
|
||||
<Tooltip title="Anzahl neuer Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
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" >
|
||||
<Tooltip title="Anzahl veränderter Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
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" >
|
||||
<Tooltip title="Anzahl bewegter Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
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" >
|
||||
<Tooltip title="Anzahl gelöschter Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
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" >
|
||||
<Tooltip title="Verbleibende Blöcke" arrow>
|
||||
<Chip
|
||||
style={{ marginRight: '1rem' }}
|
||||
style={bigDisplay ? {marginRight: '1rem'} : {marginRight: '1rem', marginBottom: '5px'}}
|
||||
color="primary"
|
||||
label={workspace.remainingCapacity()}>
|
||||
</Chip>
|
||||
</Tooltip> : null}
|
||||
</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
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(WorkspaceStats));
|
||||
export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withWidth()(WorkspaceStats)));
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user