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));