From 5c7a182897894d3dc5d33fcbbf9f40855dd17933 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 30 Jun 2018 14:01:21 -0700
Subject: [PATCH] Added: New document icon / menu to Dashboard screen

---
 .../DropdownMenu/DropdownMenuItem.js          | 19 +++++--
 app/menus/NewDocumentMenu.js                  | 53 +++++++++++++++++++
 app/scenes/Dashboard/Dashboard.js             | 44 +++++++++------
 3 files changed, 95 insertions(+), 21 deletions(-)
 create mode 100644 app/menus/NewDocumentMenu.js

diff --git a/app/components/DropdownMenu/DropdownMenuItem.js b/app/components/DropdownMenu/DropdownMenuItem.js
index 6e2030e6b..662d80274 100644
--- a/app/components/DropdownMenu/DropdownMenuItem.js
+++ b/app/components/DropdownMenu/DropdownMenuItem.js
@@ -5,6 +5,7 @@ import styled from 'styled-components';
 type Props = {
   onClick?: (SyntheticEvent<*>) => *,
   children?: React.Node,
+  disabled?: boolean,
 };
 
 const DropdownMenuItem = ({ onClick, children, ...rest }: Props) => {
@@ -21,24 +22,32 @@ const MenuItem = styled.a`
   padding: 6px 12px;
   height: 32px;
 
-  color: ${props => props.theme.slateDark};
+  color: ${props =>
+    props.disabled ? props.theme.slate : props.theme.slateDark};
   justify-content: left;
   align-items: center;
-  cursor: pointer;
   font-size: 15px;
+  cursor: default;
 
   svg {
     margin-right: 8px;
   }
 
+  ${props =>
+    props.disabled
+      ? ''
+      : `
+
   &:hover {
-    color: ${props => props.theme.white};
-    background: ${props => props.theme.primary};
+    color: ${props.theme.white};
+    background: ${props.theme.primary};
+    cursor: pointer;
 
     svg {
-      fill: ${props => props.theme.white};
+      fill: ${props.theme.white};
     }
   }
+  `};
 `;
 
 export default DropdownMenuItem;
diff --git a/app/menus/NewDocumentMenu.js b/app/menus/NewDocumentMenu.js
new file mode 100644
index 000000000..22c607bac
--- /dev/null
+++ b/app/menus/NewDocumentMenu.js
@@ -0,0 +1,53 @@
+// @flow
+import * as React from 'react';
+import { withRouter } from 'react-router-dom';
+import { inject } from 'mobx-react';
+import { MoreIcon, CollectionIcon } from 'outline-icons';
+
+import { newDocumentUrl } from 'utils/routeHelpers';
+import CollectionsStore from 'stores/CollectionsStore';
+import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
+
+type Props = {
+  label?: React.Node,
+  history: Object,
+  collections: CollectionsStore,
+};
+
+class NewDocumentMenu extends React.Component<Props> {
+  handleNewDocument = collection => {
+    this.props.history.push(newDocumentUrl(collection));
+  };
+
+  onOpen = () => {
+    const { collections } = this.props;
+
+    if (collections.orderedData.length === 1) {
+      this.handleNewDocument(collections.orderedData[0]);
+    }
+  };
+
+  render() {
+    const { collections, label, history, ...rest } = this.props;
+
+    return (
+      <DropdownMenu
+        label={label || <MoreIcon />}
+        onOpen={this.onOpen}
+        {...rest}
+      >
+        <DropdownMenuItem disabled>Choose a collection…</DropdownMenuItem>
+        {collections.orderedData.map(collection => (
+          <DropdownMenuItem
+            key={collection.id}
+            onClick={() => this.handleNewDocument(collection)}
+          >
+            <CollectionIcon color={collection.color} /> {collection.name}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenu>
+    );
+  }
+}
+
+export default withRouter(inject('collections')(NewDocumentMenu));
diff --git a/app/scenes/Dashboard/Dashboard.js b/app/scenes/Dashboard/Dashboard.js
index a641f2d7d..47eb2f345 100644
--- a/app/scenes/Dashboard/Dashboard.js
+++ b/app/scenes/Dashboard/Dashboard.js
@@ -2,8 +2,11 @@
 import * as React from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
+import { NewDocumentIcon } from 'outline-icons';
 
+import NewDocumentMenu from 'menus/NewDocumentMenu';
 import DocumentsStore from 'stores/DocumentsStore';
+import Actions, { Action } from 'components/Actions';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
 import PageTitle from 'components/PageTitle';
@@ -42,22 +45,31 @@ class Dashboard extends React.Component<Props> {
         <PageTitle title="Home" />
         <h1>Home</h1>
         {showContent ? (
-          <span>
-            {hasRecentlyViewed && [
-              <Subheading key="viewed">Recently viewed</Subheading>,
-              <DocumentList
-                key="viewedDocuments"
-                documents={documents.recentlyViewed}
-              />,
-            ]}
-            {hasRecentlyEdited && [
-              <Subheading key="edited">Recently edited</Subheading>,
-              <DocumentList
-                key="editedDocuments"
-                documents={documents.recentlyEdited}
-              />,
-            ]}
-          </span>
+          <React.Fragment>
+            {hasRecentlyViewed && (
+              <React.Fragment>
+                <Subheading key="viewed">Recently viewed</Subheading>
+                <DocumentList
+                  key="viewedDocuments"
+                  documents={documents.recentlyViewed}
+                />
+              </React.Fragment>
+            )}
+            {hasRecentlyEdited && (
+              <React.Fragment>
+                <Subheading key="edited">Recently edited</Subheading>
+                <DocumentList
+                  key="editedDocuments"
+                  documents={documents.recentlyEdited}
+                />
+              </React.Fragment>
+            )}
+            <Actions align="center" justify="flex-end">
+              <Action>
+                <NewDocumentMenu label={<NewDocumentIcon />} />
+              </Action>
+            </Actions>
+          </React.Fragment>
         ) : (
           <ListPlaceholder count={5} />
         )}