From 1cf8ac2f318c168a7eababa3cfdf0d3b8ce49119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Fri, 20 Nov 2015 14:30:24 +0100
Subject: [PATCH] Various small changes for FileDragAndDrop

Changed:
  - If only one file submitted: hide file-specific progress bar + filename extension
  - Fix bug for when uploaded file is deleteable (avoid error)
  - Add checkmark for when file was actually submitted
---
 .../file_drag_and_drop_preview.js             | 29 ++++++++----
 .../file_drag_and_drop_preview_image.js       | 45 ++++++++++--------
 .../file_drag_and_drop_preview_other.js       | 47 ++++++++++++-------
 .../file_drag_and_drop_preview_progress.js    |  4 +-
 sass/ascribe_uploader.scss                    | 10 ++++
 5 files changed, 88 insertions(+), 47 deletions(-)

diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
index 9dcaf7f3..5528ec25 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview.js
@@ -41,14 +41,21 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     handleDeleteFile() {
-        // handleDeleteFile is optional, so if its not submitted,
-        // don't run it
-        // On the other hand, if the files progress is not yet at a 100%,
-        // just run fineuploader.cancel
-        if(this.props.handleDeleteFile && this.props.file.progress === 100) {
-            this.props.handleDeleteFile(this.props.file.id);
-        } else if(this.props.handleCancelFile && this.props.file.progress !== 100) {
-            this.props.handleCancelFile(this.props.file.id);
+        const { handleDeleteFile,
+                handleCancelFile,
+                file } = this.props;
+        // `handleDeleteFile` is optional, so if its not submitted, don't run it
+        //
+        // For delete though, we only want to trigger it, when we're sure that
+        // the file has *completely* been uploaded to S3 and call now also be
+        // deleted using an HTTP DELETE request.
+        if (handleDeleteFile &&
+            file.progress === 100 &&
+            (file.status === 'upload successful' || file.status === 'online') &&
+            file.s3UrlSafe) {
+            handleDeleteFile(file.id);
+        } else if(handleCancelFile) {
+            handleCancelFile(file.id);
         }
     },
 
@@ -107,7 +114,8 @@ const FileDragAndDropPreview = React.createClass({
                     url={file.url}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
-                    downloadUrl={file.s3UrlSafe}/>
+                    downloadUrl={file.s3UrlSafe}
+                    showProgress={numberOfDisplayedFiles > 1} />
             );
         } else {
             previewElement = (
@@ -117,7 +125,8 @@ const FileDragAndDropPreview = React.createClass({
                     type={file.type.split('/')[1]}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
-                    downloadUrl={file.s3UrlSafe}/>
+                    downloadUrl={file.s3UrlSafe}
+                    showProgress={numberOfDisplayedFiles > 1} />
                 );
         }
 
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
index 502b11c1..b5cf4694 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
+import AclProxy from '../../acl_proxy';
 import AscribeSpinner from '../../ascribe_spinner';
 import { getLangText } from '../../../utils/lang_utils';
 
@@ -15,7 +16,8 @@ const FileDragAndDropPreviewImage = React.createClass({
         url: string,
         toggleUploadProcess: func,
         downloadUrl: string,
-        areAssetsDownloadable: bool
+        areAssetsDownloadable: bool,
+        showProgress: bool
     },
 
     getInitialState() {
@@ -36,40 +38,45 @@ const FileDragAndDropPreviewImage = React.createClass({
     },
 
     render() {
-        let imageStyle = {
-            backgroundImage: 'url("' + this.props.url + '")',
+        const { url,
+                progress,
+                areAssetsDownloadable,
+                downloadUrl,
+                showProgress } = this.props;
+        const imageStyle = {
+            backgroundImage: 'url("' + url + '")',
             backgroundSize: 'cover'
         };
 
         let actionSymbol;
         
-        if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
-        } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
-        } else if(this.props.progress === 100) {
-
-            // only if assets are actually downloadable, there should be a download icon if the process is already at
-            // 100%. If not, no actionSymbol should be displayed
-            if(this.props.areAssetsDownloadable) {
-                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
-            }
-
-        } else {
+        // only if assets are actually downloadable, there should be a download icon if the process is already at
+        // 100%. If not, no actionSymbol should be displayed
+        if(progress === 100 && areAssetsDownloadable) {
+            actionSymbol = <a href={downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
+        } else if(progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
                 </div>
             );
+        } else {
+            actionSymbol = (
+                <span
+                    className="glyphicon glyphicon-ok action-file" />
+            );
         }
 
         return (
             <div
                 className="file-drag-and-drop-preview-image"
                 style={imageStyle}>
-                    <ProgressBar
-                        now={Math.ceil(this.props.progress)}
-                        className="ascribe-progress-bar ascribe-progress-bar-xs"/>
+                    <AclProxy
+                        show={showProgress}>
+                        <ProgressBar
+                            now={Math.ceil(progress)}
+                            className="ascribe-progress-bar ascribe-progress-bar-xs"/>
+                    </AclProxy>
                     {actionSymbol}
             </div>
         );
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
index 5613dafb..acf8f276 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_other.js
@@ -3,6 +3,7 @@
 import React from 'react';
 import ProgressBar from 'react-bootstrap/lib/ProgressBar';
 
+import AclProxy from '../../acl_proxy';
 import AscribeSpinner from '../../ascribe_spinner';
 import { getLangText } from '../../../utils/lang_utils';
 
@@ -15,7 +16,8 @@ const FileDragAndDropPreviewOther = React.createClass({
         progress: number,
         areAssetsDownloadable: bool,
         toggleUploadProcess: func,
-        downloadUrl: string
+        downloadUrl: string,
+        showProgress: bool
     },
 
     getInitialState() {
@@ -36,39 +38,50 @@ const FileDragAndDropPreviewOther = React.createClass({
     },
 
     render() {
-
+        const { progress,
+                areAssetsDownloadable,
+                downloadUrl,
+                type,
+                showProgress } = this.props;
+        const style = !showProgress ? { visibility: 'hidden' }: null;
         let actionSymbol;
-        
-        if(this.props.progress > 0 && this.props.progress < 99 && this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-pause action-file" aria-hidden="true" title={getLangText('Pause upload')} onClick={this.toggleUploadProcess}/>;
-        } else if(this.props.progress > 0 && this.props.progress < 99 && !this.state.paused) {
-            actionSymbol = <span className="glyphicon glyphicon-play action-file" aria-hidden="true" title={getLangText('Resume uploading')} onClick={this.toggleUploadProcess}/>;
-        } else if(this.props.progress === 100) {
 
-            // only if assets are actually downloadable, there should be a download icon if the process is already at
-            // 100%. If not, no actionSymbol should be displayed
-            if(this.props.areAssetsDownloadable) {
-                actionSymbol = <a href={this.props.downloadUrl} target="_blank" className="glyphicon glyphicon-download action-file" aria-hidden="true" title={getLangText('Download file')}/>;
-            }
-
-        } else {
+        // only if assets are actually downloadable, there should be a
+        // download icon if the process is already at 100%.
+        // If not, no actionSymbol should be displayed
+        if (progress === 100 && areAssetsDownloadable) {
+            actionSymbol = (
+                <a
+                    href={downloadUrl}
+                    target="_blank"
+                    className="glyphicon glyphicon-download action-file"
+                    aria-hidden="true"
+                    title={getLangText('Download file')}/>
+            );
+        } else if(progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
                 </div>
             );
+        } else {
+            actionSymbol = (
+                <span
+                    className="glyphicon glyphicon-ok action-file" />
+            );
         }
 
         return (
             <div
                 className="file-drag-and-drop-preview">
                 <ProgressBar
-                    now={Math.ceil(this.props.progress)}
+                    now={Math.ceil(progress)}
+                    style={style}
                     className="ascribe-progress-bar ascribe-progress-bar-xs"/>
                 <div className="file-drag-and-drop-preview-table-wrapper">
                     <div className="file-drag-and-drop-preview-other">
                         {actionSymbol}
-                        <p>{'.' + this.props.type}</p>
+                        <p style={style}>{'.' + type}</p>
                     </div>
                 </div>
             </div>
diff --git a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
index 1f1fd421..9da16779 100644
--- a/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
+++ b/js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_progress.js
@@ -40,6 +40,7 @@ let FileDragAndDropPreviewProgress = React.createClass({
     },
 
     render() {
+        const files = this.props.files.filter(displayValidProgressFilesFilter);
         let overallProgress = this.calcOverallProgress();
         let overallFileSize = this.calcOverallFileSize();
         let style = {
@@ -48,7 +49,8 @@ let FileDragAndDropPreviewProgress = React.createClass({
 
         // only visible if overallProgress is over zero
         // or the overallFileSize is greater than 10MB
-        if(overallProgress !== 0 && overallFileSize > 10000000) {
+        // or the user is only uploading one file
+        if(overallProgress !== 0 && overallFileSize > 10000000 || files.length === 1) {
             style.visibility = 'visible';
         }
 
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 5117286b..96ca26dd 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -111,6 +111,7 @@
     cursor: default;
     overflow: hidden;
 }
+
 .action-file {
     color: white;
     cursor: pointer;
@@ -129,6 +130,11 @@
     &:hover {
         color: #d9534f;
     }
+
+    &.glyphicon-ok, &.glyphicon-ok:hover {
+        cursor: default;
+        color: lighten($ascribe--button-default-color, 20%);
+    }
 }
 
 .spinner-file {
@@ -144,6 +150,10 @@
     width: 104px;
 
     .action-file, .spinner-file {
+        margin-top: .8em;
+    }
+
+    .ascribe-progress-bar + .action-file, .ascribe-progress-bar + .spinner-file {
         margin-top: .6em;
     }
 }