ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 21:52:08 +02:00
Code Issues Releases Wiki Activity

add loading feedback to new edition toggle

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-07-09 17:01:08 +02:00
parent 0642185087
commit d051198676
4 changed files with 17 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -63,7 +63,7 @@ let AccordionListItem = React.createClass({
<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> */}

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

@ -53,9 +53,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>

5
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
@ -177,8 +178,6 @@ let AccordionListItemTableEditions = React.createClass({
)
];
let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
if(show && editionsForPiece && editionsForPiece.length > 0) {
return (
<div className={this.props.className}>
@ -194,7 +193,7 @@ let AccordionListItemTableEditions = React.createClass({
<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> : ''} />
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 {

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