From 6fb9a491c3f4ad97abb0061e15c7707127a12108 Mon Sep 17 00:00:00 2001
From: Jori Lallo <jtlallo@gmail.com>
Date: Sun, 10 Jul 2016 23:14:27 -0700
Subject: [PATCH] Unify header actions

---
 .../components/MoreIcon/MoreIcon.js           | 14 +++++++++++
 .../components/MoreIcon/MoreIcon.scss         |  4 ++++
 .../components/MoreIcon/assets}/more.svg      |  2 +-
 .../DropdownMenu/components/MoreIcon/index.js |  2 ++
 src/components/DropdownMenu/index.js          |  2 ++
 src/scenes/Atlas/Atlas.js                     | 24 ++++++++++++++-----
 src/scenes/Dashboard/Dashboard.js             |  9 ++-----
 src/scenes/Dashboard/Dashboard.scss           |  4 ----
 src/scenes/DocumentScene/DocumentScene.js     | 15 ++++++------
 9 files changed, 51 insertions(+), 25 deletions(-)
 create mode 100644 src/components/DropdownMenu/components/MoreIcon/MoreIcon.js
 create mode 100644 src/components/DropdownMenu/components/MoreIcon/MoreIcon.scss
 rename src/{assets/icons => components/DropdownMenu/components/MoreIcon/assets}/more.svg (94%)
 create mode 100644 src/components/DropdownMenu/components/MoreIcon/index.js

diff --git a/src/components/DropdownMenu/components/MoreIcon/MoreIcon.js b/src/components/DropdownMenu/components/MoreIcon/MoreIcon.js
new file mode 100644
index 00000000..657dcbb5
--- /dev/null
+++ b/src/components/DropdownMenu/components/MoreIcon/MoreIcon.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import styles from './MoreIcon.scss';
+
+const MoreIcon = (props) => {
+  return (
+    <img
+      src={ require("./assets/more.svg") }
+      className={ styles.icon }
+    />
+  );
+};
+
+export default MoreIcon;
diff --git a/src/components/DropdownMenu/components/MoreIcon/MoreIcon.scss b/src/components/DropdownMenu/components/MoreIcon/MoreIcon.scss
new file mode 100644
index 00000000..32884076
--- /dev/null
+++ b/src/components/DropdownMenu/components/MoreIcon/MoreIcon.scss
@@ -0,0 +1,4 @@
+.icon {
+  width: 21px;
+  margin-top: 6px;
+}
diff --git a/src/assets/icons/more.svg b/src/components/DropdownMenu/components/MoreIcon/assets/more.svg
similarity index 94%
rename from src/assets/icons/more.svg
rename to src/components/DropdownMenu/components/MoreIcon/assets/more.svg
index 57e2d41b..f6e12e97 100644
--- a/src/assets/icons/more.svg
+++ b/src/components/DropdownMenu/components/MoreIcon/assets/more.svg
@@ -1 +1 @@
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>
\ No newline at end of file
+<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" x="0px" y="0px" viewBox="0 0 100 125"><g transform="translate(0,-952.36218)"><path style="color:#000000;enable-background:accumulate;" d="M 17 41 C 12.029437 41 8 45.029437 8 50 C 8 54.970563 12.029437 59 17 59 C 21.970563 59 26 54.970563 26 50 C 26 45.029437 21.970563 41 17 41 z M 50 41 C 45.029437 41 41 45.029437 41 50 C 41 54.970563 45.029437 59 50 59 C 54.970563 59 59 54.970563 59 50 C 59 45.029437 54.970563 41 50 41 z M 83 41 C 78.029437 41 74 45.029437 74 50 C 74 54.970563 78.029437 59 83 59 C 87.970563 59 92 54.970563 92 50 C 92 45.029437 87.970563 41 83 41 z " transform="translate(0,952.36218)" fill="#000000" stroke="none" marker="none" visibility="visible" display="inline" overflow="visible"/></g></svg>
diff --git a/src/components/DropdownMenu/components/MoreIcon/index.js b/src/components/DropdownMenu/components/MoreIcon/index.js
new file mode 100644
index 00000000..4f33b485
--- /dev/null
+++ b/src/components/DropdownMenu/components/MoreIcon/index.js
@@ -0,0 +1,2 @@
+import MoreIcon from './MoreIcon';
+export default MoreIcon;
diff --git a/src/components/DropdownMenu/index.js b/src/components/DropdownMenu/index.js
index 934329f8..d33c25bc 100644
--- a/src/components/DropdownMenu/index.js
+++ b/src/components/DropdownMenu/index.js
@@ -1,5 +1,7 @@
 import DropdownMenu, { MenuItem } from './DropdownMenu';
+import MoreIcon from './components/MoreIcon';
 export default DropdownMenu;
 export {
   MenuItem,
+  MoreIcon,
 };
diff --git a/src/scenes/Atlas/Atlas.js b/src/scenes/Atlas/Atlas.js
index d689841a..3ff86e63 100644
--- a/src/scenes/Atlas/Atlas.js
+++ b/src/scenes/Atlas/Atlas.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
-import Link from 'react-router/lib/Link';
-import History from 'utils/History';
+import { Link, browserHistory } from 'react-router';
 
 import store from './AtlasStore';
 
@@ -10,6 +9,8 @@ import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import DocumentList from 'components/DocumentList';
 import Divider from 'components/Divider';
+import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
+import Flex from 'components/Flex';
 
 import styles from './Atlas.scss';
 
@@ -21,11 +22,16 @@ class Atlas extends React.Component {
 
       // Forward directly to root document
       if (data.type === 'atlas') {
-        History.replace(data.navigationTree.url);
+        browserHistory.replace(data.navigationTree.url);
       }
     })
   }
 
+  onClickCreate = (event) => {
+    event.preventDefault();
+    browserHistory.push(`/atlas/${store.atlas.id}/new`);
+  }
+
   render() {
     const atlas = store.atlas;
 
@@ -34,9 +40,15 @@ class Atlas extends React.Component {
     let titleText;
 
     if (atlas) {
-      actions = <HeaderAction>
-          <Link to={ `/atlas/${atlas.id}/new` }>New document</Link>
-        </HeaderAction>;
+      actions = (
+        <Flex direction="row">
+          <DropdownMenu label={ <MoreIcon /> } >
+            <MenuItem onClick={ this.onClickCreate }>
+              New document
+            </MenuItem>
+          </DropdownMenu>
+        </Flex>
+      );
       title = <Title>{ atlas.name }</Title>;
       titleText = atlas.name;
     }
diff --git a/src/scenes/Dashboard/Dashboard.js b/src/scenes/Dashboard/Dashboard.js
index e8d80101..eed28a80 100644
--- a/src/scenes/Dashboard/Dashboard.js
+++ b/src/scenes/Dashboard/Dashboard.js
@@ -8,7 +8,7 @@ import Layout from 'components/Layout';
 import AtlasPreview from 'components/AtlasPreview';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
-import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
+import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
 import FullscreenField from 'components/FullscreenField';
 
 import styles from './Dashboard.scss';
@@ -36,12 +36,7 @@ class Dashboard extends React.Component {
   render() {
     const actions = (
       <Flex direction="row">
-        <DropdownMenu label={
-          <img
-            src={ require("../../assets/icons/more.svg") }
-            className={ styles.moreIcon }
-          />
-        } >
+        <DropdownMenu label={ <MoreIcon /> } >
           <MenuItem onClick={ this.onClickNewAtlas }>
             New Atlas
           </MenuItem>
diff --git a/src/scenes/Dashboard/Dashboard.scss b/src/scenes/Dashboard/Dashboard.scss
index d58a0af4..e69de29b 100644
--- a/src/scenes/Dashboard/Dashboard.scss
+++ b/src/scenes/Dashboard/Dashboard.scss
@@ -1,4 +0,0 @@
-.moreIcon {
-  width: 21px;
-  margin-top: 6px;
-}
\ No newline at end of file
diff --git a/src/scenes/DocumentScene/DocumentScene.js b/src/scenes/DocumentScene/DocumentScene.js
index cfbf5f33..58cca46f 100644
--- a/src/scenes/DocumentScene/DocumentScene.js
+++ b/src/scenes/DocumentScene/DocumentScene.js
@@ -11,7 +11,7 @@ import Layout, { HeaderAction } from 'components/Layout';
 import AtlasPreviewLoading from 'components/AtlasPreviewLoading';
 import CenteredContent from 'components/CenteredContent';
 import Document from 'components/Document';
-import DropdownMenu, { MenuItem } from 'components/DropdownMenu';
+import DropdownMenu, { MenuItem, MoreIcon } from 'components/DropdownMenu';
 import Flex from 'components/Flex';
 import Tree from 'components/Tree';
 
@@ -65,6 +65,11 @@ class DocumentScene extends React.Component {
     browserHistory.push(url);
   }
 
+  onCreate = () => {
+    const url = `/documents/${this.store.document.id}/new`;
+    browserHistory.push(url);
+  }
+
   onDelete = () => {
     let msg;
     if (this.store.document.atlas.type === 'atlas') {
@@ -96,12 +101,8 @@ class DocumentScene extends React.Component {
     if (doc) {
       actions = (
         <div className={ styles.actions }>
-          { this.store.isAtlas ? (
-            <HeaderAction>
-              <Link to={ `/documents/${doc.id}/new` }>New document</Link>
-            </HeaderAction>
-          ) : null }
-          <DropdownMenu label="More">
+          <DropdownMenu label={ <MoreIcon /> }>
+            { this.store.isAtlas && <MenuItem onClick={ this.onCreate }>New document</MenuItem> }
             <MenuItem onClick={ this.onEdit }>Edit</MenuItem>
             { allowDelete && <MenuItem onClick={ this.onDelete }>Delete</MenuItem> }
           </DropdownMenu>