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

Merge pull request #3 from sensebox/styling

Browse Source 
some styling
This commit is contained in:
Mario Pesch 2020-07-31 16:37:30 +02:00 committed by GitHub
commit 736f3411df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 57 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/App.js
View File

@ -17,6 +17,7 @@ const theme = createMuiTheme({
palette: {
primary: {
main: '#4EAF47',
contrastText: '#ffffff'
},
secondary: {
main: '#DDDDDD'

2
src/components/Blockly/BlocklyComponent.css
View File

@ -2,6 +2,6 @@
height: 100%;
min-height: 700px;
width: 100%;
border: 1px solid #4EAF47;
/* border: 1px solid #4EAF47; */
position: relative;
}

4
src/components/Blockly/BlocklyComponent.jsx
View File

@ -29,6 +29,8 @@ import locale from 'blockly/msg/en';
import 'blockly/blocks';
import Toolbox from './toolbox/Toolbox';
import { Card } from '@material-ui/core';
Blockly.setLocale(locale);
@ -66,7 +68,7 @@ class BlocklyComponent extends React.Component {
return <React.Fragment>
<div ref={this.blocklyDiv} id="blocklyDiv" />
<Card ref={this.blocklyDiv} id="blocklyDiv" />
<Toolbox toolbox={this.toolbox} />
</React.Fragment>;
}

6
src/components/CodeViewer.js
View File

@ -11,6 +11,8 @@ import { withStyles } from '@material-ui/core/styles';
import MuiAccordion from '@material-ui/core/Accordion';
import MuiAccordionSummary from '@material-ui/core/AccordionSummary';
import MuiAccordionDetails from '@material-ui/core/AccordionDetails';
import { Card } from '@material-ui/core';
const Accordion = withStyles((theme) => ({
root: {
@ -73,7 +75,7 @@ class CodeViewer extends Component {
var curlyBrackets = '{ }';
var unequal = '<>';
return (
<div style={{height: '500px'}}>
<Card style={{height: '500px'}}>
<Accordion
square={true}
style={{margin: 0}}
@ -110,7 +112,7 @@ class CodeViewer extends Component {
</pre>
</AccordionDetails>
</Accordion>
</div>
</Card>
);
};
}

81
src/components/WorkspaceStats.js
View File

@ -6,6 +6,8 @@ import * as Blockly from 'blockly/core';
import { withStyles } from '@material-ui/core/styles';
import Tooltip from '@material-ui/core/Tooltip';
import Chip from '@material-ui/core/Chip';
import Avatar from '@material-ui/core/Avatar';
import Typography from '@material-ui/core/Typography';
import { faPuzzlePiece, faTrash, faPlus, faPen, faArrowsAlt } from "@fortawesome/free-solid-svg-icons";
@ -17,7 +19,7 @@ const styles = (theme) => ({
display: 'inline',
marginLeft: '50px',
padding: '3px 10px',
borderRadius: '25%'
// borderRadius: '25%'
}
});
@ -27,44 +29,57 @@ class WorkspaceStats extends Component {
const workspace = Blockly.getMainWorkspace();
const remainingBlocksInfinity = workspace ? workspace.remainingCapacity() !== Infinity : null;
return (
<div style={{marginBottom: '20px', color: 'white'}}>
<Tooltip title="Anzahl aktueller Blöcke" style={{marginLeft: 0}} className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {workspace ? workspace.getAllBlocks().length : 0}</Typography>
</div>
<div style={{marginBottom: '20px'}}>
<Tooltip title="Anzahl aktueller Blöcke" >
<Chip
style={{marginRight: '1rem'}}
color="primary"
title="Anzahl aktueller Blöcke"
avatar={<Avatar><FontAwesomeIcon icon={faPuzzlePiece} /></Avatar>}
label={workspace ? workspace.getAllBlocks().length : 0}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl neuer Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faPlus} style={{marginRight: '5px'}}/>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {this.props.create}</Typography>
</div>
<Tooltip title="Anzahl aktueller Blöcke" >
<Chip
style={{marginRight: '1rem'}}
color="primary"
title="Anzahl neuer Blöcke"
avatar={<Avatar><FontAwesomeIcon icon={faPlus} /></Avatar>}
label={this.props.create}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl veränderter Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faPen} style={{marginRight: '5px'}}/>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {this.props.change}</Typography>
</div>
<Tooltip title="Anzahl veränderter Blöcke" >
<Chip
style={{marginRight: '1rem'}}
color="primary"
title="Anzahl neuer Blöcke"
avatar={<Avatar><FontAwesomeIcon icon={faPen} /></Avatar>}
label={this.props.change}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl bewegter Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faArrowsAlt} style={{marginRight: '5px'}}/>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {this.props.move}</Typography>
</div>
<Tooltip title="Anzahl bewegter Blöcke" >
<Chip
style={{marginRight: '1rem'}}
color="primary"
avatar={<Avatar><FontAwesomeIcon icon={faArrowsAlt} /></Avatar>}
label={this.props.move}>
</Chip>
</Tooltip>
<Tooltip title="Anzahl gelöschter Blöcke" className={this.props.classes.stats}>
<div>
<FontAwesomeIcon icon={faTrash} style={{marginRight: '5px'}}/>
<FontAwesomeIcon icon={faPuzzlePiece} />
<Typography style={{display: 'inline'}}> {this.props.delete}</Typography>
</div>
<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" className={this.props.classes.stats}>
<Typography style={{display: 'inline'}}>{workspace.remainingCapacity()} verbleibende Blöcke</Typography>
<Tooltip title="Verbleibende Blöcke" >
<Chip
style={{marginRight: '1rem'}}
color="primary"
label={workspace.remainingCapacity()}>
</Chip>
</Tooltip> : null}
</div>
);