1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

slidecontainer: display lock on progress

This commit is contained in:
Tim Daubenschütz 2015-08-19 18:23:04 +02:00
parent 215f251845
commit 689796b115
2 changed files with 30 additions and 3 deletions

View File

@ -12,11 +12,25 @@ let Navigation = Router.Navigation;
let SlidesContainer = React.createClass({
propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element),
forwardProcess: React.PropTypes.bool.isRequired
forwardProcess: React.PropTypes.bool.isRequired,
glyphiconClassNames: React.PropTypes.shape({
pending: React.PropTypes.string,
complete: React.PropTypes.string
})
},
mixins: [State, Navigation],
getDefaultProps() {
return {
glyphiconClassNames: {
pending: 'glyphicon glyphicon-chevron-right',
complete: 'glyphicon glyphicon-lock'
}
};
},
getInitialState() {
// handle queryParameters
let queryParams = this.getQuery();
@ -200,6 +214,15 @@ let SlidesContainer = React.createClass({
<div className="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 col-xs-12">
<div className="no-margin row ascribe-breadcrumb-container">
{breadcrumbs.map((breadcrumb, i) => {
let glyphiconClassName;
if(i >= this.state.slideNum) {
glyphiconClassName = this.props.glyphiconClassNames.pending;
} else {
glyphiconClassName = this.props.glyphiconClassNames.completed;
}
return (
<Col
className="no-padding"
@ -208,7 +231,7 @@ let SlidesContainer = React.createClass({
<div className="ascribe-breadcrumb">
<a className={this.state.slideNum === i ? 'active' : ''}>
{breadcrumb}
<span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right glyphicon glyphicon-chevron-right'}>
<span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right ' + glyphiconClassName}>
</span>
</a>
</div>

View File

@ -165,7 +165,11 @@ let CylandRegisterPiece = React.createClass({
return (
<SlidesContainer
ref="slidesContainer"
forwardProcess={true}>
forwardProcess={true}
glyphiconClassNames={{
pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock'
}}>
<div data-slide-title="Register work">
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>