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/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -3,23 +3,37 @@ import React from 'react';
 import { observer, inject } from 'mobx-react';
 import Flex from 'components/Flex';
 import styled from 'styled-components';
+import { layout } from 'styles/constants';
 
 import SidebarLink from '../SidebarLink';
+import DropToImport from 'components/DropToImport';
 
 import CollectionsStore from 'stores/CollectionsStore';
 
 type Props = {
+  history: Object,
   collections: CollectionsStore,
 };
 
-const SidebarCollectionList = observer(({ collections }: Props) => {
+const activeStyle = {
+  color: '#000',
+  background: '#E1E1E1',
+};
+
+const SidebarCollectionList = observer(({ history, collections }: Props) => {
   return (
     <Flex column>
       <Header>Collections</Header>
       {collections.data.map(collection => (
-        <SidebarLink key={collection.id} to={collection.url}>
-          {collection.name}
-        </SidebarLink>
+        <DropToImport
+          history={history}
+          collectionId={collection.id}
+          activeStyle={activeStyle}
+        >
+          <SidebarLink key={collection.id} to={collection.url}>
+            {collection.name}
+          </SidebarLink>
+        </DropToImport>
       ))}
     </Flex>
   );
@@ -31,6 +45,7 @@ const Header = styled(Flex)`
   text-transform: uppercase;
   color: #9FA6AB;
   letter-spacing: 0.04em;
+  padding: 0 ${layout.hpadding};
 `;
 
 export default inject('collections')(SidebarCollectionList);