ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

implement toggle functionality

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-01 13:18:24 +02:00
parent ade6ab7f26
commit f653564b51
6 changed files with 47 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
js/components/ascribe_accordion_list/accordion_list_item_table.js
View File

@ -17,7 +17,8 @@ let AccordionListItemTable = React.createClass({
parentId: React.PropTypes.number,
fetchData: React.PropTypes.func,
itemList: React.PropTypes.array,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel))
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
numOfTableItems: React.PropTypes.number
},
toggleTable() {
@ -45,7 +46,9 @@ let AccordionListItemTable = React.createClass({
</Table>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable} />
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
</div>
);
} else {
@ -53,7 +56,9 @@ let AccordionListItemTable = React.createClass({
<div className={this.props.className}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable} />
onClick={this.toggleTable}
show={this.state.show}
numOfTableItems={this.props.numOfTableItems} />
</div>
);
}
@ -63,14 +68,18 @@ let AccordionListItemTable = React.createClass({
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func
onClick: React.PropTypes.func,
show: React.PropTypes.bool,
numOfTableItems: React.PropTypes.number
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>Show all X Editions</span>
onClick={this.props.onClick}>
{this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
</span>
);
}
});

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

@ -9,13 +9,14 @@ import TableColumnContentModel from '../../models/table_column_content_model';
import TableItemImg from '../ascribe_table/table_item_img';
import TableItemText from '../ascribe_table/table_item_text';
import TableItemAcl from '../ascribe_table/table_item_acl';
import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
let AccordionListItemTableEditions = React.createClass({
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number
parentId: React.PropTypes.number,
numOfEditions: React.PropTypes.number
},
getInitialState() {
@ -42,8 +43,8 @@ let AccordionListItemTableEditions = React.createClass({
let columnList = [
new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, false),
new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, false)
new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false)
];
return (
@ -52,8 +53,8 @@ let AccordionListItemTableEditions = React.createClass({
parentId={this.props.parentId}
fetchData={this.getEditionList}
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}>
</AccordionListItemTable>
columnList={columnList}
numOfTableItems={this.props.numOfEditions} />
);
}
});

2
js/components/ascribe_table/table.js
View File

@ -9,7 +9,7 @@ let Table = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
changeOrder: React.PropTypes.func // turn isRequired on again after editions order implemented
changeOrder: React.PropTypes.func
},
renderChildren() {

22
js/components/ascribe_table/table_item_acl_filtered.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
let TableItemAclFiltered = React.createClass({
propTypes: {
content: React.PropTypes.array.isRequired
},
render() {
let filteredAcls = this.props.content.filter((v) => {
return v === 'consign' || v === 'loan' || v === 'transfer' || v === 'view';
});
return (
<span>
{filteredAcls.join('/')}
</span>
);
}
});
export default TableItemAclFiltered;

5
js/components/piece_list.js
View File

@ -54,13 +54,13 @@ let PieceList = React.createClass({
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}
itemList={this.state.pieceList}
itemListCount={this.state.pieceListCount}
orderBy={this.state.orderBy}
orderAsc={this.state.orderAsc}
search={this.state.search}
page={this.state.page}
pageSize={this.state.pageSize}>
{this.state.pieceList.map((item, i) => {
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"
@ -68,7 +68,8 @@ let PieceList = React.createClass({
key={i}>
<AccordionListItemTableEditions
className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
parentId={item.id} />
parentId={item.id}
numOfEditions={item.num_editions}/>
</AccordionListItem>
);
})}

1
sass/main.scss
View File

@ -44,7 +44,6 @@
font-family: 'Source Sans Pro';
font-weight: 600;
color: #424242;
font-size: 1.2em;
}
.ascribe-table-header-column > span > .glyphicon {