Create <ToggleButton /> component && update CSS

decaporg · Oct 23, 2017 · 783f719 · 783f719
1 parent eccdad4
commit 783f719
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 22 deletions.
diff --git 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
@@ -67,35 +67,33 @@ 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
       />
     );
 
     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}