add feature to hide Workspace stats
This commit is contained in:
Mario
parent
5da3006e75
commit
70c8a1db60
@ -29,7 +29,7 @@ Blockly.Arduino['arduino_functions'] = function (block) {
|
||||
return loopBranch;
|
||||
};
|
||||
|
||||
Blockly.Arduino['procedures_defreturn'] = function (block: Block | any) {
|
||||
Blockly.Arduino['procedures_defreturn'] = function (block) {
|
||||
// Define a procedure with a return value.
|
||||
const funcName = Blockly.Arduino.variableDB_.getName(
|
||||
block.getFieldValue('NAME'),
|
||||
|
||||
@ -49,7 +49,8 @@ class Home extends Component {
|
||||
codeOn: false,
|
||||
gallery: [],
|
||||
share: [],
|
||||
projectToLoad: undefined
|
||||
projectToLoad: undefined,
|
||||
stats: window.localStorage.getItem('stats'),
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
@ -90,8 +91,11 @@ class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
{this.state.stats ?
|
||||
<div style={{ float: 'left', height: '40px', position: 'relative' }}><WorkspaceStats /></div>
|
||||
: null
|
||||
}
|
||||
<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 ? 8 : 12} style={{ position: 'relative' }}>
|
||||
<Tooltip title={this.state.codeOn ? 'Code ausblenden' : 'Code anzeigen'} >
|
||||
|
||||
@ -15,7 +15,7 @@ const useStyles = makeStyles((theme) => ({
|
||||
},
|
||||
}));
|
||||
|
||||
export default function LanguageSelector() {
|
||||
export default function RenderSelector() {
|
||||
const classes = useStyles();
|
||||
const [renderer, setRenderer] = React.useState(window.localStorage.getItem('renderer'));
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ import Button from '@material-ui/core/Button';
|
||||
import Typography from '@material-ui/core/Typography';
|
||||
import LanguageSelector from './LanguageSelector';
|
||||
import RenderSelector from './RenderSelector';
|
||||
import StatsSelector from './StatsSelector';
|
||||
|
||||
|
||||
class Settings extends Component {
|
||||
@ -14,6 +15,7 @@ class Settings extends Component {
|
||||
<Typography variant='h4' style={{ marginBottom: '5px' }}>Einstellungen</Typography>
|
||||
<LanguageSelector />
|
||||
<RenderSelector />
|
||||
<StatsSelector />
|
||||
<Button
|
||||
style={{ marginTop: '20px' }}
|
||||
variant="contained"
|
||||
|
||||
44
src/components/Settings/StatsSelector.js
Normal file
44
src/components/Settings/StatsSelector.js
Normal file
@ -0,0 +1,44 @@
|
||||
import React from 'react';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import InputLabel from '@material-ui/core/InputLabel';
|
||||
import MenuItem from '@material-ui/core/MenuItem';
|
||||
import FormControl from '@material-ui/core/FormControl';
|
||||
import Select from '@material-ui/core/Select';
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
formControl: {
|
||||
margin: theme.spacing(1),
|
||||
minWidth: 400,
|
||||
},
|
||||
selectEmpty: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
}));
|
||||
|
||||
export default function StatsSelector() {
|
||||
const classes = useStyles();
|
||||
const [stats, setStats] = React.useState(window.localStorage.getItem('stats'));
|
||||
|
||||
const handleChange = (event) => {
|
||||
setStats(event.target.value);
|
||||
window.localStorage.setItem('stats', event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormControl className={classes.formControl}>
|
||||
<InputLabel id="demo-simple-select-label">Renderer</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={stats}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value={true}>On</MenuItem>
|
||||
<MenuItem value={false}>Off</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<p>Schaltet die Statistiken Oberhalb der Arbeitsfläche ein bzw. aus</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -37,7 +37,7 @@ const styles = (theme) => ({
|
||||
|
||||
class WorkspaceStats extends Component {
|
||||
|
||||
state={
|
||||
state = {
|
||||
anchor: null
|
||||
}
|
||||
|
||||
@ -53,69 +53,69 @@ class WorkspaceStats extends Component {
|
||||
const bigDisplay = !isWidthDown('sm', 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>
|
||||
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 (
|
||||
bigDisplay ?
|
||||
<div style={{bottom: 0, position: 'absolute'}}>
|
||||
<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"/>
|
||||
<FontAwesomeIcon icon={faEllipsisH} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Popover
|
||||
@ -131,10 +131,10 @@ class WorkspaceStats extends Component {
|
||||
horizontal: 'center',
|
||||
}}
|
||||
PaperProps={{
|
||||
style: {margin: '5px'}
|
||||
style: { margin: '5px' }
|
||||
}}
|
||||
>
|
||||
<div style={{margin: '10px'}}>
|
||||
<div style={{ margin: '10px' }}>
|
||||
{stats}
|
||||
</div>
|
||||
</Popover>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user