Show 'checkmark' icon when saved in editor

frontend/components/Editor/Editor.js

@@ -89,11 +89,12 @@ type KeyData = {
       case 's':
         ev.preventDefault();
         ev.stopPropagation();
-        return this.props.onSave({ redirect: false });
+        this.props.onSave();
+        return state;
       case 'enter':
         ev.preventDefault();
         ev.stopPropagation();
-        this.props.onSave();
+        this.props.onSave({ redirect: false });
         return state;
       case 'escape':
         return this.props.onCancel();

frontend/components/Icon/CheckIcon.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import Icon from './Icon';
+import type { Props } from './Icon';
+
+export default function CheckIcon(props: Props) {
+  return (
+    <Icon {...props}>
+      <svg
+        fill="#000000"
+        height="24"
+        viewBox="0 0 24 24"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" />
+      </svg>
+    </Icon>
+  );
+}

frontend/components/Layout/components/SaveAction/SaveAction.js

@@ -1,14 +1,17 @@
 // @flow
 import React from 'react';
-import { observer } from 'mobx-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,
 };
 
-@observer class SaveAction extends React.Component {
+class SaveAction extends React.Component {
   props: Props;
 
   onClick = (event: MouseEvent) => {
@@ -19,21 +22,38 @@ type Props = {
   };
 
   render() {
-    const { disabled, isNew } = this.props;
+    const { showCheckmark, disabled, isNew } = this.props;
 
     return (
-      <div>
-        <a
-          href
-          onClick={this.onClick}
-          style={{ opacity: disabled ? 0.5 : 1 }}
-          title="Save changes (Cmd+Enter)"
-        >
-          {isNew ? 'Publish' : 'Save'}
-        </a>
-      </div>
+      <Link
+        href
+        onClick={this.onClick}
+        style={{ opacity: disabled ? 0.5 : 1 }}
+        title="Save changes (Cmd+Enter)"
+      >
+        {showCheckmark && <SavedIcon />}
+        {isNew ? 'Publish' : 'Save'}
+      </Link>
     );
   }
 }
 
+const Link = styled.a`
+  display: flex;
+  align-items: center;
+`;
+
+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;

frontend/components/Modal/Modal.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import ReactModal from 'react-modal';
-import { modalFadeIn } from 'styles/animations';
+import { fadeAndScaleIn } from 'styles/animations';
 
 import CloseIcon from 'components/Icon/CloseIcon';
 import Flex from 'components/Flex';
@@ -46,7 +46,7 @@ const Content = styled(Flex)`
 `;
 
 const StyledModal = styled(ReactModal)`
-  animation: ${modalFadeIn} 250ms ease;
+  animation: ${fadeAndScaleIn} 250ms ease;
 
   position: absolute;
   top: 0;

frontend/scenes/Document/Document.js

@@ -37,6 +37,7 @@ type Props = {
 
 @observer class DocumentScene extends Component {
   props: Props;
+  savedTimeout: number;
   state: {
     newDocument?: Document,
   };
@@ -44,6 +45,7 @@ type Props = {
     isDragging: false,
     isLoading: false,
     newDocument: undefined,
+    showAsSaved: false,
   };
 
   componentDidMount() {
@@ -108,9 +110,19 @@ type Props = {
 
     if (redirect || this.props.newDocument) {
       this.props.history.push(document.url);
+    } else {
+      this.showAsSaved();
     }
   };
 
+  showAsSaved() {
+    this.setState({ showAsSaved: true });
+    this.savedTimeout = setTimeout(
+      () => this.setState({ showAsSaved: false }),
+      2000
+    );
+  }
+
   onImageUploadStart() {
     this.setState({ isLoading: true });
   }
@@ -204,6 +216,7 @@ type Props = {
                   <HeaderAction>
                     {isEditing
                       ? <SaveAction
+                          showCheckmark={this.state.showAsSaved}
                           onClick={this.onSave.bind(this, true)}
                           disabled={get(this.document, 'isSaving')}
                           isNew={!!isNew}

frontend/styles/animations.js

@@ -1,7 +1,7 @@
 // @flow
 import { keyframes } from 'styled-components';
 
-export const modalFadeIn = keyframes`
+export const fadeAndScaleIn = keyframes`
   from {
     opacity: 0;
     transform: scale(.98);