ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

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

This commit is contained in:
Tim Daubenschütz 2015-07-09 14:04:48 +02:00
parent d514a553f2
commit 773cab6505
7 changed files with 101 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

69
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js Normal file
View File

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

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

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

2
js/components/ascribe_forms/form_login.js
View File

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

13
js/components/piece_list.js
View File

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

9
js/constants/languages.js
View File

@ -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',
}
};

8
sass/ascribe_accordion_list.scss
View File

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