Drag and Drop Import (#95)

* Drag and drop files into collection first pass

* Allow import of sub documents
Fix up UI styles

* Import Loading indicator

* Drag onto document to import

frontend/scenes/Document/Document.js

@@ -5,12 +5,14 @@ import styled from 'styled-components';
 import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
+import { layout } from 'styles/constants';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
 import Editor from 'components/Editor';
+import DropToImport from 'components/DropToImport';
 import { HeaderAction, SaveAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
 import PublishingInfo from 'components/PublishingInfo';
@@ -39,6 +41,7 @@ type Props = {
     newDocument?: Document,
   };
   state = {
+    isDragging: false,
     isLoading: false,
     newDocument: undefined,
   };
@@ -125,6 +128,14 @@ type Props = {
     this.props.history.goBack();
   };
 
+  onStartDragging = () => {
+    this.setState({ isDragging: true });
+  };
+
+  onStopDragging = () => {
+    this.setState({ isDragging: false });
+  };
+
   render() {
     const isNew = this.props.newDocument;
     const isEditing = this.props.match.params.edit || isNew;
@@ -133,6 +144,10 @@ type Props = {
 
     return (
       <Container column auto>
+        {this.state.isDragging &&
+          <DropHere align="center" justify="center">
+            Drop files here to import into Atlas.
+          </DropHere>}
         {titleText && <PageTitle title={titleText} />}
         {this.state.isLoading && <LoadingIndicator />}
         {isFetching &&
@@ -141,66 +156,86 @@ type Props = {
           </CenteredContent>}
         {!isFetching &&
           this.document &&
-          <PagePadding justify="center" auto>
-            <Prompt
-              when={this.document.hasPendingChanges}
-              message={DISCARD_CHANGES}
-            />
-            <DocumentContainer>
-              <Editor
-                key={this.document.id}
-                text={this.document.text}
-                onImageUploadStart={this.onImageUploadStart}
-                onImageUploadStop={this.onImageUploadStop}
-                onChange={this.onChange}
-                onSave={this.onSave}
-                onCancel={this.onCancel}
-                onStar={this.document.star}
-                onUnstar={this.document.unstar}
-                starred={this.document.starred}
-                readOnly={!isEditing}
+          <DropToImport
+            documentId={this.document.id}
+            history={this.props.history}
+            onDragEnter={this.onStartDragging}
+            onDragLeave={this.onStopDragging}
+            onDrop={this.onStopDragging}
+          >
+            <PagePadding justify="center" auto>
+              <Prompt
+                when={this.document.hasPendingChanges}
+                message={DISCARD_CHANGES}
               />
-            </DocumentContainer>
-            <Meta align="center" readOnly={!isEditing}>
-              {!isEditing &&
-                <PublishingInfo
-                  collaborators={this.document.collaborators}
-                  createdAt={this.document.createdAt}
-                  createdBy={this.document.createdBy}
-                  updatedAt={this.document.updatedAt}
-                  updatedBy={this.document.updatedBy}
-                />}
-              {!isEditing &&
-                <DocumentViews
-                  count={this.document.views}
-                  documentId={this.document.id}
-                />}
-              <Flex align="center">
-                <HeaderAction>
-                  {isEditing
-                    ? <SaveAction
-                        onClick={this.onSave.bind(this, true)}
-                        disabled={get(this.document, 'isSaving')}
-                        isNew={!!isNew}
-                      />
-                    : <a onClick={this.onClickEdit}>Edit</a>}
-                </HeaderAction>
-                {!isEditing && <Menu document={this.document} />}
-              </Flex>
-            </Meta>
-          </PagePadding>}
+              <DocumentContainer>
+                <Editor
+                  key={this.document.id}
+                  text={this.document.text}
+                  onImageUploadStart={this.onImageUploadStart}
+                  onImageUploadStop={this.onImageUploadStop}
+                  onChange={this.onChange}
+                  onSave={this.onSave}
+                  onCancel={this.onCancel}
+                  onStar={this.document.star}
+                  onUnstar={this.document.unstar}
+                  starred={this.document.starred}
+                  readOnly={!isEditing}
+                />
+              </DocumentContainer>
+              <Meta align="center" readOnly={!isEditing}>
+                {!isEditing &&
+                  <PublishingInfo
+                    collaborators={this.document.collaborators}
+                    createdAt={this.document.createdAt}
+                    createdBy={this.document.createdBy}
+                    updatedAt={this.document.updatedAt}
+                    updatedBy={this.document.updatedBy}
+                  />}
+                {!isEditing &&
+                  <DocumentViews
+                    count={this.document.views}
+                    documentId={this.document.id}
+                  />}
+                <Flex align="center">
+                  <HeaderAction>
+                    {isEditing
+                      ? <SaveAction
+                          onClick={this.onSave.bind(this, true)}
+                          disabled={get(this.document, 'isSaving')}
+                          isNew={!!isNew}
+                        />
+                      : <a onClick={this.onClickEdit}>Edit</a>}
+                  </HeaderAction>
+                  {!isEditing && <Menu document={this.document} />}
+                </Flex>
+              </Meta>
+            </PagePadding>
+          </DropToImport>}
       </Container>
     );
   }
 }
 
+const DropHere = styled(Flex)`
+  pointer-events: none;
+  position: fixed;
+  top: 0;
+  left: ${layout.sidebarWidth};
+  bottom: 0;
+  right: 0;
+  text-align: center;
+  background: rgba(255,255,255,.9);
+  z-index: 1;
+`;
+
 const Meta = styled(Flex)`
   justify-content: ${props => (props.readOnly ? 'space-between' : 'flex-end')};
   align-items: flex-start;
   width: 100%;
   position: absolute;
   top: 0;
-  padding: 10px 20px;
+  padding: ${layout.padding};
 `;
 
 const Container = styled(Flex)`