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