Merge pull request #272 from jorilallo/issue-267

Various sidebar issues

frontend/components/DropdownMenu/DropdownMenu.js

@@ -9,16 +9,16 @@ import Flex from 'components/Flex';
 import { color } from 'styles/constants';
 import { fadeAndScaleIn } from 'styles/animations';
 
-type DropdownMenuProps = {
+type Props = {
   label: React.Element<any>,
-  onShow?: Function,
-  onClose?: Function,
+  onShow?: () => void,
+  onClose?: () => void,
   children?: React.Element<any>,
   style?: Object,
 };
 
 @observer class DropdownMenu extends React.Component {
-  props: DropdownMenuProps;
+  props: Props;
   actionRef: Object;
   @observable open: boolean = false;
   @observable top: number;
@@ -47,18 +47,14 @@ type DropdownMenuProps = {
   };
 
   render() {
-    const openAction = (
-      <Label
-        onClick={this.handleClick}
-        innerRef={ref => (this.actionRef = ref)}
-      >
-        {this.props.label}
-      </Label>
-    );
-
     return (
       <div>
-        {openAction}
+        <Label
+          onClick={this.handleClick}
+          innerRef={ref => (this.actionRef = ref)}
+        >
+          {this.props.label}
+        </Label>
         <Portal
           closeOnEsc
           closeOnOutsideClick
@@ -66,6 +62,7 @@ type DropdownMenuProps = {
           onClose={this.handleClose}
         >
           <Menu
+            onClick={this.handleClose}
             style={this.props.style}
             left={this.left}
             top={this.top}

frontend/components/DropdownMenu/DropdownMenuItem.js

@@ -7,7 +7,7 @@ const DropdownMenuItem = ({
   onClick,
   children,
 }: {
-  onClick?: Function,
+  onClick?: () => void,
   children?: React.Element<any>,
 }) => {
   return (

frontend/components/Layout/components/SidebarCollections.js

@@ -24,16 +24,11 @@ type Props = {
   ui: UiStore,
 };
 
-const activeStyle = {
-  color: color.black,
-  background: color.slateDark,
-};
-
 @observer class SidebarCollections extends React.PureComponent {
   props: Props;
 
   render() {
-    const { collections, activeDocument, ui } = this.props;
+    const { history, collections, activeDocument, ui } = this.props;
 
     return (
       <Flex column>
@@ -41,6 +36,7 @@ const activeStyle = {
         {collections.data.map(collection => (
           <CollectionLink
             key={collection.id}
+            history={history}
             collection={collection}
             activeDocument={activeDocument}
             ui={ui}
@@ -66,13 +62,14 @@ const activeStyle = {
   };
 
   render() {
-    const { collection, activeDocument, ui } = this.props;
+    const { history, collection, activeDocument, ui } = this.props;
+
     return (
       <DropToImport
         key={collection.id}
         history={history}
         collectionId={collection.id}
-        activeStyle={activeStyle}
+        activeClassName="activeDropZone"
         onMouseEnter={this.handleHover}
         onMouseLeave={this.handleBlur}
       >
@@ -83,6 +80,7 @@ const activeStyle = {
             {(this.isHovering || this.menuOpen) &&
               <CollectionAction>
                 <CollectionMenu
+                  history={history}
                   collection={collection}
                   onShow={() => (this.menuOpen = true)}
                   onClose={() => (this.menuOpen = false)}
@@ -93,6 +91,7 @@ const activeStyle = {
             collection.documents.map(document => (
               <DocumentLink
                 key={document.id}
+                history={history}
                 document={document}
                 activeDocument={activeDocument}
                 depth={0}
@@ -106,12 +105,13 @@ const activeStyle = {
 
 type DocumentLinkProps = {
   document: NavigationNode,
+  history: Object,
   activeDocument: ?Document,
   depth: number,
 };
 
 const DocumentLink = observer((props: DocumentLinkProps) => {
-  const { document, activeDocument, depth } = props;
+  const { history, document, activeDocument, depth } = props;
   const canDropToImport = depth === 0;
 
   return (
@@ -120,7 +120,7 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
         <DropToImport
           history={history}
           documentId={document.id}
-          activeStyle={activeStyle}
+          activeClassName="activeDropZone"
         >
           <SidebarLink to={document.url}>{document.title}</SidebarLink>
         </DropToImport>}
@@ -137,6 +137,7 @@ const DocumentLink = observer((props: DocumentLinkProps) => {
             document.children.map(childDocument => (
               <DocumentLink
                 key={childDocument.id}
+                history={history}
                 document={childDocument}
                 depth={depth + 1}
               />

frontend/styles/base.css

@@ -129,3 +129,11 @@ hr {
   padding: 1em;
   border-radius: 0.25em;
 }
+
+.activeDropZone {
+  background: #4E5C6E;
+}
+
+.activeDropZone a {
+  color: #FFF !important;
+}