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

next and back step - buttons

Browse Source
This commit is contained in:
Delucse 2020-09-11 11:00:57 +02:00
parent 6c3709fde8
commit 825075d656
4 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Tutorial/Assessment.js
View File

@ -18,7 +18,7 @@ class Assessment extends Component {
return ( return (
<div style={{width: '100%'}}> <div style={{width: '100%'}}>
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography> <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
<Grid container spacing={2}> <Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}> <Grid item xs={12} md={6} lg={8} style={{ position: 'relative' }}>
<SolutionCheck /> <SolutionCheck />
<BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/> <BlocklyWindow initialXml={this.props.status[currentTutorialId].xml ? this.props.status[currentTutorialId].xml : null}/>

12
src/components/Tutorial/Instruction.js
View File

@ -11,14 +11,18 @@ class Instruction extends Component {
render() { render() {
var step = this.props.step; var step = this.props.step;
var isHardware = step.hardware && step.hardware.length > 0;
var areRequirements = step.requirements && step.requirements.length > 0;
return ( return (
<div> <div>
<Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography> <Typography variant='h4' style={{marginBottom: '5px'}}>{step.headline}</Typography>
<Typography style={{marginBottom: '5px'}}>{step.text1}</Typography> <Typography style={isHardware ? {} : {marginBottom: '5px'}}>{step.text1}</Typography>
{step.hardware && step.hardware.length > 0 ? 'Hardware: todo' : null} {isHardware ?
{step.requirements && step.requirements.length > 0 ? 'Voraussetzungen: todo' : null} <Typography style={areRequirements ? {} : {marginBottom: '5px'}}>Hardware: todo</Typography> : null}
{areRequirements > 0 ?
<Typography style={{marginBottom: '5px'}}>Voraussetzungen: todo</Typography> : null}
{step.xml ? {step.xml ?
<Grid container spacing={2}> <Grid container spacing={2} style={{marginBottom: '5px'}}>
<Grid item xs={12}> <Grid item xs={12}>
<BlocklyWindow <BlocklyWindow
trashcan={false} trashcan={false}

8
src/components/Tutorial/StepperVertical.js
View File

@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { tutorialStep } from '../../actions/tutorialActions'; import { tutorialStep } from '../../actions/tutorialActions';
import { withRouter, Link } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import clsx from 'clsx'; import clsx from 'clsx';
@ -37,7 +37,7 @@ const styles = (theme) => ({
connector: { connector: {
height: '10px', height: '10px',
borderLeft: `3px solid ${theme.palette.primary.main}`, borderLeft: `3px solid ${theme.palette.primary.main}`,
margin: '5px auto' margin: 'auto'
} }
}); });
@ -70,7 +70,7 @@ class StepperVertical extends Component {
return ( return (
<Step key={i}> <Step key={i}>
<Tooltip title={step.headline} placement='right' arrow > <Tooltip title={step.headline} placement='right' arrow >
<Link onClick={() => {this.props.tutorialStep(i)}}> <div style={i === activeStep ? {padding: '5px 0'} : {padding: '5px 0', cursor: 'pointer'}} onClick={i === activeStep ? null : () => {this.props.tutorialStep(i)}}>
<StepLabel <StepLabel
StepIconComponent={'div'} StepIconComponent={'div'}
classes={{ classes={{
@ -84,7 +84,7 @@ class StepperVertical extends Component {
}} }}
> >
</StepLabel> </StepLabel>
</Link> </div>
</Tooltip> </Tooltip>
</Step> </Step>
)})} )})}

10
src/components/Tutorial/Tutorial.js
View File

@ -47,17 +47,17 @@ class Tutorial extends Component {
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
<StepperVertical steps={steps}/> <StepperVertical steps={steps}/>
{/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
<Card style={{padding: '10px'}}> <Card style={{padding: '10px 10px 60px 10px', display: 'block', position: 'relative', height: 'max-content'}}>
{step ? {step ?
step.type === 'instruction' ? step.type === 'instruction' ?
<Instruction step={step}/> <Instruction step={step}/>
: <Assessment step={step}/> // if step.type === 'assessment' : <Assessment step={step}/> // if step.type === 'assessment'
: null} : null}
<div style={{marginTop: '20px'}}> <div style={{marginTop: '20px', position: 'absolute', bottom: '10px'}}>
<Button style={{marginRight: '10px'}} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep-1)}>Zurück</Button> <Button style={{marginRight: '10px', height: '35px'}} variant='contained' disabled={this.props.activeStep === 0} onClick={() => this.props.tutorialStep(this.props.activeStep-1)}>Zurück</Button>
<Button variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length-1} onClick={() => this.props.tutorialStep(this.props.activeStep+1)}>Weiter</Button> <Button style={{height: '35px'}}variant='contained' color='primary' disabled={this.props.activeStep === tutorial.steps.length-1} onClick={() => this.props.tutorialStep(this.props.activeStep+1)}>Weiter</Button>
</div> </div>
</Card> </Card>
</div> </div>