slide breadcrumbs

js/components/ascribe_slides_container/slides_container.js

@@ -4,11 +4,14 @@ import React from 'react';
 import Router from 'react-router';
 import ReactAddons from 'react/addons';
 
+import Col from 'react-bootstrap/lib/Col';
+
 let State = Router.State;
 let Navigation = Router.Navigation;
 
 let SlidesContainer = React.createClass({
     propTypes: {
+        breadcrumbs: React.PropTypes.arrayOf(React.PropTypes.string),
         children: React.PropTypes.arrayOf(React.PropTypes.element),
         forwardProcess: React.PropTypes.bool.isRequired
     },
@@ -132,6 +135,35 @@ let SlidesContainer = React.createClass({
         }
     },
 
+    renderBreadCrumbs() {
+        if (this.props.breadcrumbs) {
+            let numSlides = this.props.breadcrumbs.length;
+            let columnWidth = Math.floor(12 / numSlides);
+            return (
+                <div className="row" style={{width: this.state.containerWidth}}>
+                    <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">
+                            {this.props.breadcrumbs.map((breadcrumb, i) => {
+                                return (
+                                    <Col className="no-padding" sm={columnWidth}>
+                                        <div className="ascribe-breadcrumb">
+                                            <a className={this.state.slideNum === i ? 'active' : ''}>
+                                                {i + 1}. {this.props.breadcrumbs[i]}
+                                            <span className={i === numSlides - 1 ? 'invisible' : '' + 'pull-right glyphicon glyphicon-chevron-right'}>
+                                            </span>
+                                            </a>
+                                        </div>
+                                    </Col>
+                                );
+                            })}
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+        return null;
+    },
+
     // Since we need to give the slides a width, we need to call ReactAddons.addons.cloneWithProps
     // Also, a key is nice to have!
     renderChildren() {
@@ -151,6 +183,7 @@ let SlidesContainer = React.createClass({
             <div
                 className="container ascribe-sliding-container-wrapper"
                 ref="containerWrapper">
+                {this.renderBreadCrumbs()}
                 <div
                     className="container ascribe-sliding-container"
                     style={{

js/components/whitelabel/wallet/components/ascribe_forms/cyland_additional_data_form.js

@@ -80,14 +80,6 @@ let CylandAdditionalDataForm = React.createClass({
                     <div className="ascribe-form-header">
                         <h3>Provide supporting materials</h3>
                     </div>
-                    <FurtherDetailsFileuploader
-                        submitKey={this.submitKey}
-                        setIsUploadReady={this.setIsUploadReady}
-                        isReadyForFormSubmission={this.isReadyForFormSubmission}
-                        editable={true}
-                        pieceId={this.props.piece.id}
-                        otherData={this.props.piece.other_data}
-                        multiple={false}/>
                     <Property
                         name='artist_bio'
                         label={getLangText('Artist Biography')}
@@ -108,6 +100,14 @@ let CylandAdditionalDataForm = React.createClass({
                             placeholder={getLangText('Enter a conceptual overview...')}
                             required="required"/>
                     </Property>
+                    <FurtherDetailsFileuploader
+                        submitKey={this.submitKey}
+                        setIsUploadReady={this.setIsUploadReady}
+                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                        editable={true}
+                        pieceId={this.props.piece.id}
+                        otherData={this.props.piece.other_data}
+                        multiple={false}/>
                 </Form>
             );
         } else {

js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js

@@ -102,6 +102,13 @@ let CylandRegisterPiece = React.createClass({
         this.refs.slidesContainer.setSlideNum(2);
     },
 
+    handleLoanSuccess(response) {
+        let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
+        GlobalNotificationActions.appendGlobalNotification(notification);
+
+        this.transitionTo('piece', {pieceId: this.state.piece.id});
+    },
+
     changeSlide() {
         // only transition to the login store, if user is not logged in
         // ergo the currentUser object is not properly defined
@@ -124,6 +131,7 @@ let CylandRegisterPiece = React.createClass({
         return (
             <SlidesContainer
                 ref="slidesContainer"
+                breadcrumbs={['Register work', 'Additional Details', 'Loan']}
                 forwardProcess={true}>
                 <div>
                     <Row className="no-margin">
@@ -173,7 +181,8 @@ let CylandRegisterPiece = React.createClass({
                                 gallery="Cyland Archive"
                                 startdate={today}
                                 enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
-                                showPersonalMessage={false}/>
+                                showPersonalMessage={false}
+                                handleSuccess={this.handleLoanSuccess}/>
                         </Col>
                     </Row>
                 </div>

sass/ascribe_slides_container.scss

@@ -16,3 +16,29 @@
     min-height: 1px;
     float:left;
 }
+
+.ascribe-breadcrumb-container{
+    div:last-child {
+        .ascribe-breadcrumb {
+            border-right: 1px solid #EEE;
+        }
+    }
+}
+
+.ascribe-breadcrumb {
+    padding: 1em;
+    border: 1px solid #EEE;
+    border-right: 1px solid rgba(0, 0, 0, 0);
+    margin-bottom: 0.6em;
+
+    .active {
+        color: #666;
+    }
+    a {
+        color: #DDD;
+        text-decoration: none;
+        font-size: 1.1em;
+        font-style: italic;
+    }
+}
+