From 627b2f75fee230a7770fc60f59fb1b1740cadb10 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Tue, 26 Jan 2016 13:41:15 +0100
Subject: [PATCH 1/2] Extract extension using file name rather that mime type
 for uploader preview

Also adds ellipsis overflow to the extension name to prevent long
extensions from resizing the preview element and removes redundant
`.file-drag-and-drop-preview-table-wrapper` class
---
 .../file_drag_and_drop_preview.js             | 17 +++++++-------
 .../file_drag_and_drop_preview_other.js       | 19 +++++++---------
 sass/ascribe_uploader.scss                    | 22 ++++++-------------
 3 files changed, 24 insertions(+), 34 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 ca1be2d2..0f95427d 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
@@ -23,6 +23,7 @@ const FileDragAndDropPreview = React.createClass({
             s3Url: string,
             s3UrlSafe: string
         }).isRequired,
+
         handleDeleteFile: func,
         handleCancelFile: func,
         handlePauseFile: func,
@@ -33,9 +34,9 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     toggleUploadProcess() {
-        if(this.props.file.status === 'uploading') {
+        if (this.props.file.status === 'uploading') {
             this.props.handlePauseFile(this.props.file.id);
-        } else if(this.props.file.status === 'paused') {
+        } else if (this.props.file.status === 'paused') {
             this.props.handleResumeFile(this.props.file.id);
         }
     },
@@ -54,13 +55,13 @@ const FileDragAndDropPreview = React.createClass({
             (file.status === 'upload successful' || file.status === 'online') &&
             file.s3UrlSafe) {
             handleDeleteFile(file.id);
-        } else if(handleCancelFile) {
+        } else if (handleCancelFile) {
             handleCancelFile(file.id);
         }
     },
 
     handleDownloadFile() {
-        if(this.props.file.s3Url) {
+        if (this.props.file.s3Url) {
             // This simply opens a new browser tab with the url provided
             open(this.props.file.s3Url);
         }
@@ -69,7 +70,7 @@ const FileDragAndDropPreview = React.createClass({
     getFileName() {
         const { numberOfDisplayedFiles, file } = this.props;
 
-        if(numberOfDisplayedFiles === 1) {
+        if (numberOfDisplayedFiles === 1) {
             return (
                 <span className="file-name">
                     {truncateTextAtCharIndex(file.name, 30, '(...).' + extractFileExtensionFromString(file.name))}
@@ -81,7 +82,7 @@ const FileDragAndDropPreview = React.createClass({
     },
 
     getRemoveButton() {
-        if(this.props.areAssetsEditable) {
+        if (this.props.areAssetsEditable) {
             return (
                 <div className="delete-file">
                     <span
@@ -107,7 +108,7 @@ const FileDragAndDropPreview = React.createClass({
 
         // Decide whether an image or a placeholder picture should be displayed
         // If a file has its `thumbnailUrl` defined, then we display it also as an image
-        if(file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
+        if (file.type.split('/')[0] === 'image' || file.thumbnailUrl) {
             previewElement = (
                 <FileDragAndDropPreviewImage
                     onClick={this.handleDeleteFile}
@@ -123,7 +124,7 @@ const FileDragAndDropPreview = React.createClass({
                 <FileDragAndDropPreviewOther
                     onClick={this.handleDeleteFile}
                     progress={file.progress}
-                    type={file.type.split('/')[1]}
+                    type={extractFileExtensionFromString(file.name)}
                     toggleUploadProcess={this.toggleUploadProcess}
                     areAssetsDownloadable={areAssetsDownloadable}
                     downloadUrl={file.s3UrlSafe}
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 e5e7c947..e57b9495 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
@@ -56,9 +56,9 @@ const FileDragAndDropPreviewOther = React.createClass({
                     target="_blank"
                     className="glyphicon glyphicon-download action-file"
                     aria-hidden="true"
-                    title={getLangText('Download file')}/>
+                    title={getLangText('Download file')} />
             );
-        } else if(progress >= 0 && progress < 100) {
+        } else if (progress >= 0 && progress < 100) {
             actionSymbol = (
                 <div className="spinner-file">
                     <AscribeSpinner color='dark-blue' size='md' />
@@ -66,22 +66,19 @@ const FileDragAndDropPreviewOther = React.createClass({
             );
         } else {
             actionSymbol = (
-                <span className='ascribe-icon icon-ascribe-ok action-file'/>
+                <span className='ascribe-icon icon-ascribe-ok action-file' />
             );
         }
 
         return (
-            <div
-                className="file-drag-and-drop-preview">
+            <div className="file-drag-and-drop-preview">
                 <ProgressBar
                     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 style={style}>{'.' + type}</p>
-                    </div>
+                    className="ascribe-progress-bar ascribe-progress-bar-xs" />
+                <div className="file-drag-and-drop-preview-other">
+                    {actionSymbol}
+                    <p style={style}>{'.' + (type ? type : 'file')}</p>
                 </div>
             </div>
         );
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 93f1de5e..cbe0611f 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -78,12 +78,6 @@
     }
 }
 
-.file-drag-and-drop-preview-table-wrapper {
-    display: table;
-    height: 94px;
-    width: 104px;
-}
-
 .file-drag-and-drop-preview {
     background-color: #eeeeee;
     border: 1px solid #616161;
@@ -131,7 +125,7 @@
     width: 104px;
 
     // REFACTOR TO USE TABLE CELL
-    .action-file, .spinner-file, .icon-ascribe-ok {
+    .action-file, .spinner-file {
         margin-top: 1em;
         line-height: 1.3;
     }
@@ -142,23 +136,21 @@
 }
 
 .file-drag-and-drop-preview-other {
-    display: table-cell;
+    height: 94px;
     text-align: center;
-    vertical-align: middle;
+    width: 104px;
 
     p {
         margin-top: 5px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 
     .action-file:not(.icon-ascribe-ok), .spinner-file {
         margin-top: 0;
         position: relative;
-        top: .3em;
-
-        span:not(:first-child) {
-            display: block;
-            margin-top: .5em;
-        }
+        top: 0.8em;
     }
 }
 

From 215cc3b841df43590ef6835d58703cf70bd7a864 Mon Sep 17 00:00:00 2001
From: Brett Sun <brett@ascribe.io>
Date: Wed, 27 Jan 2016 11:33:45 +0100
Subject: [PATCH 2/2] Move file name to under file upload preview for smaller
 screens

---
 sass/ascribe_uploader.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index cbe0611f..63d0c127 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -9,6 +9,12 @@
     text-align: center;
     vertical-align: middle;
     padding-top: 1.5em;
+
+    @media screen and (max-width: 625px) {
+        .file-name {
+            display: block;
+        }
+    }
 }
 
 .inactive-dropzone {