Merge remote-tracking branch 'remotes/origin/AD-496-add-control-buttons-to-fineupload' into AD-368-harmonize-functionality-of-ascrib

Conflicts:
	js/components/ascribe_uploader/react_s3_fine_uploader.js

js/components/ascribe_accordion_list/accordion_list_item.js

@@ -19,7 +19,7 @@ let AccordionListItem = React.createClass({
                         <div className="col-xs-4 col-sm-4 col-md-4 col-lg-4 thumbnail-wrapper">
                             <img src={this.props.content.thumbnail} />
                         </div>
-                        <div className="col-xs-8 col-sm-8 col-md-8 col-lg-8">
+                        <div className="col-xs-7 col-sm-7 col-md-7 col-lg-7 col-xs-offset-1 col-sm-offset-1 col-md-offset-1 col-lg-offset-1">
                             <h1>{this.props.content.title}</h1>
                             <h3>{getLangText('by %s', this.props.content.artist_name)}</h3>
                             <h3>{this.props.content.date_created.split('-')[0]}</h3>

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -4,7 +4,6 @@ import React from 'react';
 
 import EditionListStore from '../../stores/edition_list_store';
 import EditionListActions from '../../actions/edition_list_actions';
-import PieceListActions from '../../actions/piece_list_actions';
 
 import AccordionListItemTable from './accordion_list_item_table';
 import AccordionListItemTableToggle from './accordion_list_item_table_toggle';

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -40,8 +40,11 @@ let FileDragAndDropPreview = React.createClass({
         }
     },
 
-    // implement a handle cancel action here that triggers fineuploaders cancel method
+    handleDownloadFile() {
-    // to delete files that are currently uploading
+        if(this.props.file.s3Url) {
+            open(this.props.file.s3Url);
+        }
+    },
 
     render() {
         let previewElement;
@@ -53,14 +56,16 @@ let FileDragAndDropPreview = React.createClass({
                                 progress={this.props.file.progress}
                                 url={this.props.file.url}
                                 toggleUploadProcess={this.toggleUploadProcess}
-                                areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
+                                areAssetsDownloadable={this.props.areAssetsDownloadable}
+                                downloadFile={this.handleDownloadFile}/>);
         } else {
             previewElement = (<FileDragAndDropPreviewOther
                                 onClick={this.handleDeleteFile}
                                 progress={this.props.file.progress}
                                 type={this.props.file.type.split('/')[1]}
                                 toggleUploadProcess={this.toggleUploadProcess}
-                                areAssetsDownloadable={this.props.areAssetsDownloadable}/>);
+                                areAssetsDownloadable={this.props.areAssetsDownloadable}
+                                downloadFile={this.handleDownloadFile}/>);
         }
 
         return (

js/components/ascribe_uploader/file_drag_and_drop_preview_image.js

@@ -31,10 +31,6 @@ let FileDragAndDropPreviewImage = React.createClass({
         this.props.toggleUploadProcess();
     },
 
-    downloadFile() {
-        console.log('implement this');
-    },
-
     render() {
         let imageStyle = {
             backgroundImage: 'url("' + this.props.url + '")',

js/components/ascribe_uploader/file_drag_and_drop_preview_other.js

@@ -11,7 +11,7 @@ let FileDragAndDropPreviewOther = React.createClass({
         progress: React.PropTypes.number,
         areAssetsDownloadable: React.PropTypes.bool,
         toggleUploadProcess: React.PropTypes.func,
-        downloadFile: React.PropTypes.func,
+        downloadFile: React.PropTypes.func
     },
 
     getInitialState() {
@@ -31,10 +31,6 @@ let FileDragAndDropPreviewOther = React.createClass({
         this.props.toggleUploadProcess();
     },
 
-    downloadFile() {
-        console.log('implement this');
-    },
-
     render() {
 
         let actionSymbol;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -314,25 +314,6 @@ var ReactS3FineUploader = React.createClass({
         }
     },
 
-    onDeleteComplete(id, xhr, isError) {
-        if(isError) {
-            let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-        } else {
-            this.removeFileWithIdFromFilesToUpload(id);
-
-            let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
-            GlobalNotificationActions.appendGlobalNotification(notification);
-        }
-
-        if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
-            // if so, set uploadstatus to true
-            this.props.setIsUploadReady(true);
-        } else {
-            this.props.setIsUploadReady(false);
-        }
-    },
-
     onProgress(id, name, uploadedBytes, totalBytes) {
         let newState = React.addons.update(this.state, {
             filesToUpload: { [id]: {
@@ -364,15 +345,37 @@ var ReactS3FineUploader = React.createClass({
             let newState = React.addons.update(this.state, {filesToUpload: {$set: updatedFilesToUpload}});
             this.setState(newState);
         } else {
+            let notification = new GlobalNotificationModel('Could not load attached files (Further data)', 'danger', 10000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+
             throw new Error('The session request failed', response);
         }
     },
 
+    onDeleteComplete(id, xhr, isError) {
+        if(isError) {
+            let notification = new GlobalNotificationModel('Couldn\'t delete file', 'danger', 10000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        } else {
+            this.removeFileWithIdFromFilesToUpload(id);
+
+            let notification = new GlobalNotificationModel('File deleted', 'success', 5000);
+            GlobalNotificationActions.appendGlobalNotification(notification);
+        }
+
+        if(this.props.isReadyForFormSubmission && this.props.isReadyForFormSubmission(this.state.filesToUpload)) {
+            // if so, set uploadstatus to true
+            this.props.setIsUploadReady(true);
+        } else {
+            this.props.setIsUploadReady(false);
+        }
+    },
+
     handleDeleteFile(fileId) {
         // In some instances (when the file was already uploaded and is just displayed to the user)
         // fineuploader does not register an id on the file (we do, don't be confused by this!).
         // Since you can only delete a file by its id, we have to implement this method ourselves
-        // 
+        //
         //  So, if an id is not present, we delete the file manually
         //  To check which files are already uploaded from previous sessions we check their status.
         //  If they are, it is "online"
@@ -387,12 +390,8 @@ var ReactS3FineUploader = React.createClass({
             let fileToDelete = this.state.filesToUpload[fileId];
             S3Fetcher
                 .deleteFile(fileToDelete.s3Key, fileToDelete.s3Bucket)
-                .then((res) => {
+                .then(() => this.onDeleteComplete(fileToDelete.id, null, false))
-                    console.log(res);
+                .catch(() => this.onDeleteComplete(fileToDelete.id, null, true));
-                })
-                .catch((err) => {
-                    console.log(err);
-                });
         }
     },
 

js/utils/general_utils.js

@@ -100,4 +100,4 @@ function _mergeOptions(obj1, obj2){
         }
     }
     return obj3;
-}
+}

sass/ascribe_accordion_list.scss

@@ -21,12 +21,19 @@ $ascribe-accordion-list-font: 'Source Sans Pro';
         height:100%;
         // ToDo: Include media queries for thumbnail
         .thumbnail-wrapper {
-            margin-left:0;
+            width: 110px;
-            padding-left:0;
+            height: 110px;
+            padding:0;
             img {
-                display:block;
+                max-width: 100%;
-                height: $ascribe-accordion-list-item-height;
+                max-height: 100%;
             }
+            &::before {
+                    content: ' ';
+                    display: inline-block;
+                    vertical-align: middle; /* vertical alignment of the inline element */
+                    height: 100%;
+                }
         }
         h1 {
             margin-top: .3em;

sass/ascribe_theme.scss

@@ -0,0 +1,5 @@
+/* All bootstrap overwrites should take place in this file */
+
+.pager li a {
+    color: white;
+}

sass/ascribe_uploader.scss

@@ -29,7 +29,7 @@
 
     margin-top: 1em;
 
-    &:before {
+    &::before {
         content: ' ';
         display: inline-block;
         vertical-align: middle; /* vertical alignment of the inline element */

sass/main.scss

@@ -7,6 +7,7 @@ $BASE_URL: '<%= BASE_URL %>';
 @import 'variables';
 @import '../node_modules/bootstrap-sass/assets/stylesheets/bootstrap';
 @import '../node_modules/react-datepicker/dist/react-datepicker';
+@import 'ascribe_theme';
 @import './ascribe-fonts/style';
 @import './ascribe-fonts/ascribe-fonts';
 @import 'ascribe_login';

sass/variables.scss

@@ -468,16 +468,16 @@ $pagination-disabled-border:           #ddd !default;
 //
 //##
 
-$pager-bg:                             $pagination-bg !default;
+$pager-bg:                             $ascribe-color-full !default;
-$pager-border:                         $pagination-border !default;
+$pager-border:                         $ascribe-color-full !default;
-$pager-border-radius:                  15px !default;
+$pager-border-radius:                  0 !default;
 
-$pager-hover-bg:                       $pagination-hover-bg !default;
+$pager-hover-bg:                       darken($ascribe-color-full, 10%) !default;
 
-$pager-active-bg:                      $pagination-active-bg !default;
+$pager-active-bg:                      $ascribe-color-full !default;
-$pager-active-color:                   $pagination-active-color !default;
+$pager-active-color:                   $ascribe-color-full !default;
 
-$pager-disabled-color:                 $pagination-disabled-color !default;
+$pager-disabled-color:                 lighten($ascribe-color-full, 10%) !default;
 
 
 //== Jumbotron