From 22629ac09dbb54be2657ef16dbc5979a7093fd56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= <tim@ascribe.io>
Date: Tue, 7 Jul 2015 18:07:12 +0200
Subject: [PATCH] adjust register piece form

---
 js/components/ascribe_forms/property.js       | 11 ++--
 .../ascribe_uploader/file_drag_and_drop.js    |  9 +++-
 .../file_drag_and_drop_dialog.js              | 37 +++++++++++++
 .../file_drag_and_drop_preview.js             |  6 ++-
 js/components/register_piece.js               | 23 ++++----
 sass/ascribe_login.scss                       |  4 ++
 sass/ascribe_uploader.scss                    | 53 ++++++++-----------
 7 files changed, 92 insertions(+), 51 deletions(-)
 create mode 100644 js/components/ascribe_uploader/file_drag_and_drop_dialog.js

diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js
index c4238675..df3df761 100644
--- a/js/components/ascribe_forms/property.js
+++ b/js/components/ascribe_forms/property.js
@@ -17,13 +17,14 @@ let Property = React.createClass({
             React.PropTypes.element
         ]),
         footer: React.PropTypes.element,
-        handleChange: React.PropTypes.func
+        handleChange: React.PropTypes.func,
+        ignoreFocus: React.PropTypes.bool
     },
 
     getDefaultProps() {
         return {
             editable: true,
-            hidden: false,
+            hidden: false
         };
     },
 
@@ -62,6 +63,9 @@ let Property = React.createClass({
         this.setState({value: event.target.value});
     },
     handleFocus() {
+        if(this.props.ignoreFocus) {
+            return;
+        }
         this.refs.input.getDOMNode().focus();
         this.setState({
             isFocused: true
@@ -134,7 +138,8 @@ let Property = React.createClass({
         return (
             <div
                 className={'ascribe-settings-wrapper ' + this.getClassName()}
-                onClick={this.handleFocus} onfocus={this.handleFocus}>
+                onClick={this.handleFocus}
+                onfocus={this.handleFocus}>
                 <OverlayTrigger
                     delay={500}
                     placement="top"
diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js
index 6620c0f1..b729e841 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop.js
@@ -1,6 +1,8 @@
 'use strict';
 
 import React from 'react';
+
+import FileDragAndDropDialog from './file_drag_and_drop_dialog';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 
@@ -140,7 +142,6 @@ let FileDragAndDrop = React.createClass({
         return (
             <div
                 className={className}
-                onClick={this.handleOnClick}
                 onDragStart={this.handleDragStart}
                 onDrag={this.handleDrop}
                 onDragEnter={this.handleDragEnter}
@@ -148,7 +149,11 @@ let FileDragAndDrop = React.createClass({
                 onDragOver={this.handleDragOver}
                 onDrop={this.handleDrop}
                 onDragEnd={this.handleDragEnd}>
-                    {hasFiles ? null : this.props.multiple ? <span className="file-drag-and-drop-dialog">Click or drag to add files</span> : <span className="file-drag-and-drop-dialog">Click or drag to add a file</span>}
+                    <FileDragAndDropDialog 
+                        multipleFiles={this.props.multiple}
+                        hasFiles={hasFiles}
+                        onClick={this.handleOnClick}
+                    />
                     <FileDragAndDropPreviewIterator
                         files={this.props.filesToUpload}
                         handleDeleteFile={this.handleDeleteFile}
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_dialog.js b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
new file mode 100644
index 00000000..62ada865
--- /dev/null
+++ b/js/components/ascribe_uploader/file_drag_and_drop_dialog.js
@@ -0,0 +1,37 @@
+'use strict';
+
+import React from 'react';
+
+let FileDragAndDropDialog = React.createClass({
+    propTypes: {
+        hasFiles: React.PropTypes.bool,
+        multipleFiles: React.PropTypes.bool,
+        onClick: React.PropTypes.func
+    },
+
+    render() {
+        if(this.props.hasFiles) {
+            return null;
+        } else {
+            if(this.props.multipleFiles) {
+                return (
+                    <span className="file-drag-and-drop-dialog">Click or drag to add files</span>
+                );
+            } else {
+                return (
+                    <span className="file-drag-and-drop-dialog">
+                        <p>Drag a file here</p>
+                        <p>or</p>
+                        <button
+                            className="btn btn-default"
+                            onClick={this.props.onClick}>
+                                choose a file to upload
+                        </button>
+                    </span>
+                );
+            }
+        }
+    }
+});
+
+export default FileDragAndDropDialog;
\ No newline at end of file
diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview.js b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
index fd392767..33f07383 100644
--- a/js/components/ascribe_uploader/file_drag_and_drop_preview.js
+++ b/js/components/ascribe_uploader/file_drag_and_drop_preview.js
@@ -72,7 +72,11 @@ let FileDragAndDropPreview = React.createClass({
 
         if(this.props.areAssetsEditable) {
            removeBtn = (<div className="delete-file">
-                            <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
+                            <span 
+                                className="glyphicon glyphicon-remove text-center"
+                                aria-hidden="true"
+                                title="Remove file"
+                                onClick={this.handleDeleteFile}/>
                         </div>);
         }
 
diff --git a/js/components/register_piece.js b/js/components/register_piece.js
index 45fe2aba..4ca74ea3 100644
--- a/js/components/register_piece.js
+++ b/js/components/register_piece.js
@@ -165,19 +165,8 @@ let RegisterPiece = React.createClass( {
                     onClick={this.changeSlide}
                     onFocus={this.changeSlide}>
                     <Row className="no-margin">
-                        <Col sm={4}>
-                            <div style={{'marginTop': 0, 'marginLeft': '1em'}}>
-                                <FileUploader
-                                    submitKey={this.submitKey}
-                                    setIsUploadReady={this.setIsUploadReady}
-                                    isReadyForFormSubmission={this.isReadyForFormSubmission}
-                                    editable={this.state.isFineUploaderEditable}/>
-                            </div>
-                            <br />
-                            <br />
-                        </Col>
-                        <Col sm={8}>
-                            <h3 style={{'marginTop': 0, 'marginLeft': '1em'}} onClick={this.changePage}>Lock down title</h3>
+                        <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
+                            <h3 style={{'marginTop': 0, 'marginLeft': '1em'}}>Register your work</h3>
                             <Form
                                 ref='form'
                                 url={apiUrls.pieces_list}
@@ -194,7 +183,13 @@ let RegisterPiece = React.createClass( {
                                         <img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
                                     </button>
                                     }>
-
+                                <Property>
+                                    <FileUploader
+                                        submitKey={this.submitKey}
+                                        setIsUploadReady={this.setIsUploadReady}
+                                        isReadyForFormSubmission={this.isReadyForFormSubmission}
+                                        editable={this.state.isFineUploaderEditable}/>
+                                </Property>
                                 <Property
                                     name='artist_name'
                                     label="Artist Name">
diff --git a/sass/ascribe_login.scss b/sass/ascribe_login.scss
index 392cde7f..9ff2857f 100644
--- a/sass/ascribe_login.scss
+++ b/sass/ascribe_login.scss
@@ -23,6 +23,10 @@ $break-small: 764px;
     background-color: rgba(2, 182, 163, 0.6);
     border: none;
   }
+
+  &[disabled] {
+    opacity: .3;
+  }
 }
 
 .ascribe-btn-login-spinner{
diff --git a/sass/ascribe_uploader.scss b/sass/ascribe_uploader.scss
index 062c0b49..debdf51a 100644
--- a/sass/ascribe_uploader.scss
+++ b/sass/ascribe_uploader.scss
@@ -1,7 +1,6 @@
 .file-drag-and-drop {
     display: block;
-    outline: 1px dashed #616161;
-    cursor: pointer;
+    outline: 1px dashed #9E9E9E;
     vertical-align: middle;
     text-align: center;
     height: auto;
@@ -9,43 +8,28 @@
     overflow: auto;
     margin-top: 1em;
 
-    padding: 3em;
+    cursor: default !important;
+
+    padding: 1.5em 1.5em 1.5em 0;
 }
 
 .inactive-dropzone {
     cursor: default !important;
+    background-color: rgba(0,0,0,0) !important;
+    outline: 0;
 }
 
-.inactive-dropzone:hover {
-    background-color: #FAFAFA !important;
-}
+.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
+    font-size: 1.5em !important;
 
-.file-drag-and-drop:hover {
-    background-color: rgba(72, 218, 203, 0.2);
-}
-
-.file-drag-and-drop .file-drag-and-drop-dialog {
-    font-size: 1.25em !important;
-
-    margin-top: 1em;
-
-    &::before {
-        content: ' ';
-        display: inline-block;
-        vertical-align: middle; /* vertical alignment of the inline element */
-        height: 100%;
-    }
-}
-
-.has-files {
-    text-align: left;
-    padding: 4% 0 0 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
 }
 
 .file-drag-and-drop-position {
     position: relative;
     display: inline-block;
-    margin: 0 0 4% 4%;
     float:left;
 
     .delete-file {
@@ -64,14 +48,21 @@
 
         span {
             color: white;
+            top: 1;
+            left: 0;
+            font-size: .8em;
+
+            &:hover {
+                color: $brand-danger;
+            }
         }
     }
 }
 
 .file-drag-and-drop-preview-table-wrapper {
     display: table;
-    height:64px;
-    width:74px;
+    height:74px;
+    width:84px;
 }
 
 .file-drag-and-drop-preview {
@@ -83,8 +74,8 @@
 
 .file-drag-and-drop-preview-image {
     display: table;
-    height:74px;
-    width:74px;
+    height:84px;
+    width:84px;
     overflow:hidden;
     border: 1px solid #616161;
     text-align: center;