mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
remove piece list edition table toggle and put it inside of accordion list item
This commit is contained in:
parent
d514a553f2
commit
773cab6505
@ -7,22 +7,26 @@ import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
|||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||||
|
|
||||||
|
import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
|
||||||
|
|
||||||
import requests from '../../utils/requests';
|
import requests from '../../utils/requests';
|
||||||
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let AccordionListItem = React.createClass({
|
let AccordionListItem = React.createClass({
|
||||||
mixins: [Router.Navigation],
|
|
||||||
|
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
content: React.PropTypes.object,
|
content: React.PropTypes.object,
|
||||||
children: React.PropTypes.object
|
children: React.PropTypes.object
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mixins: [Router.Navigation],
|
||||||
|
|
||||||
handleClick(){
|
handleClick(){
|
||||||
requests.get('piece_first_edition_id', {'piece_id': this.props.content.id})
|
requests.get('piece_first_edition_id', {'piece_id': this.props.content.id})
|
||||||
.then((res) => this.transitionTo('edition', {editionId: res.bitcoin_id}));
|
.then((res) => this.transitionTo('edition', {editionId: res.bitcoin_id}));
|
||||||
},
|
},
|
||||||
|
|
||||||
getGlyphicon(){
|
getGlyphicon(){
|
||||||
if (this.props.content.requestAction){
|
if (this.props.content.requestAction){
|
||||||
return (
|
return (
|
||||||
@ -33,7 +37,9 @@ let AccordionListItem = React.createClass({
|
|||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={this.props.className}>
|
<div className={this.props.className}>
|
||||||
@ -51,9 +57,12 @@ let AccordionListItem = React.createClass({
|
|||||||
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
|
<h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
|
||||||
<div>
|
<div>
|
||||||
<span>{this.props.content.date_created.split('-')[0]}</span>
|
<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">
|
{/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
|
||||||
{getLangText('%s license', this.props.content.license_type.code)}
|
{getLangText('%s license', this.props.content.license_type.code)}
|
||||||
</a> */}
|
</a> */}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<span style={{'clear': 'both'}}></span>
|
<span style={{'clear': 'both'}}></span>
|
||||||
|
@ -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;
|
@ -69,16 +69,6 @@ let AccordionListItemTableEditions = React.createClass({
|
|||||||
return selectedEditions;
|
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() {
|
loadFurtherEditions() {
|
||||||
// trigger loading animation
|
// trigger loading animation
|
||||||
this.setState({
|
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 (
|
return (
|
||||||
<div className={this.props.className}>
|
<div className={this.props.className}>
|
||||||
<AccordionListItemTableToggle
|
{/* <AccordionListItemTableToggle
|
||||||
className="ascribe-accordion-list-table-toggle"
|
className="ascribe-accordion-list-table-toggle"
|
||||||
onClick={this.toggleTable}
|
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
|
<AccordionListItemTable
|
||||||
parentId={this.props.parentId}
|
parentId={this.props.parentId}
|
||||||
itemList={editionsForPiece}
|
itemList={editionsForPiece}
|
||||||
|
@ -9,7 +9,7 @@ import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
|
|||||||
|
|
||||||
import SignupModal from '../ascribe_modal/modal_signup';
|
import SignupModal from '../ascribe_modal/modal_signup';
|
||||||
import PasswordResetRequestModal from '../ascribe_modal/modal_password_request_reset';
|
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({
|
let LoginForm = React.createClass({
|
||||||
mixins: [FormMixin],
|
mixins: [FormMixin],
|
||||||
|
@ -85,21 +85,14 @@ let PieceList = React.createClass({
|
|||||||
pageSize={this.state.pageSize}
|
pageSize={this.state.pageSize}
|
||||||
loadingElement={loadingElement}>
|
loadingElement={loadingElement}>
|
||||||
{this.state.pieceList.map((piece, i) => {
|
{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 (
|
return (
|
||||||
<AccordionListItem
|
<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"
|
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}
|
content={piece}
|
||||||
key={i}>
|
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>
|
</AccordionListItem>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
@ -204,7 +204,8 @@ const languages = {
|
|||||||
'Have someone else sell the artwork': 'Have someone else sell the artwork',
|
'Have someone else sell the artwork': 'Have someone else sell the artwork',
|
||||||
'Loan History': 'Loan History',
|
'Loan History': 'Loan History',
|
||||||
'Title': 'Title',
|
'Title': 'Title',
|
||||||
'Specify editions': 'Specify editions'
|
'Specify editions': 'Specify editions',
|
||||||
|
'Editions': 'Editions',
|
||||||
},
|
},
|
||||||
'de': {
|
'de': {
|
||||||
'ID': 'ID',
|
'ID': 'ID',
|
||||||
@ -409,7 +410,8 @@ const languages = {
|
|||||||
'Have someone else sell the artwork': 'Have someone else sell the artwork',
|
'Have someone else sell the artwork': 'Have someone else sell the artwork',
|
||||||
'Loan History': 'Loan History',
|
'Loan History': 'Loan History',
|
||||||
'Title': 'Titel',
|
'Title': 'Titel',
|
||||||
'Specify editions': 'Specify editions'
|
'Specify editions': 'Specify editions',
|
||||||
|
'Editions': 'Editions',
|
||||||
},
|
},
|
||||||
'fr': {
|
'fr': {
|
||||||
'ID': 'ID',
|
'ID': 'ID',
|
||||||
@ -614,7 +616,8 @@ const languages = {
|
|||||||
'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre',
|
'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre',
|
||||||
'Loan History': 'Historique de Prêts',
|
'Loan History': 'Historique de Prêts',
|
||||||
'Title': 'Title',
|
'Title': 'Title',
|
||||||
'Specify editions': 'Specify editions'
|
'Specify editions': 'Specify editions',
|
||||||
|
'Editions': 'Editions',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -140,3 +140,11 @@ span.ascribe-accordion-list-table-toggle {
|
|||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
padding: 0.3em;
|
padding: 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ascribe-accordion-list-item-edition-widget {
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $ascribe-color-full;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user