Implemented editor settings

app/components/RequestBodyEditor.js

@@ -1,13 +1,14 @@
 import React, {PropTypes} from 'react';
 import Editor from './base/Editor';
 
-const RequestBodyEditor = ({body, contentType, onChange, className}) => (
+const RequestBodyEditor = ({fontSize, lineWrapping, body, contentType, onChange, className}) => (
   <Editor
+    fontSize={fontSize}
     value={body}
     className={className}
     onChange={onChange}
     mode={contentType}
-    lineWrapping={true}
+    lineWrapping={lineWrapping}
     placeholder="request body here..."
   />
 );
@@ -18,7 +19,11 @@ RequestBodyEditor.propTypes = {
 
   // Other
   body: PropTypes.string.isRequired,
-  contentType: PropTypes.string.isRequired
+  contentType: PropTypes.string.isRequired,
+
+  // Optional
+  fontSize: PropTypes.number,
+  lineWrapping: PropTypes.bool
 };
 
 export default RequestBodyEditor;

app/components/RequestPane.js

@@ -15,6 +15,8 @@ class RequestPane extends Component {
     const {
       request,
       showPasswords,
+      editorFontSize,
+      editorLineWrapping,
       sendRequest,
       updateRequestUrl,
       updateRequestMethod,
@@ -79,6 +81,8 @@ class RequestPane extends Component {
               onChange={updateRequestBody}
               requestId={request._id}
               contentType={request.contentType}
+              fontSize={editorFontSize}
+              lineWrapping={editorLineWrapping}
               body={request.body}
             />
           </TabPanel>
@@ -134,6 +138,8 @@ RequestPane.propTypes = {
 
   // Other
   showPasswords: PropTypes.bool.isRequired,
+  editorFontSize: PropTypes.number.isRequired,
+  editorLineWrapping: PropTypes.bool.isRequired,
 
   // Optional
   request: PropTypes.object,

app/components/ResponsePane.js

@@ -17,7 +17,9 @@ class ResponsePane extends Component {
       request,
       previewMode,
       updatePreviewMode,
-      loadingRequests
+      loadingRequests,
+      editorLineWrapping,
+      editorFontSize
     } = this.props;
 
     const loadStartTime = loadingRequests[request ? request._id : '__NONE__'];
@@ -101,14 +103,17 @@ class ResponsePane extends Component {
               <ResponseViewer
                 contentType={response.contentType}
                 previewMode={PREVIEW_MODE_SOURCE}
+                editorLineWrapping={editorLineWrapping}
+                editorFontSize={editorFontSize}
                 body={response.error}
                 url={response.url}
-                wrap={true}
               />
             ) : (
               <ResponseViewer
                 contentType={response.contentType}
                 previewMode={previewMode}
+                editorLineWrapping={editorLineWrapping}
+                editorFontSize={editorFontSize}
                 body={response.body}
                 url={response.url}
                 wrap={true} // TODO: Make this a user preference
@@ -146,10 +151,12 @@ ResponsePane.propTypes = {
   // Required
   previewMode: PropTypes.string.isRequired,
   loadingRequests: PropTypes.object.isRequired,
+  editorFontSize: PropTypes.number.isRequired,
+  editorLineWrapping: PropTypes.bool.isRequired,
 
   // Other
   response: PropTypes.object,
-  request: PropTypes.object,
+  request: PropTypes.object
 };
 
 export default ResponsePane;

app/components/ResponseViewer.js

@@ -6,7 +6,14 @@ import {PREVIEW_MODE_FRIENDLY, PREVIEW_MODE_SOURCE} from '../lib/previewModes';
 
 class ResponseViewer extends Component {
   render () {
-    const {previewMode, contentType, body, url, wrap} = this.props;
+    const {
+      previewMode,
+      contentType,
+      editorLineWrapping,
+      editorFontSize,
+      body,
+      url
+    } = this.props;
 
     switch (previewMode) {
       case PREVIEW_MODE_FRIENDLY:
@@ -24,7 +31,8 @@ class ResponseViewer extends Component {
             prettify={true}
             mode={contentType}
             readOnly={true}
-            lineWrapping={wrap}
+            lineWrapping={editorLineWrapping}
+            fontSize={editorFontSize}
             placeholder="nothing yet..."
           />
         );
@@ -42,9 +50,10 @@ ResponseViewer.propTypes = {
   body: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
   previewMode: PropTypes.string.isRequired,
+  editorFontSize: PropTypes.number.isRequired,
+  editorLineWrapping: PropTypes.bool.isRequired,
 
   // Optional
-  wrap: PropTypes.bool,
   url: PropTypes.string
 };
 

app/components/SettingsModal.js

@@ -57,71 +57,108 @@ class SettingsTabs extends Component {
             <button>Hotkeys</button>
           </Tab>
           <Tab>
-            <button>About v{getVersion()}</button>
+            <button>About</button>
           </Tab>
         </TabList>
         <TabPanel className="pad">
           <div>
-            <Input
-              id="setting-show-passwords"
-              type="checkbox"
-              value={settings.showPasswords}
-              onChange={showPasswords => db.settingsUpdate(settings, {showPasswords})}
-            />
-            &nbsp;&nbsp;
-            <label htmlFor="setting-show-passwords">
-              Show passwords in plain-text
-            </label>
+            <h2 className="txt-md">
+              <label className="label--small">General Settings</label>
+            </h2>
+            <div>
+              <Input
+                id="setting-show-passwords"
+                type="checkbox"
+                value={settings.showPasswords}
+                onChange={showPasswords => db.settingsUpdate(settings, {showPasswords})}
+              />
+              &nbsp;&nbsp;
+              <label htmlFor="setting-show-passwords">
+                Show passwords in plain-text
+              </label>
+            </div>
+
+            <div className="pad-top">
+              <Input
+                id="setting-follow-redirects"
+                type="checkbox"
+                value={settings.followRedirects}
+                onChange={followRedirects => db.settingsUpdate(settings, {followRedirects})}
+              />
+              &nbsp;&nbsp;
+              <label htmlFor="setting-follow-redirects">
+                Follow redirects automatically
+              </label>
+            </div>
+
+            {/*<div className="pad-top">*/}
+            {/*<Input*/}
+            {/*id="setting-bulk-header-edit"*/}
+            {/*type="checkbox"*/}
+            {/*value={settings.useBulkHeaderEditor}*/}
+            {/*onChange={useBulkHeaderEditor => db.settingsUpdate(settings, {useBulkHeaderEditor})}*/}
+            {/*/>*/}
+            {/*&nbsp;&nbsp;*/}
+            {/*<label htmlFor="setting-bulk-header-edit">*/}
+            {/*Use bulk header editor by default*/}
+            {/*</label>*/}
+            {/*</div>*/}
+
+            {/*<div className="pad-top">*/}
+            {/*<input id="setting-follow-redirects" type="checkbox"/>&nbsp;&nbsp;*/}
+            {/*<label htmlFor="setting-follow-redirects">*/}
+            {/*Follow Redirects*/}
+            {/*</label>*/}
+            {/*</div>*/}
+
+            <div>
+              <label htmlFor="setting-request-timeout" className="pad-top">
+                Request Timeout (ms) (-1 for no timeout)
+              </label>
+              <div className="form-control form-control--outlined no-margin">
+                <Input
+                  id="setting-request-timeout"
+                  type="number"
+                  min={-1}
+                  value={settings.timeout}
+                  onChange={timeout => db.settingsUpdate(settings, {timeout})}
+                />
+              </div>
+            </div>
           </div>
 
           <div className="pad-top">
-            <Input
-              id="setting-follow-redirects"
-              type="checkbox"
-              value={settings.followRedirects}
-              onChange={followRedirects => db.settingsUpdate(settings, {followRedirects})}
-            />
-            &nbsp;&nbsp;
-            <label htmlFor="setting-follow-redirects">
-              Follow redirects automatically
-            </label>
-          </div>
+            <br/>
+            <label className="label--small">Code Editor Settings</label>
 
-          {/*<div className="pad-top">*/}
-          {/*<Input*/}
-          {/*id="setting-bulk-header-edit"*/}
-          {/*type="checkbox"*/}
-          {/*value={settings.useBulkHeaderEditor}*/}
-          {/*onChange={useBulkHeaderEditor => db.settingsUpdate(settings, {useBulkHeaderEditor})}*/}
-          {/*/>*/}
-          {/*&nbsp;&nbsp;*/}
-          {/*<label htmlFor="setting-bulk-header-edit">*/}
-          {/*Use bulk header editor by default*/}
-          {/*</label>*/}
-          {/*</div>*/}
-
-          {/*<div className="pad-top">*/}
-          {/*<input id="setting-follow-redirects" type="checkbox"/>&nbsp;&nbsp;*/}
-          {/*<label htmlFor="setting-follow-redirects">*/}
-          {/*Follow Redirects*/}
-          {/*</label>*/}
-          {/*</div>*/}
-
-          <div>
-            <label htmlFor="setting-request-timeout" className="pad-top">
-              Request Timeout (ms) (-1 for no timeout)
-            </label>
-            <div className="form-control form-control--outlined no-margin">
+            <div className="pad-top">
               <Input
-                id="setting-request-timeout"
-                type="number"
-                min={-1}
-                value={settings.timeout}
-                onChange={timeout => db.settingsUpdate(settings, {timeout})}
+                id="setting-editor-line-wrapping"
+                type="checkbox"
+                value={settings.editorLineWrapping}
+                onChange={editorLineWrapping => db.settingsUpdate(settings, {editorLineWrapping})}
               />
+              &nbsp;&nbsp;
+              <label htmlFor="setting-editor-line-wrapping">
+                Wrap Long Lines
+              </label>
+            </div>
+            <div>
+              <label htmlFor="setting-editor-font-size" className="pad-top">
+                Font Size (px)
+              </label>
+              <div className="form-control form-control--outlined no-margin">
+                <Input
+                  id="setting-editor-font-size"
+                  type="number"
+                  min={8}
+                  max={20}
+                  value={settings.editorFontSize}
+                  onChange={editorFontSize => db.settingsUpdate(settings, {editorFontSize})}
+                />
+              </div>
             </div>
           </div>
-          <br/>
         </TabPanel>
         <TabPanel className="pad">
           <p>
@@ -207,7 +244,11 @@ class SettingsModal extends ModalComponent {
 
     return (
       <Modal ref="modal" tall={true} {...this.props}>
-        <ModalHeader>Insomnia Settings</ModalHeader>
+        <ModalHeader>
+          Insomnia
+          {" "}
+          <span className="faint txt-sm">v{getVersion()}</span>
+        </ModalHeader>
         <ModalBody>
           <ConnectedSettingsTabs />
         </ModalBody>

app/components/base/Editor.js

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {getDOMNode} from 'react-dom';
 import CodeMirror from 'codemirror';
+import classnames from 'classnames';
 
 import {DEBOUNCE_MILLIS} from '../../lib/constants';
 
@@ -222,18 +223,17 @@ class Editor extends Component {
   }
 
   render () {
-    const classes = [
+    const {value, readOnly, fontSize} = this.props;
+
+    const classes = classnames(
       'editor',
       this.props.className,
-      this.props.readOnly ? 'editor--readonly' : ''
-    ];
-
-    const {path, value, readOnly} = this.props;
+      {'editor--readonly': readOnly}
+    );
 
     return (
-      <div className={classes.join(' ')}>
+      <div className={classes} style={{fontSize: `${fontSize || 12}px`}}>
           <textarea
-            name={path}
             ref='textarea'
             defaultValue={value}
             readOnly={readOnly}
@@ -249,8 +249,8 @@ Editor.propTypes = {
   onFocusChange: PropTypes.func,
   mode: PropTypes.string,
   placeholder: PropTypes.string,
-  line: PropTypes.string,
-  path: PropTypes.string,
+  lineWrapping: PropTypes.bool,
+  fontSize: PropTypes.number,
   value: PropTypes.string,
   prettify: PropTypes.bool,
   className: PropTypes.any

app/containers/App.js

@@ -452,6 +452,8 @@ class App extends Component {
           request={activeRequest}
           sendRequest={actions.requests.send}
           showPasswords={settings.showPasswords}
+          editorFontSize={settings.editorFontSize}
+          editorLineWrapping={settings.editorLineWrapping}
           updateRequestBody={body => db.requestUpdate(activeRequest, {body})}
           updateRequestUrl={url => this._handleUrlChanged(url)}
           updateRequestMethod={method => db.requestUpdate(activeRequest, {method})}
@@ -471,6 +473,8 @@ class App extends Component {
           ref="responsePane"
           response={activeResponse}
           request={activeRequest}
+          editorFontSize={settings.editorFontSize}
+          editorLineWrapping={settings.editorLineWrapping}
           previewMode={activeRequest ? activeRequest.metaPreviewMode : PREVIEW_MODE_FRIENDLY}
           updatePreviewMode={metaPreviewMode => db.requestUpdate(activeRequest, {metaPreviewMode})}
           loadingRequests={requests.loadingRequests}

app/css/components/editor.scss

@@ -10,7 +10,6 @@
     height: 100% !important;
     width: 100%;
     font-family: 'Source Code Pro', Menlo, 'Ubuntu Mono', 'Courier New', monospace;
-    font-size: 0.96rem;
     box-sizing: border-box;
     padding-top: $padding-sm;
   }

app/css/components/forms.scss

@@ -18,14 +18,6 @@
     }
   }
 
-  &.form-control--compact {
-    height: $line-height-sm;
-  }
-
-  &.form-control--super-compact {
-    height: $line-height-xs;
-  }
-
   &.form-control--outlined,
   &.form-control--underlined {
     height: auto;

app/css/components/modal.scss

@@ -9,7 +9,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  padding: $padding-xl;
+  padding: $padding-lg;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
 

app/database/index.js

@@ -19,6 +19,8 @@ const MODEL_DEFAULTS = {
     showPasswords: true,
     useBulkHeaderEditor: false,
     followRedirects: true,
+    editorFontSize: 12,
+    editorLineWrapping: true,
     timeout: -1
   }),
   [TYPE_WORKSPACE]: () => ({