add right click to switch edit/preview option to app settings

2025-12-13 17:56:25 +00:00 · 2016-01-16 02:40:31 +09:00
parent 445332c27c
commit 93c03f4e88
5 changed files with 105 additions and 23 deletions
--- a/browser/components/CodeEditor.js
+++ b/browser/components/CodeEditor.js
@@ -191,8 +191,8 @@ CodeEditor.propTypes = {
    key: PropTypes.string
  }),
  className: PropTypes.string,
-  onChange: PropTypes.func,
  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
  readOnly: PropTypes.bool
 }

--- a/browser/main/HomePage/ArticleDetail/ArticleEditor.js
+++ b/browser/main/HomePage/ArticleDetail/ArticleEditor.js
@@ -3,21 +3,42 @@ import ReactDOM from 'react-dom'
 import MarkdownPreview from 'browser/components/MarkdownPreview'
 import CodeEditor from 'browser/components/CodeEditor'
 import activityRecord from 'browser/lib/activityRecord'
+import fetchConfig from 'browser/lib/fetchConfig'
+
+const electron = require('electron')
+const ipc = electron.ipcRenderer

 export const PREVIEW_MODE = 'PREVIEW_MODE'
 export const EDIT_MODE = 'EDIT_MODE'

+let config = fetchConfig()
+ipc.on('config-apply', function (e, newConfig) {
+  config = newConfig
+})
+
 export default class ArticleEditor extends React.Component {
  constructor (props) {
    super(props)
+
+    this.configApplyHandler = (e, config) => this.handleConfigApply(e, config)
    this.isMouseDown = false
    this.state = {
      status: PREVIEW_MODE,
      cursorPosition: null,
-      firstVisibleRow: null
+      firstVisibleRow: null,
+      switchPreview: config['switch-preview']
    }
  }

+  componentDidMount () {
+    console.log(this.state.switchPreview)
+    ipc.on('config-apply', this.configApplyHandler)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('config-apply', this.configApplyHandler)
+  }
+
  componentWillReceiveProps (nextProps) {
    if (nextProps.article.key !== this.props.article.key) {
      this.setState({
@@ -26,6 +47,12 @@ export default class ArticleEditor extends React.Component {
    }
  }

+  handleConfigApply (e, newConfig) {
+    this.setState({
+      switchPreview: newConfig['switch-preview']
+    })
+  }
+
  resetCursorPosition () {
    this.setState({
      cursorPosition: null,
@@ -70,14 +97,15 @@ export default class ArticleEditor extends React.Component {
  }

  handlePreviewMouseDown (e) {
-    if (e.button === 2) return true
+    if (this.state.switchPreview === 'blur' && e.button === 0) {
      this.isDrag = false
      this.isMouseDown = true
      this.moveCount = 0
    }
+  }

  handlePreviewMouseMove () {
-    if (this.isMouseDown) {
+    if (this.state.switchPreview === 'blur' && this.isMouseDown) {
      this.moveCount++
      if (this.moveCount > 5) {
        this.isDrag = true
@@ -86,17 +114,32 @@ export default class ArticleEditor extends React.Component {
  }

  handlePreviewMouseUp (e) {
-    if (e.button === 2) return true
+    if (this.state.switchPreview === 'blur' && e.button === 0) {
      this.isMouseDown = false
      this.moveCount = 0
      if (!this.isDrag) {
        this.switchEditMode()
      }
    }
+  }
+
+  handleRightClickPreview (e) {
+    let { article } = this.props
+    if (this.state.switchPreview !== 'rightclick' || article.mode !== 'markdown') return true
+
+    this.switchEditMode()
+  }
+
+  handleRightClickCodeEditor (e) {
+    let { article } = this.props
+    if (this.state.switchPreview !== 'rightclick' || article.mode !== 'markdown') return true
+
+    this.switchPreviewMode()
+  }

  handleBlurCodeEditor (e) {
    let isFocusingToThis = e.relatedTarget === ReactDOM.findDOMNode(this)
-    if (isFocusingToThis) {
+    if (isFocusingToThis || this.state.switchPreview !== 'blur') {
      return
    }

@@ -115,7 +158,7 @@ export default class ArticleEditor extends React.Component {
    let showPreview = article.mode === 'markdown' && this.state.status === PREVIEW_MODE
    if (showPreview) {
      return (
-        <div className='ArticleEditor'>
+        <div onContextMenu={e => this.handleRightClickPreview(e)} className='ArticleEditor'>
          <MarkdownPreview
            ref='preview'
            onMouseUp={e => this.handlePreviewMouseUp(e)}
@@ -123,13 +166,18 @@ export default class ArticleEditor extends React.Component {
            onMouseMove={e => this.handlePreviewMouseMove(e)}
            content={article.content}
          />
-          <div className='ArticleDetail-panel-content-tooltip'>Click to Edit</div>
+          <div className='ArticleDetail-panel-content-tooltip' children={
+              this.state.switchPreview === 'blur'
+                ? 'Click to Edit'
+                : 'Right Click to Edit'
+            }
+          />
        </div>
      )
    }

    return (
-      <div tabIndex='5' className='ArticleEditor'>
+      <div onContextMenu={e => this.handleRightClickCodeEditor(e)} tabIndex='5' className='ArticleEditor'>
        <CodeEditor
          ref='editor'
          onBlur={e => this.handleBlurCodeEditor(e)}
@@ -138,7 +186,13 @@ export default class ArticleEditor extends React.Component {
        />
        {article.mode === 'markdown'
          ? (
-            <div className='ArticleDetail-panel-content-tooltip'>Press ESC to watch Preview</div>
+            <div className='ArticleDetail-panel-content-tooltip'
+              children={
+                this.state.switchPreview === 'blur'
+                  ? 'Press ESC to Watch Preview'
+                  : 'Right Click to Watch Preview'
+              }
+            />
          )
          : null
        }
--- a/browser/main/modal/Preference/AppSettingTab.js
+++ b/browser/main/modal/Preference/AppSettingTab.js
@@ -138,9 +138,9 @@ export default class AppSettingTab extends React.Component {
            <label>Editor Font Family</label>
            <input valueLink={this.linkState('config.editor-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
          </div>
-          <div className='sectionSelect'>
+          <div className='sectionMultiSelect'>
            <label>Editor Indent Style</label>
-            <div className='sectionSelect-input'>
+            <div className='sectionMultiSelect-input'>
              type
              <select valueLink={this.linkState('config.editor-indent-type')}>
                <option value='space'>Space</option>
@@ -162,8 +162,15 @@ export default class AppSettingTab extends React.Component {
            <label>Preview Font Family</label>
            <input valueLink={this.linkState('config.preview-font-family')} onKeyDown={e => this.handleConfigKeyDown(e)} type='text'/>
          </div>
+          <div className='sectionSelect'>
+            <label>Switching Preview</label>
+            <select valueLink={this.linkState('config.switch-preview')}>
+              <option value='blur'>When Editor Blurred</option>
+              <option value='rightclick'>When Right Clicking</option>
+            </select>
+          </div>
          {
-            true// !OSX
+            global.process.platform === 'win32'
            ? (
              <div className='sectionCheck'>
                <label><input onClick={e => this.handleDisableDirectWriteClick(e)} checked={this.state.config['disable-direct-write']} disabled={OSX} type='checkbox'/>Disable Direct Write<span className='sectionCheck-warn'>It will be applied after restarting</span></label>
--- a/browser/styles/main/modal/Preferences.styl
+++ b/browser/styles/main/modal/Preferences.styl
@@ -60,7 +60,7 @@ iptFocusBorderColor = #369DCD
    left 180px
    overflow-y auto
    &>.section
-      padding 10px
+      padding 10px 20px
      border-bottom 1px solid borderColor
      overflow-y auto
      &:nth-last-child(1)
@@ -102,7 +102,6 @@ iptFocusBorderColor = #369DCD
          &:focus
            border-color iptFocusBorderColor
      &>.sectionSelect
-
        margin-bottom 5px
        clearfix()
        height 33px
@@ -111,7 +110,28 @@ iptFocusBorderColor = #369DCD
          padding-left 15px
          float left
          line-height 33px
-        .sectionSelect-input
+        select
+          float left
+          width 200px
+          height 25px
+          margin-top 4px
+          border-radius 5px
+          border 1px solid borderColor
+          padding 0 10px
+          font-size 14px
+          outline none
+          &:focus
+            border-color iptFocusBorderColor
+      &>.sectionMultiSelect
+        margin-bottom 5px
+        clearfix()
+        height 33px
+        label
+          width 150px
+          padding-left 15px
+          float left
+          line-height 33px
+        .sectionMultiSelect-input
          float left
          select
            width 80px
--- a/lib/config.js
+++ b/lib/config.js
@@ -11,6 +11,7 @@ const defaultConfig = {
  'editor-indent-size': '4',
  'preview-font-size': '14',
  'preview-font-family': 'Lato',
+  'switch-preview': 'blur',
  'disable-direct-write': false
 }
 const configFile = 'config.json'