Merge pull request #306 from americool/adding-close-preview-feature

Adding close preview feature

src/components/EntryEditor/EntryEditor.css

@@ -5,10 +5,17 @@
   height: 100%;
 }
 
+.previewToggle {
+  position: absolute;
+  top: 0;
+  right: 40px;
+  z-index: 1000;
+}
+
 .controlPane {
   height: calc(100% - 55px);
   overflow: auto;
-  padding: 0 20px;
+  padding: 20px 20px 0;
   border-right: 1px solid var(--defaultColorLight);
   background-color: color(#f2f5f4 lightness(90%));
 }

src/components/EntryEditor/EntryEditor.js

@@ -1,15 +1,19 @@
 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 { ScrollSync, ScrollSyncPane } from '../ScrollSync';
 import ControlPane from '../ControlPanel/ControlPane';
 import PreviewPane from '../PreviewPane/PreviewPane';
 import Toolbar from './EntryEditorToolbar';
 import styles from './EntryEditor.css';
 
+const PREVIEW_VISIBLE = 'cms.preview-visible';
+
 class EntryEditor extends Component {
   state = {
     showEventBlocker: false,
+    previewVisible: localStorage.getItem(PREVIEW_VISIBLE) !== "false",
   };
 
   handleSplitPaneDragStart = () => {
@@ -25,6 +29,12 @@ class EntryEditor extends Component {
     this.props.onPersist();
   };
 
+  handleTogglePreview = () => {
+    const newPreviewVisible = !this.state.previewVisible;
+    this.setState({ previewVisible: newPreviewVisible });
+    localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
+  };
+
   render() {
     const {
         collection,
@@ -42,46 +52,52 @@ class EntryEditor extends Component {
 
     const controlClassName = `${ styles.controlPane } ${ this.state.showEventBlocker && styles.blocker }`;
     const previewClassName = `${ styles.previewPane } ${ this.state.showEventBlocker && styles.blocker }`;
+
+    const editor = (
+      <div className={controlClassName}>
+        <Button className={styles.previewToggle} onClick={this.handleTogglePreview}>Toggle Preview</Button>
+        <ControlPane
+          collection={collection}
+          entry={entry}
+          fields={fields}
+          fieldsMetaData={fieldsMetaData}
+          fieldsErrors={fieldsErrors}
+          getAsset={getAsset}
+          onChange={onChange}
+          onValidate={onValidate}
+          onAddAsset={onAddAsset}
+          onRemoveAsset={onRemoveAsset}
+          ref={c => this.controlPaneRef = c} // eslint-disable-line
+        />
+      </div>
+    );
+
+    const editorWithPreview = (
+      <ScrollSync>
+        <div className={styles.container}>
+          <SplitPane
+            defaultSize="50%"
+            onDragStarted={this.handleSplitPaneDragStart}
+            onDragFinished={this.handleSplitPaneDragFinished}
+          >
+            <ScrollSyncPane>{editor}</ScrollSyncPane>
+            <div className={previewClassName}>
+              <PreviewPane
+                collection={collection}
+                entry={entry}
+                fields={fields}
+                fieldsMetaData={fieldsMetaData}
+                getAsset={getAsset}
+              />
+            </div>
+          </SplitPane>
+        </div>
+      </ScrollSync>
+    );
+
     return (
       <div className={styles.root}>
-        <ScrollSync>
-          <div className={styles.container}>
-            <SplitPane
-              defaultSize="50%"
-              onDragStarted={this.handleSplitPaneDragStart}
-              onDragFinished={this.handleSplitPaneDragFinished}
-            >
-              <ScrollSyncPane>
-                <div className={controlClassName}>
-
-                  <ControlPane
-                    collection={collection}
-                    entry={entry}
-                    fields={fields}
-                    fieldsMetaData={fieldsMetaData}
-                    fieldsErrors={fieldsErrors}
-                    getAsset={getAsset}
-                    onChange={onChange}
-                    onValidate={onValidate}
-                    onAddAsset={onAddAsset}
-                    onRemoveAsset={onRemoveAsset}
-                    ref={c => this.controlPaneRef = c} // eslint-disable-line
-                  />
-
-                </div>
-              </ScrollSyncPane>
-              <div className={previewClassName}>
-                <PreviewPane
-                  collection={collection}
-                  entry={entry}
-                  fields={fields}
-                  fieldsMetaData={fieldsMetaData}
-                  getAsset={getAsset}
-                />
-              </div>
-            </SplitPane>
-          </div>
-        </ ScrollSync>
+        { this.state.previewVisible ? editorWithPreview : editor }
         <div className={styles.footer}>
           <Toolbar
             isPersisting={entry.get('isPersisting')}
@@ -89,7 +105,6 @@ class EntryEditor extends Component {
             onCancelEdit={onCancelEdit}
           />
         </div>
-
       </div>
     );
   }