From 8ddc3fdf10cc56fad68473f814a7917263de278c Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 11 Jul 2017 23:24:12 -0700
Subject: [PATCH 1/2] Show 'checkmark' icon when saved in editor

---
 frontend/components/Editor/Editor.js          |  5 +-
 frontend/components/Icon/CheckIcon.js         | 21 +++++++++
 .../components/SaveAction/SaveAction.js       | 46 +++++++++++++------
 frontend/components/Modal/Modal.js            |  4 +-
 frontend/scenes/Document/Document.js          | 13 ++++++
 frontend/styles/animations.js                 |  2 +-
 6 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 frontend/components/Icon/CheckIcon.js

diff --git a/frontend/components/Editor/Editor.js b/frontend/components/Editor/Editor.js
index 0ba3055f7..ad73209e1 100644
--- a/frontend/components/Editor/Editor.js
+++ b/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();
diff --git a/frontend/components/Icon/CheckIcon.js b/frontend/components/Icon/CheckIcon.js
new file mode 100644
index 000000000..ab6ea35e3
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/frontend/components/Layout/components/SaveAction/SaveAction.js b/frontend/components/Layout/components/SaveAction/SaveAction.js
index b37cce08a..ff307acb9 100644
--- a/frontend/components/Layout/components/SaveAction/SaveAction.js
+++ b/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;
diff --git a/frontend/components/Modal/Modal.js b/frontend/components/Modal/Modal.js
index ee988528a..50e5bdb02 100644
--- a/frontend/components/Modal/Modal.js
+++ b/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;
diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index c82315c5b..e58652af4 100644
--- a/frontend/scenes/Document/Document.js
+++ b/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}
diff --git a/frontend/styles/animations.js b/frontend/styles/animations.js
index a042aaf72..bdd611fa8 100644
--- a/frontend/styles/animations.js
+++ b/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);

From 01b18a83cb93c56b1f979037dd330add61ce0331 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Tue, 11 Jul 2017 23:27:19 -0700
Subject: [PATCH 2/2] Oop, knew I stored that reference for a reason

---
 frontend/scenes/Document/Document.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index e58652af4..7f6d95107 100644
--- a/frontend/scenes/Document/Document.js
+++ b/frontend/scenes/Document/Document.js
@@ -62,6 +62,7 @@ type Props = {
   }
 
   componentWillUnmount() {
+    clearTimeout(this.savedTimeout);
     this.props.ui.clearActiveDocument();
   }