From 6542947472c8b85c6eca7365a9481cd504634eca Mon Sep 17 00:00:00 2001
From: Dan Roundhill <dan@automattic.com>
Date: Mon, 5 Feb 2018 13:28:36 -0800
Subject: [PATCH] Moving the markdown toggle to a 'preview' icon in the
 toolbar. Removed the old segmented control that took up vertical space in the
 editor. (#699)

---
 lib/icons/preview-stop.jsx | 15 ++++++++++++
 lib/icons/preview.jsx      | 15 ++++++++++++
 lib/note-editor.jsx        | 47 +++-----------------------------------
 lib/note-toolbar.jsx       | 26 ++++++++++++++++++++-
 scss/editor.scss           | 17 --------------
 scss/print.scss            |  1 -
 6 files changed, 58 insertions(+), 63 deletions(-)
 create mode 100644 lib/icons/preview-stop.jsx
 create mode 100644 lib/icons/preview.jsx

diff --git a/lib/icons/preview-stop.jsx b/lib/icons/preview-stop.jsx
new file mode 100644
index 000000000..96c0e492a
--- /dev/null
+++ b/lib/icons/preview-stop.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function PreviewStopIcon() {
+  return (
+    <svg
+      className="icon-preview-stop"
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+    >
+      <path d="M0,11S4.19,4,11,4a10.09,10.09,0,0,1,3.4.6L7.17,11.83a4.42,4.42,0,0,1,.22-5A14.22,14.22,0,0,0,2.44,11a16.27,16.27,0,0,0,2.77,2.79L3.78,15.22A18,18,0,0,1,0,11Zm22,0s-4.19,7-11,7a10.13,10.13,0,0,1-3.4-.6L4,21,2.5,19.5l3.06-3.06L7,15l1.64-1.64,6.16-6.16L15,7l1.48-1.48L19.5,2.5,21,4,18.22,6.78A18,18,0,0,1,22,11Zm-2.44,0a16.27,16.27,0,0,0-2.77-2.79L15.5,9.5A4.5,4.5,0,0,1,11,14L9.21,15.79A7.9,7.9,0,0,0,11,16C15.16,16,18.23,12.73,19.56,11Z" />
+    </svg>
+  );
+}
diff --git a/lib/icons/preview.jsx b/lib/icons/preview.jsx
new file mode 100644
index 000000000..118210564
--- /dev/null
+++ b/lib/icons/preview.jsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export default function PreviewIcon() {
+  return (
+    <svg
+      className="icon-preview"
+      xmlns="http://www.w3.org/2000/svg"
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+    >
+      <path d="M11,4C4.19,4,0,11,0,11s4.19,7,11,7,11-7,11-7S17.81,4,11,4Zm0,12c-4.13,0-7.22-3.29-8.56-5A14.22,14.22,0,0,1,7.39,6.84a4.5,4.5,0,1,0,7.23,0A14.44,14.44,0,0,1,19.56,11C18.23,12.73,15.16,16,11,16Z" />
+    </svg>
+  );
+}
diff --git a/lib/note-editor.jsx b/lib/note-editor.jsx
index 870cd45c4..0e0e4e3bb 100644
--- a/lib/note-editor.jsx
+++ b/lib/note-editor.jsx
@@ -143,16 +143,6 @@ export const NoteEditor = React.createClass({
     this.setIsViewingRevisions(false);
   },
 
-  setEditorMode(event) {
-    const editorMode = get(event, 'target.dataset.editorMode');
-
-    if (!editorMode) {
-      return;
-    }
-
-    this.props.onSetEditorMode(editorMode);
-  },
-
   setIsViewingRevisions: function(isViewing) {
     this.setState({ isViewingRevisions: isViewing });
   },
@@ -239,10 +229,12 @@ export const NoteEditor = React.createClass({
             setIsViewingRevisions={this.setIsViewingRevisions}
             onCloseNote={this.props.onCloseNote}
             onNoteInfo={this.props.onNoteInfo}
+            onSetEditorMode={this.props.onSetEditorMode}
+            editorMode={editorMode}
+            markdownEnabled={markdownEnabled}
           />
         </div>
         <div className="note-editor-content theme-color-border">
-          {!!markdownEnabled && this.renderModeBar()}
           <div className="note-editor-detail">
             <NoteDetail
               storeFocusEditor={this.storeFocusEditor}
@@ -275,39 +267,6 @@ export const NoteEditor = React.createClass({
       </div>
     );
   },
-
-  renderModeBar() {
-    const { editorMode } = this.props;
-
-    const isPreviewing = editorMode === 'markdown';
-
-    return (
-      <div className="note-editor-mode-bar segmented-control">
-        <button
-          type="button"
-          className={classNames(
-            'button button-segmented-control button-compact',
-            { active: !isPreviewing }
-          )}
-          data-editor-mode="edit"
-          onClick={this.setEditorMode}
-        >
-          Edit
-        </button>
-        <button
-          type="button"
-          className={classNames(
-            'button button-segmented-control button-compact',
-            { active: isPreviewing }
-          )}
-          data-editor-mode="markdown"
-          onClick={this.setEditorMode}
-        >
-          Preview
-        </button>
-      </div>
-    );
-  },
 });
 
 const mapStateToProps = ({ appState: state, settings }) => ({
diff --git a/lib/note-toolbar.jsx b/lib/note-toolbar.jsx
index 87a93b2f9..968abc60b 100644
--- a/lib/note-toolbar.jsx
+++ b/lib/note-toolbar.jsx
@@ -1,6 +1,8 @@
 import React, { PropTypes } from 'react';
 import BackIcon from './icons/back';
 import InfoIcon from './icons/info';
+import PreviewIcon from './icons/preview';
+import PreviewStopIcon from './icons/preview-stop';
 import RevisionsIcon from './icons/revisions';
 import TrashIcon from './icons/trash';
 import ShareIcon from './icons/share';
@@ -16,6 +18,9 @@ export default React.createClass({
     onCloseNote: PropTypes.func.isRequired,
     onNoteInfo: PropTypes.func.isRequired,
     setIsViewingRevisions: PropTypes.func.isRequired,
+    onSetEditorMode: PropTypes.func.isRequired,
+    editorMode: PropTypes.string.isRequred,
+    markdownEnabled: PropTypes.bool.isRequred,
   },
 
   showRevisions: function() {
@@ -30,8 +35,15 @@ export default React.createClass({
     return isTrashed ? this.renderTrashed() : this.renderNormal();
   },
 
+  setEditorMode() {
+    const { editorMode } = this.props;
+
+    this.props.onSetEditorMode(editorMode === 'markdown' ? 'edit' : 'markdown');
+  },
+
   renderNormal() {
-    const { note } = this.props;
+    const { note, editorMode, markdownEnabled } = this.props;
+    const isPreviewing = editorMode === 'markdown';
 
     return (
       <div className="note-toolbar">
@@ -45,6 +57,18 @@ export default React.createClass({
             <BackIcon />
           </button>
         </div>
+        {markdownEnabled && (
+          <div className="note-toolbar-icon">
+            <button
+              type="button"
+              title="Preview"
+              className="button button-borderless"
+              onClick={this.setEditorMode}
+            >
+              {isPreviewing ? <PreviewStopIcon /> : <PreviewIcon />}
+            </button>
+          </div>
+        )}
         <div className="note-toolbar-icon">
           <button
             type="button"
diff --git a/scss/editor.scss b/scss/editor.scss
index 645193c29..77e6a0d03 100644
--- a/scss/editor.scss
+++ b/scss/editor.scss
@@ -23,10 +23,6 @@
   .note-editor-content {
     padding-top: 51px !important;
   }
-
-  .note-editor-mode-bar {
-    display: none !important;
-  }
 }
 
 .markdown {
@@ -115,19 +111,6 @@
   transition: all 0.3s ease-in-out;
 }
 
-.note-editor-mode-bar {
-  flex: none;
-  margin: 0 auto;
-  padding-top: 24px;
-  display: flex;
-  justify-content: center;
-  transition: all 0.3s ease-in-out;
-
-  .button-segmented-control {
-    width: 5.75em;
-  }
-}
-
 .note-editor-detail {
   flex: 1 1 auto;
   overflow: hidden;
diff --git a/scss/print.scss b/scss/print.scss
index f7b0bbaaa..96fa3c74a 100644
--- a/scss/print.scss
+++ b/scss/print.scss
@@ -19,7 +19,6 @@
   .note-editor-controls,
   .note-editor-detail,
   .note-editor-detail .note-detail,
-  .note-editor-mode-bar,
   .note-info,
   .tag-entry {
     display: none;