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:
parent
215f251845
commit
689796b115
@ -12,11 +12,25 @@ let Navigation = Router.Navigation;
|
|||||||
let SlidesContainer = React.createClass({
|
let SlidesContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
children: React.PropTypes.arrayOf(React.PropTypes.element),
|
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],
|
mixins: [State, Navigation],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
glyphiconClassNames: {
|
||||||
|
pending: 'glyphicon glyphicon-chevron-right',
|
||||||
|
complete: 'glyphicon glyphicon-lock'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
// handle queryParameters
|
// handle queryParameters
|
||||||
let queryParams = this.getQuery();
|
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="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">
|
<div className="no-margin row ascribe-breadcrumb-container">
|
||||||
{breadcrumbs.map((breadcrumb, i) => {
|
{breadcrumbs.map((breadcrumb, i) => {
|
||||||
|
|
||||||
|
let glyphiconClassName;
|
||||||
|
|
||||||
|
if(i >= this.state.slideNum) {
|
||||||
|
glyphiconClassName = this.props.glyphiconClassNames.pending;
|
||||||
|
} else {
|
||||||
|
glyphiconClassName = this.props.glyphiconClassNames.completed;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Col
|
<Col
|
||||||
className="no-padding"
|
className="no-padding"
|
||||||
@ -208,7 +231,7 @@ let SlidesContainer = React.createClass({
|
|||||||
<div className="ascribe-breadcrumb">
|
<div className="ascribe-breadcrumb">
|
||||||
<a className={this.state.slideNum === i ? 'active' : ''}>
|
<a className={this.state.slideNum === i ? 'active' : ''}>
|
||||||
{breadcrumb}
|
{breadcrumb}
|
||||||
<span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right glyphicon glyphicon-chevron-right'}>
|
<span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right ' + glyphiconClassName}>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -165,7 +165,11 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<SlidesContainer
|
<SlidesContainer
|
||||||
ref="slidesContainer"
|
ref="slidesContainer"
|
||||||
forwardProcess={true}>
|
forwardProcess={true}
|
||||||
|
glyphiconClassNames={{
|
||||||
|
pending: 'glyphicon glyphicon-chevron-right',
|
||||||
|
completed: 'glyphicon glyphicon-lock'
|
||||||
|
}}>
|
||||||
<div data-slide-title="Register work">
|
<div data-slide-title="Register work">
|
||||||
<Row className="no-margin">
|
<Row className="no-margin">
|
||||||
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
|
Loading…
Reference in New Issue
Block a user