diff --git a/frontend/scenes/Document/Document.js b/frontend/scenes/Document/Document.js
index 28994dc3e..125949a79 100644
--- a/frontend/scenes/Document/Document.js
+++ b/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 = {
{isEditing
?
: Edit}
+ {isEditing &&
+
+ Cancel
+ }
{!isEditing &&
}
diff --git a/frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js b/frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js
deleted file mode 100644
index 14e598993..000000000
--- a/frontend/scenes/Document/components/Breadcrumbs/Breadcrumbs.js
+++ /dev/null
@@ -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,
-};
-
-const Breadcrumbs = ({ document, pathToDocument }: Props) => {
- if (document && document.collection) {
- const titleSections = pathToDocument
- ? pathToDocument.map(node => (
- {node.title}
- ))
- : [];
- titleSections.unshift(
-
- {document.collection.name}
-
- );
-
- return (
-
- /
- {titleSections.reduce((prev, curr) => [prev, ' / ', curr])}
- {` / ${document.title}`}
-
- );
- }
- return null;
-};
-
-export default Breadcrumbs;
diff --git a/frontend/scenes/Document/components/Breadcrumbs/index.js b/frontend/scenes/Document/components/Breadcrumbs/index.js
deleted file mode 100644
index 8fe21291d..000000000
--- a/frontend/scenes/Document/components/Breadcrumbs/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// @flow
-import Breadcrumbs from './Breadcrumbs';
-export default Breadcrumbs;
diff --git a/frontend/components/Layout/components/SaveAction/SaveAction.js b/frontend/scenes/Document/components/SaveAction/SaveAction.js
similarity index 57%
rename from frontend/components/Layout/components/SaveAction/SaveAction.js
rename to frontend/scenes/Document/components/SaveAction/SaveAction.js
index f33cfec42..48ec1d00f 100644
--- a/frontend/components/Layout/components/SaveAction/SaveAction.js
+++ b/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 (
- {showCheckmark && }
- {isNew ? 'Publish' : 'Save'}
+ {isNew
+ ? isSaving ? 'Publishing…' : 'Publish'
+ : isSaving ? 'Saving…' : 'Save'}
);
}
@@ -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;
diff --git a/frontend/components/Layout/components/SaveAction/index.js b/frontend/scenes/Document/components/SaveAction/index.js
similarity index 100%
rename from frontend/components/Layout/components/SaveAction/index.js
rename to frontend/scenes/Document/components/SaveAction/index.js