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

start implementing sort

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-05-20 19:19:57 +02:00
parent 52c980bfea
commit a4a4482d18
6 changed files with 57 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/main.css
View File

@ -13,16 +13,20 @@
.ascribe-table-header-column {
display: table;
font-weight: bold;
height:4em;
}
.ascribe-table-header-column > span {
display:table-cell;
vertical-align: middle;
font-family: 'mercury_light';
font-family: 'Source Sans Pro';
font-weight: 600;
color: rgba(2, 182, 163, 1);
font-size: 1.25em;
font-size: 1.4em;
}
.ascribe-table-header-column > span > .glyphicon {
font-size: .6em;
}
.ascribe-table-item:nth-child(even) {
@ -35,6 +39,8 @@
.ascribe-table-item-column {
display: table;
font-family: 'Source Sans Pro';
font-size: 1.2em;
height:4em;
}

2
index.html
View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="css/main.css"></link>
<link rel="stylesheet" href="css/ascribe-fonts/ascribe-fonts.css"></link>
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,700,900">
<link rel="stylesheet" href="//brick.a.ssl.fastly.net/Source+Sans+Pro:400,600,700,900">
</head>
<body>
<div id="main" class="container"></div>

4
js/actions/piece_list_actions.js
View File

@ -9,8 +9,8 @@ class PieceListActions {
);
}
fetchPieceList() {
PieceListFetcher.fetch(1, 10)
fetchList(page, pageSize, search, ordering) {
PieceListFetcher.fetch(page, pageSize, search, ordering)
.then((res) => {
this.actions.updatePieceList(res.pieces);
})

16
js/components/piece_list.js
View File

@ -15,7 +15,7 @@ let Link = Router.Link;
let PieceList = React.createClass({
componentDidMount() {
PieceListActions.fetchPieceList();
PieceListActions.fetchList(1, 10);
},
render() {
@ -26,22 +26,26 @@ let PieceList = React.createClass({
'thumbnail': {
'displayName': '',
'displayType': TableItemImg,
'rowWidth': 2
'rowWidth': 2,
'canBeOrdered': false
},
'artist_name': {
'displayName': 'Artist',
'displayType': TableItemText,
'rowWidth': 5
'rowWidth': 4,
'canBeOrdered': true
},
'title': {
'displayName': 'Title',
'displayType': TableItemText,
'rowWidth': 5
'rowWidth': 4,
'canBeOrdered': true
}
};
return (
<AltContainer store={PieceListStore}>
<Table class="piecesTable" columnMap={columnMap} />
<AltContainer store={PieceListStore} actions={PieceListActions}>
<Table columnMap={columnMap} />
</AltContainer>
);
}

2
js/components/table.js
View File

@ -14,7 +14,7 @@ let Table = React.createClass({
return (
<div className="ascribe-table">
<TableHeader columnMap={this.props.columnMap}/>
<TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} />
{this.props.itemList.map((item, i) => {
return (
<TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />

39
js/components/table_header.js
View File

@ -7,13 +7,44 @@ import GeneralUtils from '../utils/general_utils';
let TableHeader = React.createClass({
mixins: [TableColumnMixin],
propTypes: {
columnMap: React.PropTypes.object.isRequired
columnMap: React.PropTypes.object.isRequired,
itemList: React.PropTypes.array.isRequired,
fetchList: React.PropTypes.func.isRequired
},
sortIndex(i) {
this.props.fetchList(1, 10, null, '-' + Object.keys(this.props.columnMap)[i]);
},
render() {
let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
let calcHeaderText = (val, i, columnClass) => {
let s = "";
if(columnMapValuesList[i].canBeOrdered) {
let boundClick = this.sortIndex.bind(this, i)
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i} onClick={boundClick}>
<span>
<span className="glyphicon glyphicon-chevron-down"></span>
{val.displayName}
</span>
</div>
);
} else {
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
<span>
{val.displayName}
</span>
</div>
);
}
};
return (
<div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
<div className="row">
@ -22,10 +53,8 @@ let TableHeader = React.createClass({
let columnClass = this.calcColumnClasses(this.props.columnMap, i);
return (
<div className={columnClass + ' ascribe-table-header-column'} key={i}>
<span>
{val.displayName}
</span>
<div key={i}>
{calcHeaderText(val, i, columnClass)}
</div>
);
})}