From e2997891df7d8e90705eea68e863682ca8d9ab75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 16 Jun 2015 09:57:14 +0200
Subject: [PATCH] loading icon for piece list

---
 .eslintignore                                    |   4 +++-
 img/ascribe_animated_medium.gif                  | Bin 0 -> 5855 bytes
 .../ascribe_accordion_list/accordion_list.js     |   8 +++++---
 .../ascribe_buttons/button_submit_close.js       |   2 +-
 js/components/piece_list.js                      |   8 ++++++--
 sass/ascribe_accordion_list.scss                 |  10 ++++++++++
 server.js                                        |   1 +
 7 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 img/ascribe_animated_medium.gif

diff --git a/.eslintignore b/.eslintignore
index c6d53e29..25c2038b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -2,4 +2,6 @@
 gulpfile.js
 node_modules
 
-js/**/__tests__
\ No newline at end of file
+js/**/__tests__
+
+server.js
\ No newline at end of file
diff --git a/img/ascribe_animated_medium.gif b/img/ascribe_animated_medium.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2b3994b64d546b8370def0846b7c966c101660f1
GIT binary patch
literal 5855
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

literal 0
HcmV?d00001

diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js
index a17aed36..854e08bf 100644
--- a/js/components/ascribe_accordion_list/accordion_list.js
+++ b/js/components/ascribe_accordion_list/accordion_list.js
@@ -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>
             );
         }
     }
diff --git a/js/components/ascribe_buttons/button_submit_close.js b/js/components/ascribe_buttons/button_submit_close.js
index d5a94f91..9f7f56f8 100644
--- a/js/components/ascribe_buttons/button_submit_close.js
+++ b/js/components/ascribe_buttons/button_submit_close.js
@@ -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>
             );
         }
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 7ca31cc2..ce3a732f 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -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,10 +64,11 @@ 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>
-                <PieceListToolbar 
+                <PieceListToolbar
                     className="ascribe-piece-list-toolbar"
                     searchFor={this.searchFor} />
                 <PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
@@ -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
diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss
index 21236488..eea2bcec 100644
--- a/sass/ascribe_accordion_list.scss
+++ b/sass/ascribe_accordion_list.scss
@@ -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;
diff --git a/server.js b/server.js
index 521ea8a0..ef590a70 100644
--- a/server.js
+++ b/server.js
@@ -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'));