diff --git a/src/actions/editor.js b/src/actions/editor.js index c9e35448..37fb0f90 100644 --- a/src/actions/editor.js +++ b/src/actions/editor.js @@ -1,8 +1,16 @@ +import history from '../routing/history'; + export const SWITCH_VISUAL_MODE = 'SWITCH_VISUAL_MODE'; export function switchVisualMode(useVisualMode) { return { type: SWITCH_VISUAL_MODE, - payload: useVisualMode + payload: useVisualMode, + }; +} + +export function cancelEdit() { + return () => { + history.goBack(); }; } diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css index cb309fad..4db0945e 100644 --- a/src/components/EntryEditor/EntryEditor.css +++ b/src/components/EntryEditor/EntryEditor.css @@ -1,3 +1,8 @@ +:root { + --defaultColorLight: #eee; + --backgroundColor: #fff; +} + .root { position: absolute; top: 64px; @@ -5,23 +10,27 @@ display: flex; flex-direction: column; } + .container { - flex: 1; display: flex; + flex: 1; } + .footer { flex: 0; - background: #fff; - height: 45px; - border-top: 1px solid #e8eae8; padding: 10px 20px; + border-top: 1px solid var(--defaultColorLight); + background: var(--backgroundColor); + text-align: right; } + .controlPane { flex: 1; overflow: auto; padding: 0 20px; - border-right: 1px solid #e8eae8; + border-right: 1px solid var(--defaultColorLight); } + .previewPane { flex: 1; } diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js index ecf523ed..e7948ee5 100644 --- a/src/components/EntryEditor/EntryEditor.js +++ b/src/components/EntryEditor/EntryEditor.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { Button } from 'react-toolbox/lib/button'; import { ScrollSync, ScrollSyncPane } from '../ScrollSync'; import ControlPane from '../ControlPanel/ControlPane'; import PreviewPane from '../PreviewPane/PreviewPane'; @@ -7,7 +8,14 @@ import styles from './EntryEditor.css'; export default function EntryEditor( { - collection, entry, getMedia, onChange, onAddMedia, onRemoveMedia, onPersist + collection, + entry, + getMedia, + onChange, + onAddMedia, + onRemoveMedia, + onPersist, + onCancelEdit, }) { return (
@@ -35,7 +43,17 @@ export default function EntryEditor(
- + + {' '} +
); @@ -49,4 +67,5 @@ EntryEditor.propTypes = { onChange: PropTypes.func.isRequired, onPersist: PropTypes.func.isRequired, onRemoveMedia: PropTypes.func.isRequired, + onCancelEdit: PropTypes.func.isRequired, }; diff --git a/src/containers/EntryPage.js b/src/containers/EntryPage.js index d3dcace0..b2014112 100644 --- a/src/containers/EntryPage.js +++ b/src/containers/EntryPage.js @@ -7,12 +7,13 @@ import { createEmptyDraft, discardDraft, changeDraft, - persistEntry + persistEntry, } from '../actions/entries'; +import { cancelEdit } from '../actions/editor'; import { addMedia, removeMedia } from '../actions/media'; import { selectEntry, getMedia } from '../reducers'; import EntryEditor from '../components/EntryEditor/EntryEditor'; -import EntryPageHOC from './editorialWorkflow/EntryPageHOC'; +import entryPageHOC from './editorialWorkflow/EntryPageHOC'; class EntryPage extends React.Component { static propTypes = { @@ -28,6 +29,7 @@ class EntryPage extends React.Component { loadEntry: PropTypes.func.isRequired, persistEntry: PropTypes.func.isRequired, removeMedia: PropTypes.func.isRequired, + cancelEdit: PropTypes.func.isRequired, slug: PropTypes.string, newEntry: PropTypes.bool.isRequired, }; @@ -56,7 +58,7 @@ class EntryPage extends React.Component { this.props.discardDraft(); } - createDraft = entry => { + createDraft = (entry) => { if (entry) this.props.createDraftFromEntry(entry); }; @@ -66,10 +68,19 @@ class EntryPage extends React.Component { render() { const { - entry, entryDraft, boundGetMedia, collection, changeDraft, addMedia, removeMedia + entry, + entryDraft, + boundGetMedia, + collection, + changeDraft, + addMedia, + removeMedia, + cancelEdit, } = this.props; - if (entryDraft == null || entryDraft.get('entry') == undefined || entry && entry.get('isFetching')) { + if (entryDraft == null + || entryDraft.get('entry') === undefined + || (entry && entry.get('isFetching'))) { return
Loading...
; } return ( @@ -81,18 +92,12 @@ class EntryPage extends React.Component { onAddMedia={addMedia} onRemoveMedia={removeMedia} onPersist={this.handlePersistEntry} + onCancelEdit={cancelEdit} /> ); } } - -/* - * Instead of checking the publish mode everywhere to dispatch & render the additional editorial workflow stuff, - * We delegate it to a Higher Order Component - */ -EntryPage = EntryPageHOC(EntryPage); - function mapStateToProps(state, ownProps) { const { collections, entryDraft } = state; const collection = collections.get(ownProps.params.name); @@ -113,6 +118,7 @@ export default connect( createDraftFromEntry, createEmptyDraft, discardDraft, - persistEntry + persistEntry, + cancelEdit, } -)(EntryPage); +)(entryPageHOC(EntryPage));