merge
This commit is contained in:
Delucse
commit
b42e466304
@ -8,12 +8,12 @@ import { tutorials } from './tutorials';
|
|||||||
|
|
||||||
import { fade } from '@material-ui/core/styles/colorManipulator';
|
import { fade } from '@material-ui/core/styles/colorManipulator';
|
||||||
import { withStyles } from '@material-ui/core/styles';
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
|
||||||
import Button from '@material-ui/core/Button';
|
import Button from '@material-ui/core/Button';
|
||||||
import Stepper from '@material-ui/core/Stepper';
|
import Stepper from '@material-ui/core/Stepper';
|
||||||
import Step from '@material-ui/core/Step';
|
import Step from '@material-ui/core/Step';
|
||||||
import StepLabel from '@material-ui/core/StepLabel';
|
import StepLabel from '@material-ui/core/StepLabel';
|
||||||
import Tooltip from '@material-ui/core/Tooltip';
|
import Tooltip from '@material-ui/core/Tooltip';
|
||||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
|
||||||
|
|
||||||
const styles = (theme) => ({
|
const styles = (theme) => ({
|
||||||
verticalStepper: {
|
verticalStepper: {
|
||||||
@ -115,71 +115,72 @@ class StepperVertical extends Component {
|
|||||||
var tutorialId = this.state.tutorialId;
|
var tutorialId = this.state.tutorialId;
|
||||||
var verticalTutorialId = this.state.verticalTutorialId;
|
var verticalTutorialId = this.state.verticalTutorialId;
|
||||||
return (
|
return (
|
||||||
<div style={{marginRight: '10px'}}>
|
isWidthUp('sm', this.props.width) ?
|
||||||
<Button
|
<div style={{marginRight: '10px'}}>
|
||||||
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
<Button
|
||||||
disabled={this.state.verticalTutorialId === 1}
|
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||||
onClick={() => {this.verticalStepper(-1)}}
|
disabled={this.state.verticalTutorialId === 1}
|
||||||
>
|
onClick={() => {this.verticalStepper(-1)}}
|
||||||
{'<'}
|
|
||||||
</Button>
|
|
||||||
<div style={{display: 'flex', height: 'max-content', width: 'max-content'}}>
|
|
||||||
<div style={{position: 'relative'}}>
|
|
||||||
<div
|
|
||||||
className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}
|
|
||||||
style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={clsx(this.props.classes.progress, this.props.classes.progressBackground)}
|
|
||||||
style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Stepper
|
|
||||||
activeStep={tutorialId}
|
|
||||||
orientation="vertical"
|
|
||||||
connector={<div style={{height: '10px'}}></div>}
|
|
||||||
classes={{root: this.props.classes.verticalStepper}}
|
|
||||||
>
|
>
|
||||||
{this.state.tutorialArray.map((tutorial, i) => {
|
{'<'}
|
||||||
var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
|
</Button>
|
||||||
return (
|
<div style={{display: 'flex', height: 'max-content', width: 'max-content'}}>
|
||||||
<Step key={i}>
|
<div style={{position: 'relative'}}>
|
||||||
<Tooltip title={Object.keys(tutorial).length > 0 ? tutorial.title : ''} placement='right' arrow >
|
<div
|
||||||
<Link to={`/tutorial/${i === index ? verticalTutorialId : verticalTutorialId - index + i}`}>
|
className={clsx(this.props.classes.progress, this.props.classes.progressForeground)}
|
||||||
<StepLabel
|
style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
|
||||||
StepIconComponent={'div'}
|
</div>
|
||||||
classes={{
|
<div
|
||||||
root: tutorial === tutorials[verticalTutorialId-1] ?
|
className={clsx(this.props.classes.progress, this.props.classes.progressBackground)}
|
||||||
tutorial === tutorials[tutorialId-1] ?
|
style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
|
||||||
clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
|
</div>
|
||||||
: this.props.classes.stepIconLarge
|
</div>
|
||||||
: tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
|
<Stepper
|
||||||
|
activeStep={tutorialId}
|
||||||
|
orientation="vertical"
|
||||||
|
connector={<div style={{height: '10px'}}></div>}
|
||||||
|
classes={{root: this.props.classes.verticalStepper}}
|
||||||
|
>
|
||||||
|
{this.state.tutorialArray.map((tutorial, i) => {
|
||||||
|
var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
|
||||||
|
return (
|
||||||
|
<Step key={i}>
|
||||||
|
<Tooltip title={Object.keys(tutorial).length > 0 ? tutorial.title : ''} placement='right' arrow >
|
||||||
|
<Link to={`/tutorial/${i === index ? verticalTutorialId : verticalTutorialId - index + i}`}>
|
||||||
|
<StepLabel
|
||||||
|
StepIconComponent={'div'}
|
||||||
|
classes={{
|
||||||
|
root: tutorial === tutorials[verticalTutorialId-1] ?
|
||||||
tutorial === tutorials[tutorialId-1] ?
|
tutorial === tutorials[tutorialId-1] ?
|
||||||
clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
|
clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
|
||||||
: this.props.classes.stepIconMedium
|
: this.props.classes.stepIconLarge
|
||||||
: tutorial === tutorials[tutorialId-1] ?
|
: tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
|
||||||
clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
|
tutorial === tutorials[tutorialId-1] ?
|
||||||
: this.props.classes.stepIconSmall
|
clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
|
||||||
}}
|
: this.props.classes.stepIconMedium
|
||||||
>
|
: tutorial === tutorials[tutorialId-1] ?
|
||||||
</StepLabel>
|
clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
|
||||||
</Link>
|
: this.props.classes.stepIconSmall
|
||||||
</Tooltip>
|
}}
|
||||||
</Step>
|
>
|
||||||
)})}
|
</StepLabel>
|
||||||
</Stepper>
|
</Link>
|
||||||
</div>
|
</Tooltip>
|
||||||
<Button
|
</Step>
|
||||||
style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
)})}
|
||||||
disabled={this.state.verticalTutorialId === tutorials.length}
|
</Stepper>
|
||||||
onClick={() => {this.verticalStepper(1)}}
|
</div>
|
||||||
>
|
<Button
|
||||||
{'>'}
|
style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||||
</Button>
|
disabled={this.state.verticalTutorialId === tutorials.length}
|
||||||
|
onClick={() => {this.verticalStepper(1)}}
|
||||||
</div>
|
>
|
||||||
|
{'>'}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
: null
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default withRouter(withStyles(styles, {withTheme: true})(StepperVertical));
|
export default withRouter(withStyles(styles, {withTheme: true})(withWidth()(StepperVertical)));
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import NotFound from '../NotFound';
|
|||||||
import { tutorials } from './tutorials';
|
import { tutorials } from './tutorials';
|
||||||
import { initialXml } from '../Blockly/initialXml.js';
|
import { initialXml } from '../Blockly/initialXml.js';
|
||||||
|
|
||||||
|
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
|
||||||
import Tabs from '@material-ui/core/Tabs';
|
import Tabs from '@material-ui/core/Tabs';
|
||||||
import Tab from '@material-ui/core/Tab';
|
import Tab from '@material-ui/core/Tab';
|
||||||
import Grid from '@material-ui/core/Grid';
|
import Grid from '@material-ui/core/Grid';
|
||||||
@ -58,7 +59,7 @@ class Tutorial extends Component {
|
|||||||
<StepperVertical />
|
<StepperVertical />
|
||||||
|
|
||||||
{/* width of vertical stepper is 30px*/}
|
{/* width of vertical stepper is 30px*/}
|
||||||
<Card style={{width: 'calc(100% - 30px)', padding: '10px'}}>
|
<Card style={{width: isWidthUp('sm', this.props.width) ? 'calc(100% - 30px)' : '100%', padding: '10px'}}>
|
||||||
<Tabs
|
<Tabs
|
||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
indicatorColor="primary"
|
indicatorColor="primary"
|
||||||
@ -97,4 +98,4 @@ class Tutorial extends Component {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Tutorial;
|
export default withWidth()(Tutorial);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user