Add ScrollSync Button to Preview UI (#693)

* Add ScrollSync Button

* Create <ToggleButton /> component && update CSS

* Swap Icons && fix formatting

src/components/EntryEditor/EntryEditor.css

@@ -3,15 +3,21 @@
   height: 100%;
 }
 
-.nc-entryEditor-previewToggle {
+.nc-entryEditor-controlPaneButtons {
   position: absolute;
   top: 8px;
-  right: 40px;
+  right: 20px;
   z-index: 1000;
   opacity: 0.8;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.nc-entryEditor-previewToggleShow {
+.nc-entryEditor-toggleButton {
+  margin-left: 5px;
+}
+
+.nc-entryEditor-toggleButtonShow {
   right: 60px;
 }
 

src/components/EntryEditor/EntryEditor.js

@@ -11,11 +11,13 @@ import Toolbar from './EntryEditorToolbar';
 import { StickyContext } from '../UI/Sticky/Sticky';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
+const SCROLL_SYNC_ENABLED = 'cms.scroll-sync-enabled';
 
 class EntryEditor extends Component {
   state = {
     showEventBlocker: false,
     previewVisible: localStorage.getItem(PREVIEW_VISIBLE) !== "false",
+    scrollSyncEnabled: localStorage.getItem(SCROLL_SYNC_ENABLED) !== "false",
   };
 
   handleSplitPaneDragStart = () => {
@@ -37,6 +39,12 @@ class EntryEditor extends Component {
     localStorage.setItem(PREVIEW_VISIBLE, newPreviewVisible);
   };
 
+  handleToggleScrollSync = () => {
+    const newScrollSyncEnabled = !this.state.scrollSyncEnabled;
+    this.setState({ scrollSyncEnabled: newScrollSyncEnabled });
+    localStorage.setItem(SCROLL_SYNC_ENABLED, newScrollSyncEnabled);
+  };
+
   render() {
     const {
         collection,
@@ -55,15 +63,15 @@ class EntryEditor extends Component {
         onCancelEdit,
     } = this.props;
 
-    const { previewVisible, showEventBlocker } = this.state;
+    const { previewVisible, scrollSyncEnabled, showEventBlocker } = this.state;
 
     const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
 
-    const togglePreviewButton = (
+    const ToggleButton = ({ icon, onClick }) => (
       <Button
-        className={classnames('nc-entryEditor-previewToggle', { previewVisible: 'nc-entryEditor-previewToggleShow' })}
+        className={classnames('nc-entryEditor-toggleButton', { previewVisible: 'nc-entryEditor-toggleButtonShow' })}
-        onClick={this.handleTogglePreview}
+        icon={icon}
-        icon={previewVisible ? 'visibility_off' : 'visibility'}
+        onClick={onClick}
         floating
         mini
       />
@@ -71,10 +79,23 @@ class EntryEditor extends Component {
 
     const editor = (
       <StickyContext
-        className={classnames('nc-entryEditor-controlPane', { ['nc-entryEditor-blocker']: showEventBlocker })}
+        className={classnames('nc-entryEditor-controlPane', { 'nc-entryEditor-blocker': showEventBlocker })}
         registerListener={fn => this.updateStickyContext = fn}
       >
-        { collectionPreviewEnabled ? togglePreviewButton : null }
+        { collectionPreviewEnabled ? (
+          <div className="nc-entryEditor-controlPaneButtons">
+            { previewVisible && (
+              <ToggleButton
+                icon={scrollSyncEnabled ? 'sync' : 'sync_disabled'}
+                onClick={this.handleToggleScrollSync}
+              />
+            ) }
+            <ToggleButton
+              icon={previewVisible ? 'visibility_off' : 'visibility'}
+              onClick={this.handleTogglePreview}
+            />
+          </div>
+        ) : null }
         <ControlPane
           collection={collection}
           entry={entry}
@@ -92,7 +113,7 @@ class EntryEditor extends Component {
     );
 
     const editorWithPreview = (
-      <ScrollSync>
+      <ScrollSync enabled={this.state.scrollSyncEnabled}>
         <div className="nc-entryEditor-container">
           <SplitPane
             defaultSize="50%"
@@ -101,7 +122,7 @@ class EntryEditor extends Component {
             onChange={this.updateStickyContext}
           >
             <ScrollSyncPane>{editor}</ScrollSyncPane>
-            <div className={classnames('nc-entryEditor-previewPane', { ['nc-entryEditor-blocker']: showEventBlocker })}>
+            <div className={classnames('nc-entryEditor-previewPane', { 'nc-entryEditor-blocker': showEventBlocker })}>
               <PreviewPane
                 collection={collection}
                 entry={entry}

src/components/ScrollSync/ScrollSync.js

@@ -6,6 +6,7 @@ export default class ScrollSync extends Component {
 
   static propTypes = {
     children: PropTypes.element.isRequired,
+    enabled: PropTypes.bool.isRequired,
   };
 
   static childContextTypes = {
@@ -51,6 +52,7 @@ export default class ScrollSync extends Component {
   };
 
   handlePaneScroll = (node) => {
+    if (!this.props.enabled) return false;
     // const node = evt.target
     window.requestAnimationFrame(() => {
       this.syncScrollPositions(node);