diff --git a/package.json b/package.json
index 72981527..06bde015 100644
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
"@kadira/storybook": "^1.36.0",
"autoprefixer": "^6.3.3",
"babel-plugin-transform-builtin-extend": "^1.1.0",
+ "classnames": "^2.2.5",
"dateformat": "^1.0.12",
"deep-equal": "^1.0.1",
"fuzzy": "^0.1.1",
diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index ae5c4c72..0997aa2c 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/src/components/EntryEditor/EntryEditor.css
@@ -7,9 +7,14 @@
.previewToggle {
position: absolute;
- top: 0;
+ top: 8px;
right: 40px;
z-index: 1000;
+ opacity: 0.8;
+}
+
+.previewToggleShow {
+ right: 60px;
}
.controlPane {
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index ac68c2c0..6895eb04 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/src/components/EntryEditor/EntryEditor.js
@@ -2,6 +2,7 @@ import React, { Component, PropTypes } from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import SplitPane from 'react-split-pane';
import Button from 'react-toolbox/lib/button';
+import classnames from 'classnames';
import { ScrollSync, ScrollSyncPane } from '../ScrollSync';
import ControlPane from '../ControlPanel/ControlPane';
import PreviewPane from '../PreviewPane/PreviewPane';
@@ -52,17 +53,22 @@ class EntryEditor extends Component {
onCancelEdit,
} = this.props;
- const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
- const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
+ const { previewVisible, showEventBlocker } = this.state;
const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
const togglePreviewButton = (
-
+
);
const editor = (
-
+
{ collectionPreviewEnabled ? togglePreviewButton : null }
{editor}
-