use viewport height for blocklywindow
This commit is contained in:
Mario
parent
182b5ada77
commit
14455547a4
@ -1,4 +1,4 @@
|
||||
import React, {Component} from 'react';
|
||||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
@ -56,7 +56,7 @@ const AccordionDetails = withStyles((theme) => ({
|
||||
|
||||
class CodeViewer extends Component {
|
||||
|
||||
constructor(props){
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
expanded: true,
|
||||
@ -67,12 +67,12 @@ class CodeViewer extends Component {
|
||||
|
||||
componentDidMount() {
|
||||
Prism.highlightAll();
|
||||
this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
|
||||
this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
|
||||
}
|
||||
|
||||
componentDidUpdate(props, state) {
|
||||
if(this.myDiv.current && this.myDiv.current.offsetHeight+'px' !== this.state.componentHeight){
|
||||
this.setState({componentHeight: this.myDiv.current.offsetHeight+'px'});
|
||||
if (this.myDiv.current && this.myDiv.current.offsetHeight + 'px' !== this.state.componentHeight) {
|
||||
this.setState({ componentHeight: this.myDiv.current.offsetHeight + 'px' });
|
||||
}
|
||||
Prism.highlightAll();
|
||||
}
|
||||
@ -85,19 +85,19 @@ class CodeViewer extends Component {
|
||||
var curlyBrackets = '{ }';
|
||||
var unequal = '<>';
|
||||
return (
|
||||
<Card style={{height: '100%', maxHeight: '500px'}} ref={this.myDiv}>
|
||||
<Card style={{ height: '100%', maxHeight: '80vH' }} ref={this.myDiv}>
|
||||
<Accordion
|
||||
square={true}
|
||||
style={{margin: 0}}
|
||||
style={{ margin: 0 }}
|
||||
expanded={this.state.expanded}
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<AccordionSummary>
|
||||
<b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{curlyBrackets}</b>
|
||||
<div style={{margin: 'auto 5px 2px 0px'}}>Arduino Quellcode</div>
|
||||
<b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{curlyBrackets}</b>
|
||||
<div style={{ margin: 'auto 5px 2px 0px' }}>Arduino Quellcode</div>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
|
||||
<pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
|
||||
<AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
|
||||
<pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
|
||||
<code className="language-clike">
|
||||
{this.props.arduino}
|
||||
</code>
|
||||
@ -106,16 +106,16 @@ class CodeViewer extends Component {
|
||||
</Accordion>
|
||||
<Accordion
|
||||
square={true}
|
||||
style={{margin: 0}}
|
||||
style={{ margin: 0 }}
|
||||
expanded={!this.state.expanded}
|
||||
onChange={this.onChange}
|
||||
>
|
||||
<AccordionSummary>
|
||||
<b style={{fontSize: '20px', marginRight: '5px', width: '35px'}}>{unequal}</b>
|
||||
<div style={{margin: 'auto 5px 2px 0px'}}>XML Blöcke</div>
|
||||
<b style={{ fontSize: '20px', marginRight: '5px', width: '35px' }}>{unequal}</b>
|
||||
<div style={{ margin: 'auto 5px 2px 0px' }}>XML Blöcke</div>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails style={{padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white'}}>
|
||||
<pre className="line-numbers" style={{paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white'}}>
|
||||
<AccordionDetails style={{ padding: 0, height: `calc(${this.state.componentHeight} - 50px - 50px)`, backgroundColor: 'white' }}>
|
||||
<pre className="line-numbers" style={{ paddingBottom: 0, width: '100%', overflow: 'auto', scrollbarWidth: 'thin', height: 'calc(100% - 30px)', margin: '15px 0', paddingTop: 0, whiteSpace: 'pre-wrap', backgroundColor: 'white' }}>
|
||||
<code className="language-xml">
|
||||
{`${this.props.xml}`}
|
||||
</code>
|
||||
|
||||
@ -56,7 +56,7 @@ class Home extends Component {
|
||||
Blockly.svgResize(workspace);
|
||||
}
|
||||
|
||||
componentWillUnmount(){
|
||||
componentWillUnmount() {
|
||||
this.props.clearStats();
|
||||
this.props.workspaceName(null);
|
||||
}
|
||||
@ -73,21 +73,21 @@ class Home extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div style={{float: 'right', height: '40px', marginBottom: '20px'}}><WorkspaceFunc /></div>
|
||||
<div style={{float: 'left', height: '40px', position: 'relative'}}><WorkspaceStats /></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'} >
|
||||
<IconButton
|
||||
className={this.state.codeOn ? this.props.classes.codeOn : this.props.classes.codeOff}
|
||||
style={{width: '40px', height: '40px', position: 'absolute', top: -12, right: 8, zIndex: 21 }}
|
||||
style={{ width: '40px', height: '40px', position: 'absolute', top: -12, right: 8, zIndex: 21 }}
|
||||
onClick={() => this.onChange()}
|
||||
>
|
||||
<FontAwesomeIcon icon={faCode} size="xs"/>
|
||||
<FontAwesomeIcon icon={faCode} size="xs" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<TrashcanButtons />
|
||||
<BlocklyWindow blocklyCSS={{height: '500px'}} blockDisabled/>
|
||||
<BlocklyWindow blocklyCSS={{ height: '80vH' }} blockDisabled />
|
||||
</Grid>
|
||||
{this.state.codeOn ?
|
||||
<Grid item xs={12} md={6}>
|
||||
|
||||
@ -14,13 +14,13 @@ import Typography from '@material-ui/core/Typography';
|
||||
|
||||
class Assessment extends Component {
|
||||
|
||||
componentDidMount(){
|
||||
componentDidMount() {
|
||||
// alert(this.props.name);
|
||||
this.props.workspaceName(this.props.name);
|
||||
}
|
||||
|
||||
componentDidUpdate(props){
|
||||
if(props.name !== this.props.name){
|
||||
componentDidUpdate(props) {
|
||||
if (props.name !== this.props.name) {
|
||||
// alert(this.props.name);
|
||||
this.props.workspaceName(this.props.name);
|
||||
}
|
||||
@ -34,23 +34,23 @@ class Assessment extends Component {
|
||||
var statusTask = status.tasks[taskIndex];
|
||||
|
||||
return (
|
||||
<div style={{width: '100%'}}>
|
||||
<Typography variant='h4' style={{float: 'left', marginBottom: '5px', height: '40px', display: 'table'}}>{currentTask.headline}</Typography>
|
||||
<div style={{float: 'right', height: '40px'}}><WorkspaceFunc solutionCheck/></div>
|
||||
<Grid container spacing={2} style={{marginBottom: '5px'}}>
|
||||
<div style={{ width: '100%' }}>
|
||||
<Typography variant='h4' style={{ float: 'left', marginBottom: '5px', height: '40px', display: 'table' }}>{currentTask.headline}</Typography>
|
||||
<div style={{ float: 'right', height: '40px' }}><WorkspaceFunc solutionCheck /></div>
|
||||
<Grid container spacing={2} style={{ marginBottom: '5px' }}>
|
||||
<Grid item xs={12} md={6} lg={8}>
|
||||
<BlocklyWindow
|
||||
initialXml={statusTask ? statusTask.xml ? statusTask.xml : null : null}
|
||||
blockDisabled
|
||||
blocklyCSS={{height: '500px'}}
|
||||
blocklyCSS={{ height: '65vH' }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? {height: 'max-content'} : {}}>
|
||||
<Card style={{height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px'}}>
|
||||
<Grid item xs={12} md={6} lg={4} style={isWidthDown('sm', this.props.width) ? { height: 'max-content' } : {}}>
|
||||
<Card style={{ height: 'calc(50% - 30px)', padding: '10px', marginBottom: '10px' }}>
|
||||
<Typography variant='h5'>Arbeitsauftrag</Typography>
|
||||
<Typography>{currentTask.text}</Typography>
|
||||
</Card>
|
||||
<div style={isWidthDown('sm', this.props.width) ? {height: '500px'} : {height: '50%'}}>
|
||||
<div style={isWidthDown('sm', this.props.width) ? { height: '500px' } : { height: '50%' }}>
|
||||
<CodeViewer />
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user