+
: ''}>
+
{tutorials[tutorialId-1].title}
@@ -90,14 +67,4 @@ class StepperHorizontal extends Component {
};
}
-StepperHorizontal.propTypes = {
- status: PropTypes.array.isRequired,
- change: PropTypes.number.isRequired,
-};
-
-const mapStateToProps = state => ({
- change: state.tutorial.change,
- status: state.tutorial.status
-});
-
-export default connect(mapStateToProps, null)(withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal)));
+export default withRouter(withStyles(styles, {withTheme: true})(StepperHorizontal));
diff --git a/src/components/Tutorial/StepperVertical.js b/src/components/Tutorial/StepperVertical.js
index 48ea972..7d89bb8 100644
--- a/src/components/Tutorial/StepperVertical.js
+++ b/src/components/Tutorial/StepperVertical.js
@@ -1,12 +1,10 @@
import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import { withRouter, Link } from 'react-router-dom';
import clsx from 'clsx';
-import { tutorials } from './tutorials';
+import tutorials from './tutorials.json';
import { fade } from '@material-ui/core/styles/colorManipulator';
import { withStyles } from '@material-ui/core/styles';
@@ -22,44 +20,33 @@ const styles = (theme) => ({
padding: 0,
width: '30px',
},
- stepIcon: {
- borderStyle: `solid`,
- borderWith: '2px',
+ stepIconSmall: {
+ border: `2px solid ${theme.palette.primary.main}`,
borderRadius: '50%',
width: '12px',
height: '12px',
margin: '0 auto'
},
stepIconMedium: {
+ border: `2px solid ${theme.palette.primary.main}`,
+ borderRadius: '50%',
width: '18px',
height: '18px',
+ margin: '0 auto'
},
stepIconLarge: {
+ border: `2px solid ${theme.palette.primary.main}`,
+ borderRadius: '50%',
width: '24px',
height: '24px'
},
stepIconTransparent: {
- borderColor: `transparent`,
+ border: `2px solid transparent`,
cursor: 'default'
},
- stepIconSuccess: {
- borderColor: theme.palette.primary.main,
- },
- stepIconError: {
- borderColor: theme.palette.error.dark,
- },
- stepIconOther: {
- borderColor: theme.palette.secondary.main,
- },
- stepIconActiveSuccess: {
+ stepIconActive: {
backgroundColor: fade(theme.palette.primary.main, 0.6)
},
- stepIconActiveError: {
- backgroundColor: fade(theme.palette.error.dark, 0.6)
- },
- stepIconActiveOther: {
- backgroundColor: fade(theme.palette.secondary.main, 0.6)
- },
progress: {
position: 'absolute',
top: 0,
@@ -89,7 +76,7 @@ class StepperVertical extends Component {
tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3)
: tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2),
tutorialId: Number(this.props.match.params.tutorialId),
- selectedVerticalTutorialId: Number(this.props.match.params.tutorialId)
+ verticalTutorialId: Number(this.props.match.params.tutorialId)
}
componentDidUpdate(props, state){
@@ -105,13 +92,13 @@ class StepperVertical extends Component {
tutorials.slice(Number(this.props.match.params.tutorialId)-3-1, Number(this.props.match.params.tutorialId)+3)
: tutorials.slice(Number(this.props.match.params.tutorialId)-2-1,Number(this.props.match.params.tutorialId)+2),
tutorialId: Number(this.props.match.params.tutorialId),
- selectedVerticalTutorialId: Number(this.props.match.params.tutorialId)
+ verticalTutorialId: Number(this.props.match.params.tutorialId)
})
}
}
verticalStepper = (step) => {
- var newTutorialId = this.state.selectedVerticalTutorialId + step;
+ var newTutorialId = this.state.verticalTutorialId + step;
var tutorialArray = Number(newTutorialId) === 1 ?
tutorials.slice(newTutorialId-1, newTutorialId+4)
: newTutorialId === 2 ?
@@ -121,31 +108,31 @@ class StepperVertical extends Component {
: newTutorialId === tutorials.length-1 ?
tutorials.slice(newTutorialId-3-1, newTutorialId+3)
: tutorials.slice(newTutorialId-2-1, newTutorialId+2);
- this.setState({ tutorialArray: tutorialArray, selectedVerticalTutorialId: newTutorialId });
+ this.setState({ tutorialArray: tutorialArray, verticalTutorialId: newTutorialId });
}
render() {
var tutorialId = this.state.tutorialId;
- var selectedVerticalTutorialId = this.state.selectedVerticalTutorialId;
+ var verticalTutorialId = this.state.verticalTutorialId;
return (
isWidthUp('sm', this.props.width) ?
-
+
+ style={{ zIndex: 1, borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`, height: `${(verticalTutorialId/tutorials.length)*100}%`}}>
+ style={{borderRadius: `${verticalTutorialId/tutorials.length === 1 ? '2px' : '2px 2px 0 0'}`}}>
{this.state.tutorialArray.map((tutorial, i) => {
- var index = this.state.tutorialArray.indexOf(tutorials[selectedVerticalTutorialId-1]);
- var verticalTutorialId = i === index ? selectedVerticalTutorialId : selectedVerticalTutorialId - index + i;
- var tutorialStatus = this.props.status[verticalTutorialId-1].status === 'success' ? 'Success' :
- this.props.status[verticalTutorialId-1].status === 'error' ? 'Error' : 'Other';
+ var index = this.state.tutorialArray.indexOf(tutorials[verticalTutorialId-1]);
return (
0 ? tutorial.title : ''} placement='right' arrow >
-
+
@@ -188,7 +172,7 @@ class StepperVertical extends Component {