ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-29 00:58:03 +02: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 Router from 'react-router';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions';
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';
let Link = Router.Link;
let AccordionListItem = React.createClass({
propTypes: {
className: React.PropTypes.string,
@ -45,27 +46,44 @@ let AccordionListItem = React.createClass({
},
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 (
<div className="row">
<div className={this.props.className}>
<div className="wrapper">
<div className="col-xs-4 col-sm-3 col-md-2 col-lg-2 clear-paddings">
<div className="thumbnail-wrapper" onClick={this.handleClick}>
<img src={this.props.content.thumbnail} />
<div className="thumbnail-wrapper">
<Link {...linkData}>
<img src={this.props.content.thumbnail} />
</Link>
</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">
<OverlayTrigger delay={500} placement="left"
overlay={<Tooltip>{this.props.content.title}</Tooltip>}>
<h1 className="truncate" onClick={this.handleClick}>{this.props.content.title}</h1>
</OverlayTrigger>
<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>
<Link {...linkData}>
<h1 className="truncate">{this.props.content.title}</h1>
</Link>
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
<div>
<span>{this.props.content.date_created.split('-')[0]}, </span>
<AccordionListItemEditionWidget
piece={this.props.content} />
piece={this.props.content}/>
{/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
{getLangText('%s license', this.props.content.license_type.code)}
</a> */}
@ -77,6 +95,7 @@ let AccordionListItem = React.createClass({
</div>
</div>
</div>
{/* this.props.children is AccordionListItemTableEditions */}
{this.props.children}
</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 { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let AccordionListItemEditionWidget = React.createClass({
propTypes: {
@ -53,9 +52,16 @@ let AccordionListItemEditionWidget = React.createClass({
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) {
return (
<span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span>
);
if(typeof this.state.editionList[pieceId] === 'undefined') {
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 {
return (
<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 numEditions = piece.num_editions;
if(numEditions === 1) {
//let firstEditionId = piece && piece.firstEdition ? ', ' + piece.firstEdition.bitcoin_id : '';
if(numEditions === 0) {
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 : '';
return (

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

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

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 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
// piece are already defined. Otherwise .length will throw an error and we'll not
@ -113,7 +114,7 @@ let AccordionListItemTableEditions = React.createClass({
showExpandOption = true;
}
let transition = new TransitionModel('edition', 'editionId', 'bitcoin_id');
let transition = new TransitionModel('edition', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() );
let columnList = [
new ColumnModel(
@ -177,29 +178,27 @@ let AccordionListItemTableEditions = React.createClass({
)
];
let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
return (
<div className={this.props.className}>
{/* <AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable}
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>} /> */}
<AccordionListItemTable
parentId={this.props.parentId}
itemList={editionsForPiece}
columnList={columnList}
show={show}
orderBy={orderBy}
orderAsc={orderAsc}
changeOrder={this.changeEditionListOrder}
selectItem={this.selectItem}/>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions}
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>
);
if(show && editionsForPiece && editionsForPiece.length > 0) {
return (
<div className={this.props.className}>
<AccordionListItemTable
parentId={this.props.parentId}
itemList={editionsForPiece}
columnList={columnList}
show={show}
orderBy={orderBy}
orderAsc={orderAsc}
changeOrder={this.changeEditionListOrder}
selectItem={this.selectItem}/>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions}
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} />
</div>
);
} else {
return null;
}
}
});

4
js/components/piece_list.js
View File

@ -47,7 +47,10 @@ let PieceList = React.createClass({
},
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;
return () => PieceListActions.fetchPieceList(page, this.state.pageSize,
this.state.search, this.state.orderBy,
this.state.orderAsc);
@ -67,6 +70,7 @@ let PieceList = React.createClass({
let currentPage = parseInt(this.props.query.page, 10) || 1;
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
return (
<div>
<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 {
padding-top: 30%;
padding-bottom: 30%;