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

loading icon for piece list

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-06-16 09:57:14 +02:00
parent 1ce9b90fff
commit e2997891df
7 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintignore
View File

@ -3,3 +3,5 @@ gulpfile.js
node_modules
js/**/__tests__
server.js

BIN
img/ascribe_animated_medium.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

8
js/components/ascribe_accordion_list/accordion_list.js
View File

@ -2,11 +2,11 @@
import React from 'react';
let AccordionList = React.createClass({
propTypes: {
className: React.PropTypes.string,
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired
children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired,
loadingElement: React.PropTypes.element
},
render() {
@ -18,7 +18,9 @@ let AccordionList = React.createClass({
);
} else {
return (
<p>Loading</p>
<div className={this.props.className + ' ascribe-accordion-list-loading'}>
{this.props.loadingElement}
</div>
);
}
}

2
js/components/ascribe_buttons/button_submit_close.js
View File

@ -13,7 +13,7 @@ let ButtonSubmitOrClose = React.createClass({
if (this.props.submitted){
return (
<div className="modal-footer">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
<img src="img/ascribe_animated_medium.gif" />
</div>
);
}

6
js/components/piece_list.js
View File

@ -15,6 +15,8 @@ import Pagination from './ascribe_pagination/pagination';
import PieceListBulkModal from './ascribe_piece_list_bulk_modal/piece_list_bulk_modal';
import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
import AppConstants from '../constants/application_constants';
let PieceList = React.createClass({
propTypes: {
@ -62,6 +64,7 @@ let PieceList = React.createClass({
render() {
let currentPage = parseInt(this.props.query.page, 10) || 1;
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize);
let loadingElement = (<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_medium.gif'} />);
return (
<div>
@ -77,7 +80,8 @@ let PieceList = React.createClass({
orderAsc={this.state.orderAsc}
search={this.state.search}
page={this.state.page}
pageSize={this.state.pageSize}>
pageSize={this.state.pageSize}
loadingElement={loadingElement}>
{this.state.pieceList.map((item, i) => {
return (
<AccordionListItem

10
sass/ascribe_accordion_list.scss
View File

@ -39,6 +39,16 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
}
}
.ascribe-accordion-list-loading {
padding-top: 30%;
padding-bottom: 30%;
}
.ascribe-accordion-list-loading img {
display: block;
margin: auto;
}
.ascribe-accordion-list-item-table {
text-align: center;
margin-bottom: 3em;

1
server.js
View File

@ -9,6 +9,7 @@ var app = express();
app.use(compression());
app.use(baseUrl + 'static/js', express.static(__dirname + '/build/js'));
app.use(baseUrl + 'static/img', express.static(__dirname + '/build/img'));
app.use(baseUrl + 'static/css', express.static(__dirname + '/build/css'));
app.use(baseUrl + 'static/fonts', express.static(__dirname + '/build/fonts'));
app.use(baseUrl + 'static/thirdparty/', express.static(__dirname + '/node_modules'));