Add collection actions

app/components/Actions/Actions.js

@@ -0,0 +1,34 @@
+// @flow
+import styled from 'styled-components';
+import Flex from 'shared/components/Flex';
+import { layout, color } from 'shared/styles/constants';
+
+export const Action = styled(Flex)`
+  justify-content: center;
+  align-items: center;
+  padding: 0 0 0 10px;
+
+  a {
+    color: ${color.text};
+    height: 24px;
+  }
+`;
+
+export const Separator = styled.div`
+  margin-left: 12px;
+  width: 1px;
+  height: 20px;
+  background: ${color.slateLight};
+`;
+
+const Actions = styled(Flex)`
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.9);
+  -webkit-backdrop-filter: blur(20px);
+`;
+
+export default Actions;

app/components/Actions/index.js

@@ -0,0 +1,4 @@
+// @flow
+import Actions from './Actions';
+export { Action, Separator } from './Actions';
+export default Actions;

app/scenes/Collection/Collection.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { observable } from 'mobx';
 import { observer, inject } from 'mobx-react';
-import { Link } from 'react-router-dom';
+import { withRouter, Link } from 'react-router-dom';
 import styled from 'styled-components';
 import { newDocumentUrl } from 'utils/routeHelpers';
 
@@ -12,8 +12,11 @@ import UiStore from 'stores/UiStore';
 import Collection from 'models/Collection';
 
 import Search from 'scenes/Search';
+import CollectionMenu from 'menus/CollectionMenu';
+import Actions, { Action, Separator } from 'components/Actions';
 import CenteredContent from 'components/CenteredContent';
 import CollectionIcon from 'components/Icon/CollectionIcon';
+import NewDocumentIcon from 'components/Icon/NewDocumentIcon';
 import { ListPlaceholder } from 'components/LoadingPlaceholder';
 import Button from 'components/Button';
 import HelpText from 'components/HelpText';
@@ -26,6 +29,7 @@ type Props = {
   ui: UiStore,
   documents: DocumentsStore,
   collections: CollectionsStore,
+  history: Object,
   match: Object,
 };
 
@@ -62,6 +66,14 @@ class CollectionScene extends Component {
     this.isFetching = false;
   };
 
+  onNewDocument = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+
+    if (this.collection) {
+      this.props.history.push(`${this.collection.url}/new`);
+    }
+  };
+
   renderEmptyCollection() {
     if (!this.collection) return;
 
@@ -75,11 +87,11 @@ class CollectionScene extends Component {
         <HelpText>
           Publish your first document to start building this collection.
         </HelpText>
-        <Action>
+        <Wrapper>
           <Link to={newDocumentUrl(this.collection)}>
             <Button>Create new document</Button>
           </Link>
-        </Action>
+        </Wrapper>
       </CenteredContent>
     );
   }
@@ -115,6 +127,17 @@ class CollectionScene extends Component {
                 this.collection.id
               )}
             />
+            <Actions align="center" justify="flex-end">
+              <Action>
+                <CollectionMenu collection={this.collection} />
+              </Action>
+              <Separator />
+              <Action>
+                <a onClick={this.onNewDocument}>
+                  <NewDocumentIcon />
+                </a>
+              </Action>
+            </Actions>
           </span>
         ) : (
           <ListPlaceholder count={5} />
@@ -133,8 +156,10 @@ const Heading = styled.h1`
   }
 `;
 
-const Action = styled(Flex)`
+const Wrapper = styled(Flex)`
   margin: 10px 0;
 `;
 
-export default inject('collections', 'documents', 'ui')(CollectionScene);
+export default withRouter(
+  inject('collections', 'documents', 'ui')(CollectionScene)
+);

app/scenes/Document/Document.js

@@ -8,7 +8,6 @@ import { withRouter, Prompt } from 'react-router-dom';
 import type { Location } from 'react-router-dom';
 import keydown from 'react-keydown';
 import Flex from 'shared/components/Flex';
-import { color, layout } from 'shared/styles/constants';
 import {
   collectionUrl,
   updateDocumentUrl,
@@ -33,6 +32,7 @@ import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 import NewDocumentIcon from 'components/Icon/NewDocumentIcon';
+import Actions, { Action, Separator } from 'components/Actions';
 import Search from 'scenes/Search';
 
 const DISCARD_CHANGES = `
@@ -241,49 +241,47 @@ class DocumentScene extends Component {
                 onCancel={this.onDiscard}
                 readOnly={!this.isEditing}
               />
-              <Meta
+              <Actions
                 align="center"
                 justify="flex-end"
                 readOnly={!this.isEditing}
               >
-                <Flex align="center">
+                {!isNew &&
-                  {!isNew &&
+                  !this.isEditing && <Collaborators document={document} />}
-                    !this.isEditing && <Collaborators document={document} />}
+                <Action>
-                  <HeaderAction>
+                  {this.isEditing ? (
-                    {this.isEditing ? (
+                    <SaveAction
-                      <SaveAction
+                      isSaving={this.isSaving}
-                        isSaving={this.isSaving}
+                      onClick={this.onSave.bind(this, true)}
-                        onClick={this.onSave.bind(this, true)}
+                      disabled={
-                        disabled={
+                        !(this.document && this.document.allowSave) ||
-                          !(this.document && this.document.allowSave) ||
+                        this.isSaving
-                          this.isSaving
+                      }
-                        }
+                      isNew={!!isNew}
-                        isNew={!!isNew}
+                    />
-                      />
+                  ) : (
-                    ) : (
+                    <a onClick={this.onClickEdit}>Edit</a>
-                      <a onClick={this.onClickEdit}>Edit</a>
-                    )}
-                  </HeaderAction>
-                  {this.isEditing && (
-                    <HeaderAction>
-                      <a onClick={this.onDiscard}>Discard</a>
-                    </HeaderAction>
                   )}
+                </Action>
+                {this.isEditing && (
+                  <Action>
+                    <a onClick={this.onDiscard}>Discard</a>
+                  </Action>
+                )}
+                {!this.isEditing && (
+                  <Action>
+                    <DocumentMenu document={document} />
+                  </Action>
+                )}
+                {!this.isEditing && <Separator />}
+                <Action>
                   {!this.isEditing && (
-                    <HeaderAction>
+                    <a onClick={this.onClickNew}>
-                      <DocumentMenu document={document} />
+                      <NewDocumentIcon />
-                    </HeaderAction>
+                    </a>
                   )}
-                  {!this.isEditing && <Separator />}
+                </Action>
-                  <HeaderAction>
+              </Actions>
-                    {!this.isEditing && (
-                      <a onClick={this.onClickNew}>
-                        <NewDocumentIcon />
-                      </a>
-                    )}
-                  </HeaderAction>
-                </Flex>
-              </Meta>
             </Flex>
           )}
       </Container>
@@ -291,35 +289,6 @@ class DocumentScene extends Component {
   }
 }
 
-const Separator = styled.div`
-  margin-left: 12px;
-  width: 1px;
-  height: 20px;
-  background: ${color.slateLight};
-`;
-
-const HeaderAction = styled(Flex)`
-  justify-content: center;
-  align-items: center;
-  padding: 0 0 0 10px;
-
-  a {
-    color: ${color.text};
-    height: 24px;
-  }
-`;
-
-const Meta = styled(Flex)`
-  align-items: flex-start;
-  position: fixed;
-  top: 0;
-  right: 0;
-  padding: ${layout.vpadding} ${layout.hpadding} 8px 8px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.9);
-  -webkit-backdrop-filter: blur(20px);
-`;
-
 const Container = styled(Flex)`
   position: relative;
   width: 100%;