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

integrate table component into accordion list

This commit is contained in:
Tim Daubenschütz 2015-06-01 11:51:03 +02:00
parent ed66c4150e
commit ade6ab7f26
20 changed files with 232 additions and 436 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,8 @@
import React from 'react';
import AccordionListItemTable from './accordion_list_item_table';
let AccordionListItem = React.createClass({
propTypes: {
className: React.PropTypes.string,
@ -8,17 +11,21 @@ let AccordionListItem = React.createClass({
render() {
return (
<div className={this.props.className}>
<div className="wrapper">
<div className="thumbnail-wrapper">
<img src={this.props.content.thumbnail} />
</div>
<div className="info-wrapper">
<h1>{this.props.content.title}</h1>
<h3>by {this.props.content.artist_name}</h3>
<div className="row">
<div className={this.props.className}>
<div className="wrapper">
<div className="thumbnail-wrapper">
<img src={this.props.content.thumbnail} />
</div>
<div className="info-wrapper">
<h1>{this.props.content.title}</h1>
<h3>by {this.props.content.artist_name}</h3>
</div>
<span style={{'clear': 'both'}}></span>
</div>
</div>
</div>
{this.props.children}
</div>
);
}
});

78
js/components/ascribe_accordion_list/accordion_list_item_table.js Normal file
View File

@ -0,0 +1,78 @@
import React from 'react';
import Table from '../ascribe_table/table';
import TableItemSelectable from '../ascribe_table/table_item_selectable';
import TableColumnContentModel from '../../models/table_column_content_model';
let AccordionListItemTable = React.createClass({
getInitialState() {
return {
'show': false
};
},
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number,
fetchData: React.PropTypes.func,
itemList: React.PropTypes.array,
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel))
},
toggleTable() {
this.props.fetchData();
this.setState({
'show': !this.state.show
});
},
render() {
if(this.props.itemList && this.state.show) {
return (
<div className={this.props.className}>
<Table
columnList={this.props.columnList}
itemList={this.props.itemList}>
{this.props.itemList.map((item, i) => {
return (
<TableItemSelectable
className="ascribe-table-item-selectable"
key={i}>
</TableItemSelectable>
);
})}
</Table>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable} />
</div>
);
} else {
return (
<div className={this.props.className}>
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
onClick={this.toggleTable} />
</div>
);
}
}
});
let AccordionListItemTableToggle = React.createClass({
propTypes: {
className: React.PropTypes.string,
onClick: React.PropTypes.func
},
render() {
return (
<span
className={this.props.className}
onClick={this.props.onClick}>Show all X Editions</span>
);
}
});
export default AccordionListItemTable;

61
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js Normal file
View File

@ -0,0 +1,61 @@
import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import AccordionListItemTable from './accordion_list_item_table';
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';
let AccordionListItemTableEditions = React.createClass({
propTypes: {
className: React.PropTypes.string,
parentId: React.PropTypes.number
},
getInitialState() {
return EditionListStore.getState();
},
onChange(state) {
this.setState(state);
},
componentDidMount() {
EditionListStore.listen(this.onChange);
},
componentDidUnmount() {
EditionListStore.unlisten(this.onChange);
},
getEditionList() {
EditionListActions.fetchEditionList(this.props.parentId);
},
render() {
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)
];
return (
<AccordionListItemTable
className={this.props.className}
parentId={this.props.parentId}
fetchData={this.getEditionList}
itemList={this.state.editionList[this.props.parentId]}
columnList={columnList}>
</AccordionListItemTable>
);
}
});
export default AccordionListItemTableEditions;

50
js/components/ascribe_accordion_list/table_header.js
View File

@ -1,50 +0,0 @@
import React from 'react';
import TableColumnMixin from '../../mixins/table_column_mixin';
import GeneralUtils from '../../utils/general_utils';
import TableHeaderItem from './table_header_item';
import TableColumnContentModel from '../../models/table_column_content_model';
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
itemList: React.PropTypes.array.isRequired,
changeOrder: React.PropTypes.func,
orderAsc: React.PropTypes.bool,
orderBy: React.PropTypes.string
},
render() {
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
<div className="row">
{this.props.columnList.map((val, i) => {
let columnClasses = this.calcColumnClasses(this.props.columnList, i, 12);
let columnName = this.props.columnList[i].columnName;
let canBeOrdered = this.props.columnList[i].canBeOrdered;
return (
<TableHeaderItem
key={i}
columnClasses={columnClasses}
displayName={val.displayName}
columnName={columnName}
canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy}
changeOrder={this.props.changeOrder}>
</TableHeaderItem>
);
})}
</div>
</div>
);
}
});
export default TableHeader;

52
js/components/ascribe_accordion_list/table_header_item.js
View File

@ -1,52 +0,0 @@
import React from 'react';
import TableHeaderItemCarret from './table_header_item_carret';
let TableHeaderItem = React.createClass({
propTypes: {
columnClasses: React.PropTypes.string.isRequired,
displayName: React.PropTypes.string.isRequired,
columnName: React.PropTypes.string.isRequired,
canBeOrdered: React.PropTypes.bool,
changeOrder: React.PropTypes.func,
orderAsc: React.PropTypes.bool,
orderBy: React.PropTypes.string
},
changeOrder() {
this.props.changeOrder(this.props.columnName, !this.props.orderAsc);
},
render() {
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) {
if(this.props.columnName === this.props.orderBy) {
return (
<div
className={this.props.columnClasses + ' ascribe-table-header-column'}
onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span>
</div>
);
} else {
return (
<div
className={this.props.columnClasses + ' ascribe-table-header-column'}
onClick={this.changeOrder}>
<span>{this.props.displayName}</span>
</div>
);
}
} else {
return (
<div className={this.props.columnClasses + ' ascribe-table-header-column'}>
<span>
{this.props.displayName}
</span>
</div>
);
}
}
});
export default TableHeaderItem;

24
js/components/ascribe_accordion_list/table_header_item_carret.js
View File

@ -1,24 +0,0 @@
import React from 'react';
let TableHeaderItemCarret = React.createClass({
propTypes: {
orderAsc: React.PropTypes.bool.isRequired
},
render() {
let carretDirection = 'glyphicon-triangle-';
if(this.props.orderAsc) {
carretDirection += 'bottom';
} else {
carretDirection += 'top';
}
return (
<span className={'glyphicon ' + carretDirection}>
</span>
);
}
});
export default TableHeaderItemCarret;

18
js/components/ascribe_accordion_list/table_item_acl.js
View File

@ -1,18 +0,0 @@
import React from 'react';
let TableItemAcl = React.createClass({
propTypes: {
content: React.PropTypes.array.isRequired
},
render() {
return (
<span>
{this.props.content.join('/')}
</span>
);
}
});
export default TableItemAcl;

20
js/components/ascribe_accordion_list/table_item_img.js
View File

@ -1,20 +0,0 @@
import React from 'react';
/**
* This could be enhanced further by specifying an optional description for example
*/
let TableItemImg = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired,
},
render() {
return (
<span>
<img src={this.props.content} width="50" />
</span>
);
}
});
export default TableItemImg;

38
js/components/ascribe_accordion_list/table_item_selectable.js
View File

@ -1,38 +0,0 @@
import React from 'react';
import classNames from 'classnames';
import TableColumnContentModel from '../../models/table_column_content_model';
import TableItem from './table_item';
// This component is implemented as recommended here: http://stackoverflow.com/a/25723635/1263876
let TableItemSelectable = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object,
parentId: React.PropTypes.number,
className: React.PropTypes.string
},
selectItem() {
this.props.selectItem(this.props.parentId, this.props.columnContent.edition_number);
},
render() {
let tableItemClasses = classNames({
'ascribe-table-item-selected': this.props.columnContent.selected
});
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}
onClick={this.selectItem}>
</TableItem>
);
}
});
export default TableItemSelectable;

110
js/components/ascribe_accordion_list/table_item_subtable.js
View File

@ -1,110 +0,0 @@
import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import Table from './table';
import TableItemWrapper from './table_item_wrapper';
import TableItemText from './table_item_text';
import TableItemAcl from './table_item_acl';
import TableItemSelectable from './table_item_selectable';
import TableItemSubtableButton from './table_item_subtable_button';
let TableItemSubtable = React.createClass({
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object
},
getInitialState() {
return {
'open': false
};
},
onChange(state) {
this.setState(state);
},
componentDidMount() {
EditionListStore.listen(this.onChange);
},
loadEditionList() {
if(this.state.open) {
this.setState({
'open': false
});
} else {
EditionListActions.fetchEditionList(this.props.columnContent.id);
this.setState({
'open': true,
'editionList': EditionListStore.getState()
});
}
},
selectItem(parentId, itemId) {
EditionListActions.selectEdition({
'pieceId': parentId,
'editionId': itemId
});
},
render() {
let renderEditionListTable = () => {
let columnList = [
new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
];
if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) {
return (
<div className="row">
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
{this.state.editionList[this.props.columnContent.id].map((edition, i) => {
return (
<TableItemSelectable
className="ascribe-table-item-selectable"
selectItem={this.selectItem}
parentId={this.props.columnContent.id}
key={i}>
</TableItemSelectable>
);
})}
</Table>
</div>
</div>
);
}
};
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
<div className="row">
<TableItemWrapper
columnList={this.props.columnList}
columnContent={this.props.columnContent}
columnWidth={12}>
</TableItemWrapper>
<div className="col-xs-1 col-sm-1 col-md-1 col-lg-1 ascribe-table-item-column">
<TableItemSubtableButton content="+" onClick={this.loadEditionList}>
</TableItemSubtableButton>
</div>
</div>
{renderEditionListTable()}
</div>
);
}
});
export default TableItemSubtable;

21
js/components/ascribe_accordion_list/table_item_subtable_button.js
View File

@ -1,21 +0,0 @@
import React from 'react';
let TableItemSubtableButton = React.createClass({
propTypes: {
content: React.PropTypes.string.isRequired,
onClick: React.PropTypes.func.isRequired
},
render() {
return (
<span>
<button type="button" className="btn btn-default btn-sm ascribe-table-expand-button" onClick={this.props.onClick}>
{this.props.content}
</button>
</span>
);
}
});
export default TableItemSubtableButton;

21
js/components/ascribe_accordion_list/table_item_text.js
View File

@ -1,21 +0,0 @@
import React from 'react';
let TableItemText = React.createClass({
propTypes: {
content: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.number
])
},
render() {
return (
<span>
{this.props.content}
</span>
);
}
});
export default TableItemText;

34
js/components/ascribe_accordion_list/table_item_wrapper.js
View File

@ -1,34 +0,0 @@
import React from 'react';
import TableColumnContentModel from '../../models/table_column_content_model';
import TableColumnMixin from '../../mixins/table_column_mixin';
let TableItemWrapper = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
columnContent: React.PropTypes.object,
columnWidth: React.PropTypes.number.isRequired
},
render() {
return (
<div>
{this.props.columnList.map((column, i) => {
let TypeElement = column.displayType;
let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
return (
<div className={columnClass + ' ascribe-table-item-column'} key={i}>
<TypeElement content={this.props.columnContent[column.columnName]} width="50" />
</div>
);
})}
</div>
);
}
});
export default TableItemWrapper;

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

@ -24,24 +24,20 @@ let Table = React.createClass({
},
render() {
if(this.props.itemList && this.props.itemList.length > 0) {
return (
<div className="ascribe-table">
<TableHeader
columnList={this.props.columnList}
itemList={this.props.itemList}
fetchList={this.props.fetchList}
changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy} />
return (
<div className="ascribe-table">
<TableHeader
columnList={this.props.columnList}
itemList={this.props.itemList}
fetchList={this.props.fetchList}
changeOrder={this.props.changeOrder}
orderAsc={this.props.orderAsc}
orderBy={this.props.orderBy} />
<div className="row">
{this.renderChildren()}
</div>
);
} else {
return (
<p>Loading</p>
);
}
</div>
);
}
});

3
js/components/ascribe_table/table_item.js
View File

@ -16,8 +16,7 @@ let TableItem = React.createClass({
render() {
return (
<div
className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
<div className={this.props.className + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
onClick={this.props.onClick}>
<div className="row">
<TableItemWrapper

27
js/components/ascribe_table/table_item_selectable.js
View File

@ -24,14 +24,25 @@ let TableItemSelectable = React.createClass({
'ascribe-table-item-selected': this.props.columnContent.selected
});
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}
onClick={this.selectItem}>
</TableItem>
);
if(this.props.onClick) {
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}
onClick={this.selectItem}>
</TableItem>
);
} else {
return (
<TableItem
className={tableItemClasses + ' ' + this.props.className}
columnList={this.props.columnList}
columnContent={this.props.columnContent}>
</TableItem>
);
}
}
});

11
js/components/piece_list.js
View File

@ -6,6 +6,7 @@ import PieceListActions from '../actions/piece_list_actions';
import AccordionList from './ascribe_accordion_list/accordion_list';
import AccordionListItem from './ascribe_accordion_list/accordion_list_item';
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
import Pagination from './ascribe_pagination/pagination';
@ -48,9 +49,9 @@ let PieceList = React.createClass({
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
return (
<div class="row">
<div>
<AccordionList
className="ascribe-accordion-list row"
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}
itemList={this.state.pieceList}
itemListCount={this.state.pieceListCount}
@ -64,7 +65,11 @@ let PieceList = React.createClass({
<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={item}
key={i} />
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} />
</AccordionListItem>
);
})}
</AccordionList>

35
sass/ascribe-accordion_list.scss
View File

@ -5,22 +5,20 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
background-color: rgba(0,0,0,0.004);
border: 1px solid black;
height: $ascribe-accordion-list-item-height;
margin-bottom: 3em;
padding-left:0;
padding-right:0;
overflow:hidden;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-left: 0.1em solid #E0E0E0;
border-right: 0.1em solid #E0E0E0;
border-top: 0.1em solid #E0E0E0;
border-radius: 5px;
border-bottom: 0.25em solid #E0E0E0;
border-bottom: 0.2em solid #E0E0E0;
.wrapper {
width:100%;
height:100%;
// ToDo: Include media queries for thumbnail
.thumbnail-wrapper {
float:left;
@ -48,4 +46,33 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
}
}
}
}
.ascribe-accordion-list-item-table {
text-align: center;
margin-bottom: 3em;
background-color: rgba(0,0,0,0.004);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom: 0.15em solid #E0E0E0;
border-left: 0.1em solid #E0E0E0;
border-right: 0.1em solid #E0E0E0;
}
span.ascribe-accordion-list-table-toggle {
::selection { background: transparent; }
::-moz-selection { background: transparent; }
&:hover {
color: $ascribe-color-dark;
cursor:pointer;
}
}
.ascribe-accordion-list-table-list {
margin-bottom: .5em;
th, td {
font-size:.85em;
text-align: center;
}
}

3
sass/ascribe-variables.scss
View File

@ -1 +1,2 @@
$ascribe-color: rgba(2, 182, 163, 0.5);
$ascribe-color: rgba(2, 182, 163, 0.5);
$ascribe-color-dark: rgba(2, 182, 163, 0.8);

9
sass/main.scss
View File

@ -28,8 +28,7 @@
}
.ascribe-table-header-row {
border-bottom: 2px solid rgba(2, 182, 163, 0.5);
border-top: 2px solid rgba(2, 182, 163, 0.5);
border-bottom: 2px solid #E0E0E0;
padding: 0;
}
@ -44,8 +43,8 @@
vertical-align: middle;
font-family: 'Source Sans Pro';
font-weight: 600;
color: rgba(2, 182, 163, 1);
font-size: 1.4em;
color: #424242;
font-size: 1.2em;
}
.ascribe-table-header-column > span > .glyphicon {
@ -63,7 +62,7 @@
.ascribe-table-item-column {
display: table;
font-family: 'Source Sans Pro';
font-size: 1.2em;
font-size: .8em;
height:3em;
}