Moving the markdown toggle to a 'preview' icon in the toolbar. Remove…

…d the old segmented control that took up vertical space in the editor. (#699)

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>
+  );
+}

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>
+  );
+}

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 }) => ({

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"

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;

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;