From eccdad4ca70d0e899b2a89f8b2b559b1877dd5e2 Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Sat, 14 Oct 2017 14:06:14 +1000
Subject: [PATCH 1/3] Add ScrollSync Button

---
 src/components/EntryEditor/EntryEditor.css | 10 ++++---
 src/components/EntryEditor/EntryEditor.js  | 33 ++++++++++++++++++----
 src/components/ScrollSync/ScrollSync.js    |  2 ++
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index d4d0a665986a..5dc51cd4e25d 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/src/components/EntryEditor/EntryEditor.css
@@ -3,16 +3,18 @@
   height: 100%;
 }
 
-.nc-entryEditor-previewToggle {
+.nc-entryEditor-toggleButtons {
   position: absolute;
   top: 8px;
-  right: 40px;
+  right: 20px;
   z-index: 1000;
   opacity: 0.8;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.nc-entryEditor-previewToggleShow {
-  right: 60px;
+.nc-entryEditor-toggleButtons > * + * {
+  margin-left: 10px;
 }
 
 .nc-entryEditor-controlPane {
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index 0accd4f7867c..6b94f6b65df5 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/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,13 +63,13 @@ 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 TogglePreviewButton = () => (
       <Button
-        className={classnames('nc-entryEditor-previewToggle', { previewVisible: 'nc-entryEditor-previewToggleShow' })}
+        className="nc-entryEditor-toggleButtons"
         onClick={this.handleTogglePreview}
         icon={previewVisible ? 'visibility_off' : 'visibility'}
         floating
@@ -69,12 +77,27 @@ class EntryEditor extends Component {
       />
     );
 
+    const ToggleScrollSyncButton = () => (
+      <Button
+        className="nc-entryEditor-toggleButtons"
+        onClick={this.handleToggleScrollSync}
+        icon={scrollSyncEnabled ? 'sync_disabled' : 'sync'}
+        floating
+        mini
+      />
+    );
+
     const editor = (
       <StickyContext
         className={classnames('nc-entryEditor-controlPane', { ['nc-entryEditor-blocker']: showEventBlocker })}
         registerListener={fn => this.updateStickyContext = fn}
       >
-        { collectionPreviewEnabled ? togglePreviewButton : null }
+        { collectionPreviewEnabled ? (
+          <div className={classnames(styles.toggleButtons)}>
+            { previewVisible && <ToggleScrollSyncButton /> }
+            <TogglePreviewButton />
+          </div>
+        ) : null }
         <ControlPane
           collection={collection}
           entry={entry}
@@ -92,7 +115,7 @@ class EntryEditor extends Component {
     );
 
     const editorWithPreview = (
-      <ScrollSync>
+      <ScrollSync enabled={this.state.scrollSyncEnabled}>
         <div className="nc-entryEditor-container">
           <SplitPane
             defaultSize="50%"
diff --git a/src/components/ScrollSync/ScrollSync.js b/src/components/ScrollSync/ScrollSync.js
index 28a762204086..0bddeb9070cf 100644
--- a/src/components/ScrollSync/ScrollSync.js
+++ b/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);

From 783f719e49b178726f7799e4affc133c4309834a Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Mon, 23 Oct 2017 18:26:55 +1000
Subject: [PATCH 2/3] Create <ToggleButton /> component && update CSS

---
 src/components/EntryEditor/EntryEditor.css | 10 ++++--
 src/components/EntryEditor/EntryEditor.js  | 36 ++++++++++------------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css
index 5dc51cd4e25d..8256be03e60d 100644
--- a/src/components/EntryEditor/EntryEditor.css
+++ b/src/components/EntryEditor/EntryEditor.css
@@ -3,7 +3,7 @@
   height: 100%;
 }
 
-.nc-entryEditor-toggleButtons {
+.nc-entryEditor-controlPaneButtons {
   position: absolute;
   top: 8px;
   right: 20px;
@@ -13,8 +13,12 @@
   justify-content: flex-end;
 }
 
-.nc-entryEditor-toggleButtons > * + * {
-  margin-left: 10px;
+.nc-entryEditor-toggleButton {
+  margin-left: 5px;
+}
+
+.nc-entryEditor-toggleButtonShow {
+  right: 60px;
 }
 
 .nc-entryEditor-controlPane {
diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index 6b94f6b65df5..0b38e48f6f18 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/src/components/EntryEditor/EntryEditor.js
@@ -67,21 +67,11 @@ class EntryEditor extends Component {
 
     const collectionPreviewEnabled = collection.getIn(['editor', 'preview'], true);
 
-    const TogglePreviewButton = () => (
+    const ToggleButton = ({ icon, onClick }) => (
       <Button
-        className="nc-entryEditor-toggleButtons"
-        onClick={this.handleTogglePreview}
-        icon={previewVisible ? 'visibility_off' : 'visibility'}
-        floating
-        mini
-      />
-    );
-
-    const ToggleScrollSyncButton = () => (
-      <Button
-        className="nc-entryEditor-toggleButtons"
-        onClick={this.handleToggleScrollSync}
-        icon={scrollSyncEnabled ? 'sync_disabled' : 'sync'}
+        className={classnames('nc-entryEditor-toggleButton', { previewVisible: 'nc-entryEditor-toggleButtonShow' })}
+        icon={icon}
+        onClick={onClick}
         floating
         mini
       />
@@ -89,13 +79,21 @@ 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 ? (
-          <div className={classnames(styles.toggleButtons)}>
-            { previewVisible && <ToggleScrollSyncButton /> }
-            <TogglePreviewButton />
+          <div className="nc-entryEditor-controlPaneButtons">
+            { previewVisible && (
+              <ToggleButton
+                icon={scrollSyncEnabled ? 'sync_disabled' : 'sync'}
+                onClick={this.handleToggleScrollSync}
+              />
+            ) }
+            <ToggleButton
+              icon={previewVisible ? 'visibility_off' : 'visibility'}
+              onClick={this.handleTogglePreview}
+            />
           </div>
         ) : null }
         <ControlPane
@@ -124,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}

From a6944fda9be59e69ac8820b66a12e78c481555a1 Mon Sep 17 00:00:00 2001
From: Jinksi <ericjinks@gmail.com>
Date: Tue, 24 Oct 2017 06:38:18 +1000
Subject: [PATCH 3/3] Swap Icons && fix formatting

---
 src/components/EntryEditor/EntryEditor.js | 2 +-
 src/components/ScrollSync/ScrollSync.js   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js
index 0b38e48f6f18..64a77deabd91 100644
--- a/src/components/EntryEditor/EntryEditor.js
+++ b/src/components/EntryEditor/EntryEditor.js
@@ -86,7 +86,7 @@ class EntryEditor extends Component {
           <div className="nc-entryEditor-controlPaneButtons">
             { previewVisible && (
               <ToggleButton
-                icon={scrollSyncEnabled ? 'sync_disabled' : 'sync'}
+                icon={scrollSyncEnabled ? 'sync' : 'sync_disabled'}
                 onClick={this.handleToggleScrollSync}
               />
             ) }
diff --git a/src/components/ScrollSync/ScrollSync.js b/src/components/ScrollSync/ScrollSync.js
index 0bddeb9070cf..fd776dd13091 100644
--- a/src/components/ScrollSync/ScrollSync.js
+++ b/src/components/ScrollSync/ScrollSync.js
@@ -6,7 +6,7 @@ export default class ScrollSync extends Component {
 
   static propTypes = {
     children: PropTypes.element.isRequired,
-    enabled: PropTypes.bool.isRequired
+    enabled: PropTypes.bool.isRequired,
   };
 
   static childContextTypes = {
@@ -52,7 +52,7 @@ export default class ScrollSync extends Component {
   };
 
   handlePaneScroll = (node) => {
-    if (!this.props.enabled) return false
+    if (!this.props.enabled) return false;
     // const node = evt.target
     window.requestAnimationFrame(() => {
       this.syncScrollPositions(node);