diff --git a/src/components/EntryEditor/EntryEditor.css b/src/components/EntryEditor/EntryEditor.css index d4d0a665986a..8256be03e60d 100644 --- a/src/components/EntryEditor/EntryEditor.css +++ b/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; } diff --git a/src/components/EntryEditor/EntryEditor.js b/src/components/EntryEditor/EntryEditor.js index 0accd4f7867c..64a77deabd91 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,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 }) => (