Merge master

frontend/components/Layout/components/SidebarCollection/SidebarCollection.js

@@ -1,35 +1,51 @@
 // @flow
 import React from 'react';
-import { observer } from 'mobx-react';
-import { Flex } from 'reflexbox';
+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 Collection from 'models/Collection';
 import Document from 'models/Document';
+import type { NavigationNode } from 'types';
 
 type Props = {
   collection: ?Collection,
   document: ?Document,
+  history: Object,
+};
+
+const activeStyle = {
+  color: '#000',
+  background: '#E1E1E1',
 };
 
 class SidebarCollection extends React.Component {
   props: Props;
 
-  renderDocuments(documentList) {
-    const { document } = this.props;
+  renderDocuments(documentList: Array<NavigationNode>, depth: number = 0) {
+    const { document, history } = this.props;
+    const canDropToImport = depth === 0;
 
     if (document) {
       return documentList.map(doc => (
         <Flex column key={doc.id}>
-          <SidebarLink key={doc.id} to={doc.url}>
-            {doc.title}
-          </SidebarLink>
+          {canDropToImport &&
+            <DropToImport
+              history={history}
+              documentId={doc.id}
+              activeStyle={activeStyle}
+            >
+              <SidebarLink to={doc.url}>{doc.title}</SidebarLink>
+            </DropToImport>}
+          {!canDropToImport &&
+            <SidebarLink to={doc.url}>{doc.title}</SidebarLink>}
+
           {(document.pathToDocument.includes(doc.id) ||
             document.id === doc.id) &&
-            <Children>
-              {doc.children && this.renderDocuments(doc.children)}
+            <Children column>
+              {doc.children && this.renderDocuments(doc.children, depth + 1)}
             </Children>}
         </Flex>
       ));
@@ -57,10 +73,11 @@ const Header = styled(Flex)`
   text-transform: uppercase;
   color: #9FA6AB;
   letter-spacing: 0.04em;
+  padding: 0 ${layout.hpadding};
 `;
 
 const Children = styled(Flex)`
   margin-left: 20px;
 `;
 
-export default observer(SidebarCollection);
+export default SidebarCollection;

frontend/components/Layout/components/SidebarCollectionList/SidebarCollectionList.js

@@ -1,25 +1,39 @@
 // @flow
 import React from 'react';
 import { observer, inject } from 'mobx-react';
-import { Flex } from 'reflexbox';
+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.entryUrl}>
-          {collection.name}
-        </SidebarLink>
+        <DropToImport
+          history={history}
+          collectionId={collection.id}
+          activeStyle={activeStyle}
+        >
+          <SidebarLink key={collection.id} to={collection.entryUrl}>
+            {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);

frontend/components/Layout/components/SidebarLink/SidebarLink.js

@@ -1,35 +1,26 @@
 // @flow
 import React from 'react';
-import { observer } from 'mobx-react';
-import { NavLink, withRouter } from 'react-router-dom';
-import { Flex } from 'reflexbox';
+import { NavLink } from 'react-router-dom';
+import { layout, color } from 'styles/constants';
+import { darken } from 'polished';
 import styled from 'styled-components';
 
 const activeStyle = {
   color: '#000000',
 };
 
-@observer class SidebarLink extends React.Component {
-  shouldComponentUpdate(nextProps) {
-    // Navlink is having issues updating, forcing update on URL changes
-    return this.props.match !== nextProps.match;
-  }
-
-  render() {
-    return (
-      <LinkContainer>
-        <NavLink exact {...this.props} activeStyle={activeStyle} />
-      </LinkContainer>
-    );
-  }
+function SidebarLink(props: Object) {
+  return <StyledNavLink exact {...props} activeStyle={activeStyle} />;
 }
 
-const LinkContainer = styled(Flex)`
-  padding: 5px 0;
-  
-  a {
-    color: #848484;
+const StyledNavLink = styled(NavLink)`
+  display: block;
+  padding: 5px ${layout.hpadding};
+  color: ${color.slateDark};
+
+  &:hover {
+    color: ${darken(0.1, color.slateDark)};
   }
 `;
 
-export default withRouter(SidebarLink);
+export default SidebarLink;