From 689796b115579e29294c8555f66214f3462d3065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 19 Aug 2015 18:23:04 +0200
Subject: [PATCH] slidecontainer: display lock on progress

---
 .../slides_container.js                       | 27 +++++++++++++++++--
 .../cyland/cyland_register_piece.js           |  6 ++++-
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/js/components/ascribe_slides_container/slides_container.js b/js/components/ascribe_slides_container/slides_container.js
index 50b6eb82..3b0c493e 100644
--- a/js/components/ascribe_slides_container/slides_container.js
+++ b/js/components/ascribe_slides_container/slides_container.js
@@ -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>
diff --git a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
index 6e4abead..88a5c305 100644
--- a/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
+++ b/js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
@@ -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}>