Moves download option into file editor (#716)

* Moves download option into file editor

Instead of clicking in the file cell to download, and double clicking in the white part of the cell to edit/delete, this change adds download into the editor, so it’s easier to edit if needed, while keeping the download functionality.

* Changes `let` to `const` in FileEditor.react.js

Author: natanrolnik

src/components/BrowserCell/BrowserCell.react.js

@@ -45,7 +45,7 @@ let BrowserCell = ({ type, value, hidden, width, current, onSelect, onEditChange
     content = JSON.stringify(value);
   } else if (type === 'File') {
     if (value.url()) {
-      content = <a href={value.url()} target='_blank'><Pill value={getFileName(value)} /></a>;
+      content = <Pill value={getFileName(value)} />;
     } else {
       content = <Pill value={'Uploading\u2026'} />;
     }

src/components/FileEditor/FileEditor.react.js

@@ -52,13 +52,15 @@ export default class FileEditor extends React.Component {
   }
 
   render() {
+    const file = this.props.value;
     return (
       <div ref='input' style={{ minWidth: this.props.width }} className={styles.editor}>
-        {this.props.value ? <a href='javascript:;' role='button' className={styles.delete} onClick={() => this.props.onCommit(undefined)}>Delete</a> : null}
+        {file && file.url() ? <a href={file.url()} target='_blank' role='button' className={styles.download}>Download</a> : null}
         <a className={styles.upload}>
           <input type='file' onChange={this.handleChange.bind(this)} />
-          <span>{this.props.value ? 'Replace file' : 'Upload file'}</span>
+          <span>{file ? 'Replace file' : 'Upload file'}</span>
         </a>
+        {file ? <a href='javascript:;' role='button' className={styles.delete} onClick={() => this.props.onCommit(undefined)}>Delete</a> : null}
       </div>
     );
   }

src/components/FileEditor/FileEditor.scss

@@ -14,7 +14,7 @@
   padding: 6px;
 }
 
-.delete, .upload {
+.delete, .upload, .download {
   @include DosisFont;
   display: block;
   cursor: pointer;
@@ -28,13 +28,13 @@
 
 .delete {
   background: $red;
-  margin-bottom: 6px;
 }
 
-.upload {
+.upload, .download {
   position: relative;
   overflow: hidden;
   background: $blue;
+  margin-bottom: 6px;
 
   input {
     position: absolute;