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

Merge remote-tracking branch 'remotes/origin/AD-551-work-on-burn-down-list' into AD-419-decouple-piece-registration-from-

Browse Source 
Conflicts:
	js/components/ascribe_accordion_list/accordion_list_item.js
This commit is contained in:
diminator 2015-07-10 10:29:59 +02:00
commit 5855b163a8
6 changed files with 101 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,6 @@
import React from 'react'; import React from 'react';
import Router from 'react-router'; import Router from 'react-router';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions'; import PieceListActions from '../../actions/piece_list_actions';
import Glyphicon from 'react-bootstrap/lib/Glyphicon'; import Glyphicon from 'react-bootstrap/lib/Glyphicon';
@ -14,6 +13,8 @@ import AccordionListItemEditionWidget from './accordion_list_item_edition_widget
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
let Link = Router.Link;
let AccordionListItem = React.createClass({ let AccordionListItem = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string, className: React.PropTypes.string,
@ -45,27 +46,44 @@ let AccordionListItem = React.createClass({
}, },
render() { render() {
let linkData;
if(this.props.content.num_editions === 0) {
linkData = {
to: 'piece',
params: {
pieceId: this.props.content.id
}
};
} else {
linkData = {
to: 'edition',
params: {
editionId: this.props.content.firstEdition ? this.props.content.firstEdition.bitcoin_id : 0
}
};
}
return ( return (
<div className="row"> <div className="row">
<div className={this.props.className}> <div className={this.props.className}>
<div className="wrapper"> <div className="wrapper">
<div className="col-xs-4 col-sm-3 col-md-2 col-lg-2 clear-paddings"> <div className="col-xs-4 col-sm-3 col-md-2 col-lg-2 clear-paddings">
<div className="thumbnail-wrapper" onClick={this.handleClick}> <div className="thumbnail-wrapper">
<img src={this.props.content.thumbnail} /> <Link {...linkData}>
<img src={this.props.content.thumbnail} />
</Link>
</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"> <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">
<OverlayTrigger delay={500} placement="left" <Link {...linkData}>
overlay={<Tooltip>{this.props.content.title}</Tooltip>}> <h1 className="truncate">{this.props.content.title}</h1>
<h1 className="truncate" onClick={this.handleClick}>{this.props.content.title}</h1> </Link>
</OverlayTrigger> <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
<h3 onClick={this.handleClick}>{getLangText('by %s', this.props.content.artist_name)}</h3>
<div>
<span onClick={this.handleClick}>{this.props.content.date_created.split('-')[0]}</span>
</div>
<div> <div>
<span>{this.props.content.date_created.split('-')[0]}, </span>
<AccordionListItemEditionWidget <AccordionListItemEditionWidget
piece={this.props.content} /> piece={this.props.content}/>
{/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right"> {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
{getLangText('%s license', this.props.content.license_type.code)} {getLangText('%s license', this.props.content.license_type.code)}
</a> */} </a> */}
@ -77,6 +95,7 @@ let AccordionListItem = React.createClass({
</div> </div>
</div> </div>
</div> </div>
{/* this.props.children is AccordionListItemTableEditions */}
{this.props.children} {this.props.children}
</div> </div>
); );

25
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -6,7 +6,6 @@ import EditionListActions from '../../actions/edition_list_actions';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let AccordionListItemEditionWidget = React.createClass({ let AccordionListItemEditionWidget = React.createClass({
propTypes: { propTypes: {
@ -53,9 +52,16 @@ let AccordionListItemEditionWidget = React.createClass({
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) { if(isEditionListOpen) {
return ( if(typeof this.state.editionList[pieceId] === 'undefined') {
<span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span> return (
); <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>
);
} else {
return (
<span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span>
);
}
} else { } else {
return ( return (
<span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span> <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span>
@ -67,8 +73,15 @@ let AccordionListItemEditionWidget = React.createClass({
let piece = this.props.piece; let piece = this.props.piece;
let numEditions = piece.num_editions; let numEditions = piece.num_editions;
if(numEditions === 1) { if(numEditions === 0) {
//let firstEditionId = piece && piece.firstEdition ? ', ' + piece.firstEdition.bitcoin_id : ''; return (
<span
onClick={this.toggleTable}
className="ascribe-accordion-list-item-edition-widget">
Create editions
</span>
);
} else if(numEditions === 1) {
let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : ''; let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : '';
return ( return (

48
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -21,34 +21,26 @@ let AccordionListItemTable = React.createClass({
}, },
render() { render() {
if(this.props.show && this.props.itemList) { return (
return ( <Table
<Table responsive
responsive className="ascribe-table"
className="ascribe-table" columnList={this.props.columnList}
columnList={this.props.columnList} itemList={this.props.itemList}
itemList={this.props.itemList} changeOrder={this.props.changeOrder}
changeOrder={this.props.changeOrder} orderBy={this.props.orderBy}
orderBy={this.props.orderBy} orderAsc={this.props.orderAsc}>
orderAsc={this.props.orderAsc}> {this.props.itemList.map((item, i) => {
{this.props.itemList.map((item, i) => { return (
return ( <TableItemSelectable
<TableItemSelectable className="ascribe-table-item-selectable"
className="ascribe-table-item-selectable" key={i}
key={i} selectItem={this.props.selectItem}
selectItem={this.props.selectItem} parentId={this.props.parentId}/>
parentId={this.props.parentId}/> );
); })}
})} </Table>
</Table> );
);
} else {
return (
<div className={this.props.className}>
{this.props.children}
</div>
);
}
} }
}); });

47
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -92,6 +92,7 @@ let AccordionListItemTableEditions = React.createClass({
let showExpandOption = false; let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId]; let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
// here we need to check if all editions of a specific // here we need to check if all editions of a specific
// piece are already defined. Otherwise .length will throw an error and we'll not // piece are already defined. Otherwise .length will throw an error and we'll not
@ -113,7 +114,7 @@ let AccordionListItemTableEditions = React.createClass({
showExpandOption = true; showExpandOption = true;
} }
let transition = new TransitionModel('edition', 'editionId', 'bitcoin_id'); let transition = new TransitionModel('edition', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() );
let columnList = [ let columnList = [
new ColumnModel( new ColumnModel(
@ -177,29 +178,27 @@ let AccordionListItemTableEditions = React.createClass({
) )
]; ];
let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>; if(show && editionsForPiece && editionsForPiece.length > 0) {
return (
return ( <div className={this.props.className}>
<div className={this.props.className}> <AccordionListItemTable
{/* <AccordionListItemTableToggle parentId={this.props.parentId}
className="ascribe-accordion-list-table-toggle" itemList={editionsForPiece}
onClick={this.toggleTable} columnList={columnList}
message={show && typeof editionsForPiece !== 'undefined' ? <span><span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span> {getLangText('Hide editions')}</span> : <span><span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span> {getLangText('Show editions')} {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}</span>} /> */} show={show}
<AccordionListItemTable orderBy={orderBy}
parentId={this.props.parentId} orderAsc={orderAsc}
itemList={editionsForPiece} changeOrder={this.changeEditionListOrder}
columnList={columnList} selectItem={this.selectItem}/>
show={show} <AccordionListItemTableToggle
orderBy={orderBy} className="ascribe-accordion-list-table-toggle"
orderAsc={orderAsc} onClick={this.loadFurtherEditions}
changeOrder={this.changeEditionListOrder} message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} />
selectItem={this.selectItem}/> </div>
<AccordionListItemTableToggle );
className="ascribe-accordion-list-table-toggle" } else {
onClick={this.loadFurtherEditions} return null;
message={show && showExpandOption ? <span><span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}}></span> Show me more {this.state.showMoreLoading ? loadingSpinner : null}</span> : ''} /> }
</div>
);
} }
}); });

4
js/components/piece_list.js
View File

@ -47,7 +47,10 @@ let PieceList = React.createClass({
}, },
paginationGoToPage(page) { paginationGoToPage(page) {
// if the users clicks a pager of the pagination,
// the site should go to the top
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
return () => PieceListActions.fetchPieceList(page, this.state.pageSize, return () => PieceListActions.fetchPieceList(page, this.state.pageSize,
this.state.search, this.state.orderBy, this.state.search, this.state.orderBy,
this.state.orderAsc); this.state.orderAsc);
@ -67,6 +70,7 @@ let PieceList = React.createClass({
let currentPage = parseInt(this.props.query.page, 10) || 1; let currentPage = parseInt(this.props.query.page, 10) || 1;
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize); let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />); let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
return ( return (
<div> <div>
<PieceListToolbar <PieceListToolbar

4
sass/ascribe_accordion_list.scss
View File

@ -59,6 +59,10 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
} }
} }
.accordion-list-item-header > a {
text-decoration: none;
}
.ascribe-accordion-list-loading { .ascribe-accordion-list-loading {
padding-top: 30%; padding-top: 30%;
padding-bottom: 30%; padding-bottom: 30%;