Merge branch 'master' into dashboard-improves

frontend/scenes/Document/Document.js

@@ -6,18 +6,18 @@ import { observer, inject } from 'mobx-react';
 import { withRouter, Prompt } from 'react-router';
 import Flex from 'components/Flex';
 import { layout } from 'styles/constants';
-import invariant from 'invariant';
 
 import Document from 'models/Document';
 import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import Menu from './components/Menu';
+import SaveAction from './components/SaveAction';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
 import Editor from 'components/Editor';
 import DropToImport from 'components/DropToImport';
-import { HeaderAction, SaveAction } from 'components/Layout';
+import { HeaderAction } from 'components/Layout';
 import LoadingIndicator from 'components/LoadingIndicator';
-import PublishingInfo from 'components/PublishingInfo';
+import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
 import PageTitle from 'components/PageTitle';
 
@@ -44,6 +44,7 @@ type Props = {
   state = {
     isDragging: false,
     isLoading: false,
+    isSaving: false,
     newDocument: undefined,
     showAsSaved: false,
   };
@@ -108,7 +109,7 @@ type Props = {
     let document = this.document;
 
     if (!document) return;
-    this.setState({ isLoading: true });
+    this.setState({ isLoading: true, isSaving: true });
     document = await document.save();
     this.setState({ isLoading: false });
 
@@ -120,7 +121,7 @@ type Props = {
   };
 
   showAsSaved() {
-    this.setState({ showAsSaved: true });
+    this.setState({ showAsSaved: true, isSaving: false });
     this.savedTimeout = setTimeout(
       () => this.setState({ showAsSaved: false }),
       2000
@@ -152,20 +153,6 @@ type Props = {
     this.setState({ isDragging: false });
   };
 
-  renderHeading(isEditing: boolean) {
-    invariant(this.document, 'document not available');
-    if (this.props.newDocument) return;
-
-    return (
-      <InfoWrapper visible={!isEditing}>
-        <PublishingInfo
-          collaborators={this.document.collaborators}
-          document={this.document}
-        />
-      </InfoWrapper>
-    );
-  }
-
   render() {
     const isNew = this.props.newDocument;
     const isEditing = !!this.props.match.params.edit || isNew;
@@ -209,21 +196,31 @@ type Props = {
                 onChange={this.onChange}
                 onSave={this.onSave}
                 onCancel={this.onCancel}
-                heading={this.renderHeading(!!isEditing)}
                 readOnly={!isEditing}
               />
               <Meta align="center" justify="flex-end" readOnly={!isEditing}>
                 <Flex align="center">
+                  {document &&
+                    !isNew &&
+                    !isEditing &&
+                    <Collaborators document={document} />}
                   <HeaderAction>
                     {isEditing
                       ? <SaveAction
-                          showCheckmark={this.state.showAsSaved}
+                          isSaving={this.state.isSaving}
                           onClick={this.onSave.bind(this, true)}
-                          disabled={!(this.document && this.document.allowSave)}
+                          disabled={
+                            !(this.document && this.document.allowSave) ||
+                              this.state.isSaving
+                          }
                           isNew={!!isNew}
                         />
                       : <a onClick={this.onClickEdit}>Edit</a>}
                   </HeaderAction>
+                  {isEditing &&
+                    <HeaderAction>
+                      <a onClick={this.onCancel}>Cancel</a>
+                    </HeaderAction>}
                   {!isEditing && <Menu document={document} />}
                 </Flex>
               </Meta>
@@ -254,11 +251,6 @@ const Meta = styled(Flex)`
   padding: ${layout.padding};
 `;
 
-const InfoWrapper = styled(Flex)`
-  opacity: ${({ visible }) => (visible ? '1' : '0')};
-  transition: all 100ms ease-in-out;
-`;
-
 const Container = styled(Flex)`
   position: relative;
   width: 100%;

frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js

@@ -1,35 +0,0 @@
-// @flow
-import React from 'react';
-import { Link } from 'react-router-dom';
-import type { Document, NavigationNode } from 'types';
-
-type Props = {
-  document: Document,
-  pathToDocument: Array<NavigationNode>,
-};
-
-const Breadcrumbs = ({ document, pathToDocument }: Props) => {
-  if (document && document.collection) {
-    const titleSections = pathToDocument
-      ? pathToDocument.map(node => (
-          <Link key={node.id} to={node.url}>{node.title}</Link>
-        ))
-      : [];
-    titleSections.unshift(
-      <Link key={document.collection.id} to={document.collection.url}>
-        {document.collection.name}
-      </Link>
-    );
-
-    return (
-      <span>
-        &nbsp;/&nbsp;
-        {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
-        {` / ${document.title}`}
-      </span>
-    );
-  }
-  return null;
-};
-
-export default Breadcrumbs;

frontend/scenes/Document/components/Breadcrumbs/index.js

@@ -1,3 +0,0 @@
-// @flow
-import Breadcrumbs from './Breadcrumbs';
-export default Breadcrumbs;

frontend/scenes/Document/components/SaveAction/SaveAction.js

@@ -0,0 +1,47 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  onClick: Function,
+  disabled?: boolean,
+  isNew?: boolean,
+  isSaving?: boolean,
+};
+
+class SaveAction extends React.Component {
+  props: Props;
+
+  onClick = (ev: MouseEvent) => {
+    if (this.props.disabled) return;
+
+    ev.preventDefault();
+    this.props.onClick();
+  };
+
+  render() {
+    const { isSaving, isNew, disabled } = this.props;
+
+    return (
+      <Link
+        onClick={this.onClick}
+        title="Save changes (Cmd+Enter)"
+        disabled={disabled}
+      >
+        {isNew
+          ? isSaving ? 'Publishing…' : 'Publish'
+          : isSaving ? 'Saving…' : 'Save'}
+      </Link>
+    );
+  }
+}
+
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+  opacity: ${props => (props.disabled ? 0.5 : 1)};
+  pointer-events: ${props => (props.disabled ? 'none' : 'auto')};
+  cursor: ${props => (props.disabled ? 'default' : 'pointer')};
+`;
+
+export default SaveAction;

frontend/scenes/Document/components/SaveAction/index.js

@@ -0,0 +1,3 @@
+// @flow
+import SaveAction from './SaveAction';
+export default SaveAction;