Unify header actions

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;

src/components/DropdownMenu/components/MoreIcon/MoreIcon.scss

@@ -0,0 +1,4 @@
+.icon {
+  width: 21px;
+  margin-top: 6px;
+}

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>
+<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>

src/components/DropdownMenu/components/MoreIcon/index.js

@@ -0,0 +1,2 @@
+import MoreIcon from './MoreIcon';
+export default MoreIcon;

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,
 };

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;
     }

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>

src/scenes/Dashboard/Dashboard.scss

@@ -1,4 +0,0 @@
-.moreIcon {
-  width: 21px;
-  margin-top: 6px;
-}

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>