ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

slide breadcrumbs

Browse Source
This commit is contained in:
diminator 2015-08-17 12:18:40 +02:00
parent 12dde0458c
commit cf86e352e4
4 changed files with 81 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
js/components/ascribe_slides_container/slides_container.js
View File

@ -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,15 +183,16 @@ let SlidesContainer = React.createClass({
<div
className="container ascribe-sliding-container-wrapper"
ref="containerWrapper">
{this.renderBreadCrumbs()}
<div
className="container ascribe-sliding-container"
style={{
width: this.state.containerWidth * React.Children.count(this.props.children),
transform: 'translateX(' + (-1) * this.state.containerWidth * this.state.slideNum + 'px)'
}}>
<div className="row">
{this.renderChildren()}
</div>
<div className="row">
{this.renderChildren()}
</div>
</div>
</div>
);

16
js/components/whitelabel/wallet/components/ascribe_forms/cyland_additional_data_form.js
View File

@ -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 {

11
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -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>

28
sass/ascribe_slides_container.scss
View File

@ -15,4 +15,30 @@
position: relative;
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;
}
}