Merge pull request #203 from jorilallo/text-based-save

Text based save indicator

frontend/components/Layout/index.js

@@ -2,8 +2,7 @@
 import Layout from './Layout';
 import Title from './components/Title';
 import HeaderAction from './components/HeaderAction';
-import SaveAction from './components/SaveAction';
 
 export default Layout;
 
-export { Title, HeaderAction, SaveAction };
+export { Title, HeaderAction };

frontend/scenes/Document/Document.js

@@ -12,10 +12,11 @@ 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 CenteredContent from 'components/CenteredContent';
@@ -44,6 +45,7 @@ type Props = {
   state = {
     isDragging: false,
     isLoading: false,
+    isSaving: false,
     newDocument: undefined,
     showAsSaved: false,
   };
@@ -108,7 +110,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 +122,7 @@ type Props = {
   };
 
   showAsSaved() {
-    this.setState({ showAsSaved: true });
+    this.setState({ showAsSaved: true, isSaving: false });
     this.savedTimeout = setTimeout(
       () => this.setState({ showAsSaved: false }),
       2000
@@ -217,13 +219,20 @@ type Props = {
                   <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>

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

@@ -1,28 +1,26 @@
 // @flow
 import React from 'react';
 import styled from 'styled-components';
-import CheckIcon from 'components/Icon/CheckIcon';
-import { fadeAndScaleIn } from 'styles/animations';
 
 type Props = {
   onClick: Function,
-  showCheckmark: boolean,
   disabled?: boolean,
   isNew?: boolean,
+  isSaving?: boolean,
 };
 
 class SaveAction extends React.Component {
   props: Props;
 
-  onClick = (event: MouseEvent) => {
+  onClick = (ev: MouseEvent) => {
     if (this.props.disabled) return;
 
-    event.preventDefault();
+    ev.preventDefault();
     this.props.onClick();
   };
 
   render() {
-    const { showCheckmark, disabled, isNew } = this.props;
+    const { isSaving, isNew, disabled } = this.props;
 
     return (
       <Link
@@ -30,8 +28,9 @@ class SaveAction extends React.Component {
         title="Save changes (Cmd+Enter)"
         disabled={disabled}
       >
-        {showCheckmark && <SavedIcon />}
-        {isNew ? 'Publish' : 'Save'}
+        {isNew
+          ? isSaving ? 'Publishing…' : 'Publish'
+          : isSaving ? 'Saving…' : 'Save'}
       </Link>
     );
   }
@@ -45,17 +44,4 @@ const Link = styled.a`
   cursor: ${props => (props.disabled ? 'default' : 'pointer')};
 `;
 
-const SavedIcon = styled(CheckIcon)`
-  animation: ${fadeAndScaleIn} 250ms ease;
-  display: inline-block;
-  margin-right: 4px;
-  width: 18px;
-  height: 18px;
-
-  svg {
-    width: 18px;
-    height: 18px;
-  }
-`;
-
 export default SaveAction;