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

Conflicts:
	js/components/ascribe_accordion_list/accordion_list_item.js

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -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}>
+                            <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>
         );

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -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) {
+            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 (

js/components/ascribe_accordion_list/accordion_list_item_table.js

@@ -21,7 +21,6 @@ let AccordionListItemTable = React.createClass({
     },
 
     render() {
-        if(this.props.show && this.props.itemList) {
         return (
             <Table
                 responsive
@@ -42,13 +41,6 @@ let AccordionListItemTable = React.createClass({
                 })}
             </Table>
         );
-        } else {
-            return (
-                <div className={this.props.className}>
-                    {this.props.children}
-                </div>
-            );
-        }
     }
 });
 

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -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,14 +178,9 @@ 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}>
-                {/* <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}
@@ -197,9 +193,12 @@ 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 {
+            return null;
+        }
     }
 });
 

js/components/piece_list.js

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

sass/ascribe_accordion_list.scss

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