ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-01-03 18:35:09 +01:00
Code Issues Releases Wiki Activity

add flowtype functionality for piece list

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-22 17:20:40 +02:00
parent 370a3b43dd
commit c2d76034af
2 changed files with 55 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -14,13 +14,14 @@ import PieceListActions from '../../actions/piece_list_actions';
import PieceListStore from '../../stores/piece_list_store'; import PieceListStore from '../../stores/piece_list_store';
import WhitelabelStore from '../../stores/whitelabel_store'; import WhitelabelStore from '../../stores/whitelabel_store';
import WhitelabelActions from '../../actions/whitelabel_actions';
import EditionListActions from '../../actions/edition_list_actions'; import EditionListActions from '../../actions/edition_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import FlowType from '../react_flow_type/react_flow_type';
import AclProxy from '../acl_proxy'; import AclProxy from '../acl_proxy';
import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button'; import SubmitToPrizeButton from '../ascribe_buttons/submit_to_prize_button';
@ -94,7 +95,7 @@ let AccordionListItem = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
onPollingSuccess(pieceId, numEditions) { onPollingSuccess(pieceId) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
EditionListActions.toggleEditionList(pieceId); EditionListActions.toggleEditionList(pieceId);
@ -159,44 +160,47 @@ let AccordionListItem = React.createClass({
</Link> </Link>
</div> </div>
</div> </div>
<div <div className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header">
className="col-xs-8 col-sm-9 col-md-9 col-lg-9 col-md-offset-1 col-lg-offset-1 accordion-list-item-header"> <FlowType
<Link {...linkData}> minimum={350}
<h1 className="truncate">{this.props.content.title}</h1> maximum={500}>
</Link> <Link {...linkData}>
<h1>{this.props.content.title}</h1>
</Link>
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3> <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
<div> <div>
<span className="pull-left">{this.props.content.date_created.split('-')[0]}</span> <span className="pull-left">{this.props.content.date_created.split('-')[0]}</span>
<AclProxy <AclProxy
aclObject={this.props.content.acl} aclObject={this.props.content.acl}
aclName="acl_view_editions"> aclName="acl_view_editions">
<AccordionListItemEditionWidget <AccordionListItemEditionWidget
className="pull-right" className="pull-right"
piece={this.props.content} piece={this.props.content}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog} toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.onPollingSuccess}/> onPollingSuccess={this.onPollingSuccess}/>
</AclProxy> </AclProxy>
<AclProxy <AclProxy
show={this.props.content.prize === null}> show={this.props.content.prize === null}>
<SubmitToPrizeButton <SubmitToPrizeButton
className="pull-right" className="pull-right"
piece={this.props.content} piece={this.props.content}
handleSuccess={this.handleSubmitPrizeSuccess}/> handleSuccess={this.handleSubmitPrizeSuccess}/>
</AclProxy> </AclProxy>
<AclProxy <AclProxy
show={this.props.content.prize}> show={this.props.content.prize}>
<button <button
disabled disabled
className="btn btn-default btn-xs pull-right"> className="btn btn-default btn-xs pull-right">
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok" {getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok"
aria-hidden="true"></span> aria-hidden="true"></span>
</button> </button>
</AclProxy> </AclProxy>
{this.getLicences()} {this.getLicences()}
</div> </div>
</FlowType>
</div> </div>
<span style={{'clear': 'both'}}></span> <span style={{'clear': 'both'}}></span>

22
js/components/react_flow_type/react_flow_type.js
View File

@ -39,12 +39,13 @@ let FlowType = React.createClass({
return { return {
// 32 because that's the default font display size // 32 because that's the default font display size
// doesn't really matter though // doesn't really matter though
fontSize: 32 fontSize: 0
}; };
}, },
componentDidMount() { componentDidMount() {
// Make changes upon resize, calculate changes and rerender // Make changes upon resize, calculate changes and rerender
this.handleResize();
window.addEventListener('resize', this.handleResize); window.addEventListener('resize', this.handleResize);
}, },
@ -67,18 +68,23 @@ let FlowType = React.createClass({
renderChildren() { renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, { return ReactAddons.addons.cloneWithProps(child, {
style: { ref: 'flowTypeFontElement',
fontSize: this.state.fontSize
} });
});
}); });
}, },
render() { render() {
return ( return (
<span ref="flowTypeElement"> <div
{this.renderChildren()} ref="flowTypeElement"
</span> style={{
width: '100%',
height: '100%',
fontSize: this.state.fontSize
}}>
{this.props.children}
</div>
); );
} }
}); });