show vertical stepper not on extrasmall displays
This commit is contained in:
Delucse
parent
7148d66d19
commit
c11ff8fc6c
@ -8,12 +8,12 @@ import tutorials from './tutorials.json';
|
||||
|
||||
import { fade } from '@material-ui/core/styles/colorManipulator';
|
||||
import { withStyles } from '@material-ui/core/styles';
|
||||
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
|
||||
import Button from '@material-ui/core/Button';
|
||||
import Stepper from '@material-ui/core/Stepper';
|
||||
import Step from '@material-ui/core/Step';
|
||||
import StepLabel from '@material-ui/core/StepLabel';
|
||||
import Tooltip from '@material-ui/core/Tooltip';
|
||||
import LinearProgress from '@material-ui/core/LinearProgress';
|
||||
|
||||
const styles = (theme) => ({
|
||||
verticalStepper: {
|
||||
@ -115,71 +115,72 @@ class StepperVertical extends Component {
|
||||
var tutorialId = this.state.tutorialId;
|
||||
var verticalTutorialId = this.state.verticalTutorialId;
|
||||
return (
|
||||
<div style={{marginRight: '10px'}}>
|
||||
<Button
|
||||
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||
disabled={this.state.verticalTutorialId === 1}
|
||||
onClick={() => {this.verticalStepper(-1)}}
|
||||
>
|
||||
{'<'}
|
||||
</Button>
|
||||
<div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', 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}}
|
||||
isWidthUp('sm', this.props.width) ?
|
||||
<div style={{marginRight: '10px'}}>
|
||||
<Button
|
||||
style={{minWidth: '30px', margin: 'auto', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||
disabled={this.state.verticalTutorialId === 1}
|
||||
onClick={() => {this.verticalStepper(-1)}}
|
||||
>
|
||||
{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] ?
|
||||
clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconLarge
|
||||
: tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
|
||||
{'<'}
|
||||
</Button>
|
||||
<div style={{display: 'flex', height: 'calc(100% - 25px - 25px)', 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]);
|
||||
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] ?
|
||||
clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconMedium
|
||||
: tutorial === tutorials[tutorialId-1] ?
|
||||
clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconSmall
|
||||
}}
|
||||
>
|
||||
</StepLabel>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</Step>
|
||||
)})}
|
||||
</Stepper>
|
||||
</div>
|
||||
<Button
|
||||
style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||
disabled={this.state.verticalTutorialId === tutorials.length}
|
||||
onClick={() => {this.verticalStepper(1)}}
|
||||
>
|
||||
{'>'}
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
clsx(this.props.classes.stepIconLarge, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconLarge
|
||||
: tutorial === tutorials[verticalTutorialId-2] || tutorial === tutorials[verticalTutorialId] ?
|
||||
tutorial === tutorials[tutorialId-1] ?
|
||||
clsx(this.props.classes.stepIconMedium, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconMedium
|
||||
: tutorial === tutorials[tutorialId-1] ?
|
||||
clsx(this.props.classes.stepIconSmall, this.props.classes.stepIconActive)
|
||||
: this.props.classes.stepIconSmall
|
||||
}}
|
||||
>
|
||||
</StepLabel>
|
||||
</Link>
|
||||
</Tooltip>
|
||||
</Step>
|
||||
)})}
|
||||
</Stepper>
|
||||
</div>
|
||||
<Button
|
||||
style={{minWidth: '30px', minHeight: '25px', padding: '0', writingMode: 'vertical-rl'}}
|
||||
disabled={this.state.verticalTutorialId === tutorials.length}
|
||||
onClick={() => {this.verticalStepper(1)}}
|
||||
>
|
||||
{'>'}
|
||||
</Button>
|
||||
</div>
|
||||
: null
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
export default withRouter(withStyles(styles, {withTheme: true})(StepperVertical));
|
||||
export default withRouter(withStyles(styles, {withTheme: true})(withWidth()(StepperVertical)));
|
||||
|
||||
@ -9,6 +9,7 @@ import NotFound from '../NotFound';
|
||||
|
||||
import tutorials from './tutorials.json';
|
||||
|
||||
import withWidth, { isWidthUp } from '@material-ui/core/withWidth';
|
||||
import Tabs from '@material-ui/core/Tabs';
|
||||
import Tab from '@material-ui/core/Tab';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
@ -47,7 +48,7 @@ class Tutorial extends Component {
|
||||
<StepperVertical />
|
||||
|
||||
{/* 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
|
||||
value={this.state.value}
|
||||
indicatorColor="primary"
|
||||
@ -85,4 +86,4 @@ class Tutorial extends Component {
|
||||
};
|
||||
}
|
||||
|
||||
export default Tutorial;
|
||||
export default withWidth()(Tutorial);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user