From 8255c8dc6ff34ddb31d2387e00d495a7e4906d93 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Wed, 9 Sep 2015 15:15:54 +0200
Subject: [PATCH] style progress bar

---
 .../ascribe_uploader/file_drag_and_drop.js    | 18 ++++++-----
 .../file_drag_and_drop_dialog.js              | 12 +++----
 .../file_drag_and_drop_preview_iterator.js    | 32 +++++++++++++------
 .../file_drag_and_drop_preview_progress.js    | 23 +++++++------
 sass/ascribe_uploader.scss                    | 14 +++++++-
 5 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 6dbdb66c..312b504d 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -169,14 +169,16 @@ let FileDragAndDrop = React.createClass({
         if(this.props.hashingProgress !== -2) {
             return (
                 <div className={className}>
-                    <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
-                    <p>
-                        <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
-                    </p>
-                    <ProgressBar
-                        now={Math.ceil(this.props.hashingProgress)}
-                        label="%(percent)s%"
-                        className="ascribe-progress-bar"/>
+                    <div className="file-drag-and-drop-hashing-dialog">
+                        <p>{getLangText('Computing hash(es)... This may take a few minutes.')}</p>
+                        <p>
+                            <a onClick={this.props.handleCancelHashing}> {getLangText('Cancel hashing')}</a>
+                        </p>
+                        <ProgressBar
+                            now={Math.ceil(this.props.hashingProgress)}
+                            label="%(percent)s%"
+                            className="ascribe-progress-bar"/>
+                    </div>
                 </div>
             );
         } else {
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
index f5399f9c..0cb14be7 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
@@ -32,7 +32,7 @@ let FileDragAndDropDialog = React.createClass({
                 queryParamsUpload.method = 'upload';
 
                 return (
-                    <span className="file-drag-and-drop-dialog present-options">
+                    <div className="file-drag-and-drop-dialog present-options">
                         <p>{getLangText('Would you rather')}</p>
                         <Link
                             to={this.getPath()}
@@ -51,12 +51,12 @@ let FileDragAndDropDialog = React.createClass({
                                 {getLangText('Upload and hash your work')}
                             </span>
                         </Link>
-                    </span>
+                    </div>
                 );
             } else {
                 if(this.props.multipleFiles) {
                     return (
-                        <span className="file-drag-and-drop-dialog">
+                        <div className="file-drag-and-drop-dialog">
                             <p>{getLangText('Drag files here')}</p>
                             <p>{getLangText('or')}</p>
                             <span
@@ -64,13 +64,13 @@ let FileDragAndDropDialog = React.createClass({
                                 onClick={this.props.onClick}>
                                     {getLangText('choose files to upload')}
                             </span>
-                        </span>
+                        </div>
                     );
                 } else {
                     let dialog = queryParams.method === 'hash' ? getLangText('choose a file to hash') : getLangText('choose a file to upload');
 
                     return (
-                        <span className="file-drag-and-drop-dialog">
+                        <div className="file-drag-and-drop-dialog">
                             <p>{getLangText('Drag a file here')}</p>
                             <p>{getLangText('or')}</p>
                             <span
@@ -78,7 +78,7 @@ let FileDragAndDropDialog = React.createClass({
                                 onClick={this.props.onClick}>
                                     {dialog}
                             </span>
-                        </span>
+                        </div>
                     );
                 }
             }
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
index 9cc7fc4d..2b87bc5a 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js
@@ -18,29 +18,41 @@ let FileDragAndDropPreviewIterator = React.createClass({
     },
 
     render() {
-        if(this.props.files && this.props.files.length > 0) {
+        let {
+            files,
+            handleDeleteFile,
+            handleCancelFile,
+            handlePauseFile,
+            handleResumeFile,
+            areAssetsDownloadable,
+            areAssetsEditable
+        } = this.props;
+
+        files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
+
+        if(files && files.length > 0) {
             return (
                 <div className="file-drag-and-drop-preview-iterator">
-                    <div>
-                        {this.props.files.map((file, i) => {
+                    <div className="file-drag-and-drop-preview-iterator-spacing">
+                        {files.map((file, i) => {
                             if(file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1) {
                                 return (
                                     <FileDragAndDropPreview
                                         key={i}
                                         file={file}
-                                        handleDeleteFile={this.props.handleDeleteFile}
-                                        handleCancelFile={this.props.handleCancelFile}
-                                        handlePauseFile={this.props.handlePauseFile}
-                                        handleResumeFile={this.props.handleResumeFile}
-                                        areAssetsDownloadable={this.props.areAssetsDownloadable}
-                                        areAssetsEditable={this.props.areAssetsEditable}/>
+                                        handleDeleteFile={handleDeleteFile}
+                                        handleCancelFile={handleCancelFile}
+                                        handlePauseFile={handlePauseFile}
+                                        handleResumeFile={handleResumeFile}
+                                        areAssetsDownloadable={areAssetsDownloadable}
+                                        areAssetsEditable={areAssetsEditable}/>
                                 );
                             } else {
                                 return null;
                             }
                         })}
                     </div>
-                    <FileDragAndDropPreviewProgress files={this.props.files} />
+                    <FileDragAndDropPreviewProgress files={files} />
                 </div>
             );
         } else {
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
index 0974142a..ef6d0e12 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview_progress.js
@@ -22,23 +22,28 @@ let FileDragAndDropPreviewProgress = React.createClass({
             overallProgress += files[i].size / sizeOfAllFiles * files[i].progress;
         }
 
-
         return overallProgress;
     },
 
     render() {
         let overallProgress = this.calcOverallProgress();
+        let style = {
+            visibility: 'hidden'
+        };
 
         if(overallProgress !== 0) {
-            return (
-                <ProgressBar
-                    now={Math.ceil(overallProgress)}
-                    label="Overall progress: %(percent)s%"
-                    className="ascribe-progress-bar" />
-            );
-        } else {
-            return null;
+            style.visibility = 'visible';
         }
+
+        console.log(overallProgress, style);
+
+        return (
+            <ProgressBar
+                now={Math.ceil(overallProgress)}
+                label="Overall progress: %(percent)s%"
+                className="ascribe-progress-bar"
+                style={style} />
+        );
     }
 });
 
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index e3b5d1c1..df08a27e 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -10,7 +10,6 @@
 
     cursor: default !important;
 
-    padding: 1.5em 0 1.5em 0;
 }
 
 .inactive-dropzone {
@@ -30,6 +29,7 @@
 }
 
 .file-drag-and-drop-preview-iterator {
+    margin: 2.5em 0 0 0;
     text-align: right;
 
     > div:first-child {
@@ -37,6 +37,18 @@
     }
 }
 
+.file-drag-and-drop-preview-iterator-spacing {
+    margin-bottom: 1em;
+}
+
+.file-drag-and-drop-dialog {
+    margin: 1.5em 0 1.5em 0;
+}
+
+.file-drag-and-drop-hashing-dialog {
+    margin: 1.5em 0 0 0;
+}
+
 .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
     font-size: 1.5em !important;