remove piece list edition table toggle and put it inside of accordion list item

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -7,22 +7,26 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
 
+import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
+
 import requests from '../../utils/requests';
 
 import { getLangText } from '../../utils/lang_utils';
 
 let AccordionListItem = React.createClass({
-    mixins: [Router.Navigation],
-
     propTypes: {
         className: React.PropTypes.string,
         content: React.PropTypes.object,
         children: React.PropTypes.object
     },
+
+    mixins: [Router.Navigation],
+
     handleClick(){
         requests.get('piece_first_edition_id', {'piece_id': this.props.content.id})
             .then((res) => this.transitionTo('edition', {editionId: res.bitcoin_id}));
     },
+
     getGlyphicon(){
         if (this.props.content.requestAction){
             return (
@@ -33,7 +37,9 @@ let AccordionListItem = React.createClass({
         }
         return null;
     },
+
     render() {
+
         return (
             <div className="row">
                 <div className={this.props.className}>
@@ -51,9 +57,12 @@ let AccordionListItem = React.createClass({
                             <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} />
                                 {/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
                                     {getLangText('%s license', this.props.content.license_type.code)}
                                 </a> */}
+
                             </div>
                         </div>
                         <span style={{'clear': 'both'}}></span>

js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js

@@ -0,0 +1,69 @@
+'use strict';
+
+import React from 'react';
+
+import EditionListActions from '../../actions/edition_list_actions';
+import EditionListStore from '../../stores/edition_list_store';
+
+import { getLangText } from '../../utils/lang_utils';
+
+let AccordionListItemEditionWidget = React.createClass({
+    propTypes: {
+        piece: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return EditionListStore.getState();
+    },
+
+    componentDidMount() {
+        EditionListStore.listen(this.onChange);
+    },
+
+    componentWillUnmount() {
+        EditionListStore.unlisten(this.onChange);
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    toggleTable() {
+        let pieceId = this.props.piece.id;
+        let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
+        
+        if(isEditionListOpen) {
+            EditionListActions.toggleEditionList(pieceId);
+        } else {
+            EditionListActions.toggleEditionList(pieceId);
+            EditionListActions.fetchEditionList(pieceId);
+        }
+    },
+
+    getGlyphicon() {
+        let pieceId = this.props.piece.id;
+        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>
+            );
+        } else {
+            return (
+                <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span>
+            );
+        }
+    },
+
+    render() {
+        return (
+            <span
+                onClick={this.toggleTable}
+                className="ascribe-accordion-list-item-edition-widget pull-right">
+                 {this.getGlyphicon()} {this.props.piece.num_editions + ' ' + getLangText('Editions')}
+            </span>
+        );
+    }
+});
+
+export default AccordionListItemEditionWidget;

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -69,16 +69,6 @@ let AccordionListItemTableEditions = React.createClass({
         return selectedEditions;
     },
 
-    toggleTable() {
-        let isEditionListOpen = this.state.isEditionListOpenForPieceId[this.props.parentId] ? this.state.isEditionListOpenForPieceId[this.props.parentId].show : false;
-        if(isEditionListOpen) {
-            EditionListActions.toggleEditionList(this.props.parentId);
-        } else {
-            EditionListActions.toggleEditionList(this.props.parentId);
-            EditionListActions.fetchEditionList(this.props.parentId);
-        }
-    },
-
     loadFurtherEditions() {
         // trigger loading animation
         this.setState({
@@ -187,14 +177,14 @@ let AccordionListItemTableEditions = React.createClass({
             )
         ];
 
-        let loadingSpinner =  <span className="glyph-ascribe-spool-chunked ascribe-color spin"/> ;
+        let loadingSpinner = <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>;
 
         return (
             <div className={this.props.className}>
-                <AccordionListItemTableToggle
+                {/* <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>} />
+                    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}

js/components/ascribe_forms/form_login.js

@@ -9,7 +9,7 @@ import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
 
 import SignupModal from '../ascribe_modal/modal_signup';
 import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let LoginForm = React.createClass({
     mixins: [FormMixin],

js/components/piece_list.js

@@ -85,21 +85,14 @@ let PieceList = React.createClass({
                     pageSize={this.state.pageSize}
                     loadingElement={loadingElement}>
                     {this.state.pieceList.map((piece, i) => {
-
-                        let editionsTableForPiece;
-
-                        if(piece.num_editions !== 1) {
-                            editionsTableForPiece = <AccordionListItemTableEditions
-                                                        className="ascribe-accordion-list-item-table col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-3 col-lg-offset-3"
-                                                        parentId={piece.id} />;
-                        }
-
                         return (
                             <AccordionListItem
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
                                 content={piece}
                                 key={i}>
-                                    {editionsTableForPiece}
+                                    <AccordionListItemTableEditions
+                                        className="ascribe-accordion-list-item-table col-xs-12 col-sm-8 col-md-6 col-lg-6 col-sm-offset-2 col-md-offset-3 col-lg-offset-3"
+                                        parentId={piece.id} />
                             </AccordionListItem>
                         );
                     })}

js/constants/languages.js

@@ -204,7 +204,8 @@ const languages = {
         'Have someone else sell the artwork': 'Have someone else sell the artwork',
         'Loan History': 'Loan History',
         'Title': 'Title',
-        'Specify editions': 'Specify editions'
+        'Specify editions': 'Specify editions',
+        'Editions': 'Editions',
     },
     'de': {
         'ID': 'ID',
@@ -409,7 +410,8 @@ const languages = {
         'Have someone else sell the artwork': 'Have someone else sell the artwork',
         'Loan History': 'Loan History',
         'Title': 'Titel',
-        'Specify editions': 'Specify editions'
+        'Specify editions': 'Specify editions',
+        'Editions': 'Editions',
     },
     'fr': {
         'ID': 'ID',
@@ -614,7 +616,8 @@ const languages = {
         'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre',
         'Loan History': 'Historique de Prêts',
         'Title': 'Title',
-        'Specify editions': 'Specify editions'
+        'Specify editions': 'Specify editions',
+        'Editions': 'Editions',
     }
 };
 

sass/ascribe_accordion_list.scss

@@ -139,4 +139,12 @@ span.ascribe-accordion-list-table-toggle {
     color: #666;
     font-size: 1.2em;
     padding: 0.3em;
+}
+
+.ascribe-accordion-list-item-edition-widget {
+    cursor: pointer;
+
+    &:hover {
+        color: $ascribe-color-full;
+    }
 }