renewal key binding

browser/components/CodeEditor.js

@@ -2,7 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import modes from '../lib/modes'
 import _ from 'lodash'
-var ace = window.ace
+
+const remote = require('electron').remote
+const ace = window.ace
 
 module.exports = React.createClass({
   propTypes: {
@@ -40,6 +42,15 @@ module.exports = React.createClass({
       },
       readOnly: true
     })
+    editor.commands.addCommand({
+      name: 'Focus title',
+      bindKey: {win: 'Esc', mac: 'Esc'},
+      exec: function (editor, e) {
+        console.log(e)
+        remote.getCurrentWebContents().send('detail-edit')
+      },
+      readOnly: true
+    })
 
     editor.setReadOnly(!!this.props.readOnly)
 

browser/lib/modal.js

@@ -1,6 +1,8 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 
+const remote = require('electron').remote
+
 class ModalBase extends React.Component {
   constructor (props) {
     super(props)
@@ -13,6 +15,8 @@ class ModalBase extends React.Component {
 
   close () {
     if (modalBase != null) modalBase.setState({component: null, componentProps: null, isHidden: true})
+
+    remote.getCurrentWebContents().send('list-focus')
   }
 
   render () {
@@ -38,9 +42,15 @@ export function openModal (component, props) {
 
 export function closeModal () {
   if (modalBase == null) { return }
-  modalBase.setState({component: null, componentProps: null, isHidden: true})
+  modalBase.close()
 }
 
 export function isModalOpen () {
   return !modalBase.state.isHidden
 }
+
+export default {
+  open: openModal,
+  close: closeModal,
+  isOpen: isModalOpen
+}

browser/main/HomePage/ArticleDetail/index.js

@@ -14,11 +14,12 @@ import TagSelect from 'browser/components/TagSelect'
 import ModeSelect from 'browser/components/ModeSelect'
 import activityRecord from 'browser/lib/activityRecord'
 import ShareButton from './ShareButton'
-import { openModal } from 'browser/lib/modal'
+import { openModal, isModalOpen } from 'browser/lib/modal'
 import DeleteArticleModal from '../../modal/DeleteArticleModal'
 
 const electron = require('electron')
 const clipboard = electron.clipboard
+const ipc = electron.ipcRenderer
 
 const OSX = process.platform === 'darwin'
 const BRAND_COLOR = '#18AF90'
@@ -88,6 +89,23 @@ export default class ArticleDetail extends React.Component {
   constructor (props) {
     super(props)
 
+    this.saveHandler = e => {
+      if (isModalOpen()) return true
+      this.handleSaveButtonClick()
+    }
+    this.deleteHandler = e => {
+      if (isModalOpen()) return true
+      this.handleDeleteButtonClick()
+    }
+    this.togglePreviewHandler = e => {
+      if (isModalOpen()) return true
+      this.handleTogglePreviewButtonClick()
+    }
+    this.editHandler = e => {
+      if (isModalOpen()) return true
+      this.editArticle()
+    }
+
     this.state = {
       article: Object.assign({content: ''}, props.activeArticle),
       previewMode: false,
@@ -102,10 +120,20 @@ export default class ArticleDetail extends React.Component {
     this.shareDropdownInterceptor = e => {
       e.stopPropagation()
     }
+
+    ipc.on('detail-save', this.saveHandler)
+    ipc.on('detail-delete', this.deleteHandler)
+    ipc.on('detail-toggle-preview', this.togglePreviewHandler)
+    ipc.on('detail-edit', this.editHandler)
   }
 
   componentWillUnmount () {
     clearInterval(this.refreshTimer)
+
+    ipc.removeListener('detail-save', this.saveHandler)
+    ipc.removeListener('detail-delete', this.deleteHandler)
+    ipc.removeListener('detail-toggle-preview', this.togglePreviewHandler)
+    ipc.removeListener('detail-on', this.editHandler)
   }
 
   componentWillReceiveProps (nextProps) {
@@ -127,6 +155,12 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  editArticle () {
+    ReactDOM.findDOMNode(this.refs.title).focus()
+    ReactDOM.findDOMNode(this.refs.title).select()
+    this.setState({previewMode: false})
+  }
+
   cacheArticle () {
     let { dispatch } = this.props
 

browser/main/HomePage/ArticleList.js

@@ -7,13 +7,25 @@ import FolderMark from 'browser/components/FolderMark'
 import TagLink from './TagLink'
 import _ from 'lodash'
 
+const electron = require('electron')
+const remote = electron.remote
+const ipc = electron.ipcRenderer
+
 export default class ArticleList extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.focusHandler = e => this.focus()
+  }
+
   componentDidMount () {
     this.refreshTimer = setInterval(() => this.forceUpdate(), 60 * 1000)
+    ipc.on('list-focus', this.focusHandler)
   }
 
   componentWillUnmount () {
     clearInterval(this.refreshTimer)
+    ipc.removeListener('list-focus', this.focusHandler)
   }
 
   componentDidUpdate () {
@@ -36,6 +48,10 @@ export default class ArticleList extends React.Component {
     }
   }
 
+  focus () {
+    ReactDOM.findDOMNode(this).focus()
+  }
+
   // 移動ができなかったらfalseを返す:
   selectPriorArticle () {
     let { articles, activeArticle, dispatch } = this.props
@@ -68,6 +84,41 @@ export default class ArticleList extends React.Component {
     }
   }
 
+  handleArticleListKeyDown (e) {
+    console.log(e.keyCode)
+    if (e.metaKey || e.ctrlKey) return true
+
+    if (e.keyCode === 65) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('nav-new-post')
+    }
+
+    if (e.keyCode === 68) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-delete')
+    }
+
+    if (e.keyCode === 69) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-edit')
+    }
+
+    if (e.keyCode === 83) {
+      e.preventDefault()
+      remote.getCurrentWebContents().send('detail-save')
+    }
+
+    if (e.keyCode === 38) {
+      e.preventDefault()
+      this.selectPriorArticle()
+    }
+
+    if (e.keyCode === 40) {
+      e.preventDefault()
+      this.selectNextArticle()
+    }
+  }
+
   render () {
     let { articles, modified, activeArticle, folders } = this.props
 
@@ -130,7 +181,7 @@ export default class ArticleList extends React.Component {
     })
 
     return (
-      <div className='ArticleList'>
+      <div tabIndex='1' onKeyDown={e => this.handleArticleListKeyDown(e)} className='ArticleList'>
         {articleElements}
       </div>
     )

browser/main/HomePage/ArticleNavigator.js

@@ -1,12 +1,14 @@
 import React, { PropTypes } from 'react'
 import { findWhere } from 'lodash'
 import { setSearchFilter, switchFolder, saveArticle } from '../actions'
-import { openModal } from 'browser/lib/modal'
+import { openModal, isModalOpen } from 'browser/lib/modal'
 import FolderMark from 'browser/components/FolderMark'
 import Preferences from '../modal/Preferences'
 import CreateNewFolder from '../modal/CreateNewFolder'
 import keygen from 'browser/lib/keygen'
 
+const ipc = require('electron').ipcRenderer
+
 const BRAND_COLOR = '#18AF90'
 
 const preferenceTutorialElement = (
@@ -58,6 +60,28 @@ c-3.4-6.1-8.2-11.3-13.8-15.4C50.2,11.6,31,10.9,15.3,19C13.6,19.8,15.1,22.4,16.8,
 )
 
 export default class ArticleNavigator extends React.Component {
+  constructor (props) {
+    super(props)
+    this.newPostHandler = e => {
+      if (isModalOpen()) return true
+      this.handleNewPostButtonClick(e)
+    }
+    this.newFolderHandler = e => {
+      if (isModalOpen()) return true
+      this.handleNewFolderButton(e)
+    }
+  }
+
+  componentDidMount () {
+    ipc.on('nav-new-post', this.newPostHandler)
+    ipc.on('nav-new-folder', this.newFolderHandler)
+  }
+
+  componentWillUnmount () {
+    ipc.removeListener('nav-new-post', this.newPostHandler)
+    ipc.removeListener('nav-new-folder', this.newFolderHandler)
+  }
+
   handlePreferencesButtonClick (e) {
     openModal(Preferences)
   }
@@ -136,7 +160,7 @@ export default class ArticleNavigator extends React.Component {
         <div className='controlSection'>
           <button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>
             New Post
-            <span className='tooltip'>Create a new Post ({process.platform === 'darwin' ? '⌘' : '^'} + Enter or a)</span>
+            <span className='tooltip'>Create a new Post ({process.platform === 'darwin' ? '⌘' : '^'} + n)</span>
           </button>
 
           {status.isTutorialOpen ? newPostTutorialElement : null}
@@ -148,7 +172,7 @@ export default class ArticleNavigator extends React.Component {
             <div className='title'>Folders</div>
             <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
               <i className='fa fa-fw fa-plus'/>
-              <span className='tooltip'>Create a new folder</span>
+              <span className='tooltip'>Create a new folder ({process.platform === 'darwin' ? '⌘' : '^'} + Shift + n)</span>
             </button>
 
             {status.isTutorialOpen ? newFolderTutorialElement : null}

browser/main/HomePage/ArticleTopBar.js

@@ -3,11 +3,13 @@ import ReactDOM from 'react-dom'
 import ExternalLink from 'browser/components/ExternalLink'
 import { setSearchFilter, clearSearch, toggleOnlyUnsavedFilter, toggleTutorial, saveAllArticles, switchArticle } from '../actions'
 import store from '../store'
+import { isModalOpen } from 'browser/lib/modal'
 
 const electron = require('electron')
 const remote = electron.remote
 const Menu = remote.Menu
 const MenuItem = remote.MenuItem
+const ipc = electron.ipcRenderer
 
 const OSX = process.platform === 'darwin'
 
@@ -64,6 +66,15 @@ export default class ArticleTopBar extends React.Component {
   constructor (props) {
     super(props)
 
+    this.saveAllHandler = e => {
+      if (isModalOpen()) return true
+      this.handleSaveAllButtonClick(e)
+    }
+    this.focusSearchHandler = e => {
+      if (isModalOpen()) return true
+      this.focusInput(e)
+    }
+
     this.state = {
       isTooltipHidden: true,
       isLinksDropdownOpen: false
@@ -87,11 +98,17 @@ export default class ArticleTopBar extends React.Component {
       }
     }
     document.addEventListener('click', this.hideLinksDropdown)
+
+    ipc.on('top-save-all', this.saveAllHandler)
+    ipc.on('top-focus-search', this.focusSearchHandler)
   }
 
   componentWillUnmount () {
     document.removeEventListener('click', this.hideLinksDropdown)
     this.linksButton.removeEventListener('click', this.showLinksDropdown())
+
+    ipc.removeListener('top-save-all', this.saveAllHandler)
+    ipc.removeListener('top-focus-search', this.focusSearchHandler)
   }
 
   handleTooltipRequest (e) {
@@ -112,10 +129,10 @@ export default class ArticleTopBar extends React.Component {
       dispatch(clearSearch())
       return
     }
-    this.blurInput()
   }
 
   focusInput () {
+    console.log('focinp')
     this.searchInput.focus()
   }
 
@@ -145,6 +162,7 @@ export default class ArticleTopBar extends React.Component {
     let { dispatch } = this.props
 
     dispatch(saveAllArticles())
+    remote.getCurrentWebContents().send('list-focus')
   }
 
   handleSaveMenuButtonClick (e) {

browser/main/HomePage/index.js

@@ -1,5 +1,6 @@
 import React, { PropTypes} from 'react'
 import { connect } from 'react-redux'
+import ReactDOM from 'react-dom'
 import { toggleTutorial } from '../actions'
 import ArticleNavigator from './ArticleNavigator'
 import ArticleTopBar from './ArticleTopBar'
@@ -26,15 +27,14 @@ class HomePage extends React.Component {
   }
 
   handleKeyDown (e) {
-    let cmdOrCtrl = process.platform === 'darwin' ? e.metaKey : e.ctrlKey
-
     if (isModalOpen()) {
       if (e.keyCode === 27) closeModal()
       return
     }
 
     let { status, dispatch } = this.props
-    let { nav, top, list, detail } = this.refs
+    let { top, list } = this.refs
+    let listElement = ReactDOM.findDOMNode(list)
 
     if (status.isTutorialOpen) {
       dispatch(toggleTutorial())
@@ -42,28 +42,24 @@ class HomePage extends React.Component {
       return
     }
 
-    // Search inputがfocusされていたら大体のキー入力は無視される。
-    if (top.isInputFocused() && !(e.metaKey || e.ctrlKey)) {
-      if (e.keyCode === 13 || e.keyCode === 27) top.escape()
+    if (e.keyCode === 13 && top.isInputFocused()) {
+      listElement.focus()
+      return
+    }
+    if (e.keyCode === 27 && top.isInputFocused()) {
+      if (status.search.length > 0) top.escape()
+      else listElement.focus()
       return
     }
 
-    // `detail`の`openDeleteConfirmMenu`が`true`なら呼ばれない。
-    if (e.keyCode === 27 || (e.keyCode === 70 && cmdOrCtrl)) {
-      top.focusInput()
-    }
-
-    if (e.keyCode === 38) {
-      list.selectPriorArticle()
-    }
-
-    if (e.keyCode === 40) {
-      list.selectNextArticle()
-    }
-
-    if (e.keyCode === 78 && cmdOrCtrl) {
-      nav.handleNewPostButtonClick()
-      e.preventDefault()
+    // Search inputがfocusされていたら大体のキー入力は無視される。
+    if (e.keyCode === 27) {
+      if (document.activeElement !== listElement) {
+        listElement.focus()
+      } else {
+        top.focusInput()
+      }
+      return
     }
   }
 

browser/styles/main/ArticleDetail.styl

@@ -1,5 +1,4 @@
 noTagsColor = #999
-iptFocusBorderColor = #369DCD
 
 infoButton()
   display inline-block
@@ -7,14 +6,17 @@ infoButton()
   cursor pointer
   height 33px
   width 33px
-  border none
   margin-right 5px
   font-size 18px
   color inactiveTextColor
   background-color white
   padding 0
+  border 1px solid white
+  &:focus
+    border-color focusBorderColor
   &:hover
     color inherit
+
 .ArticleDetail
   absolute right bottom
   top 60px
@@ -55,7 +57,7 @@ infoButton()
       &:hover
         background-color white
       &:focus
-        border-color iptFocusBorderColor
+        border-color focusBorderColor
       &>.tutorial
         position fixed
         z-index 35
@@ -124,11 +126,15 @@ infoButton()
             border-top solid 1px darken(brandColor, 5%)
             border-bottom solid 1px darken(brandColor, 5%)
             border-left solid 1px darken(brandColor, 5%)
+            border-right solid 1px transparent
             border-radius left 2px
             background-color brandColor
             &:hover
               background-color lighten(brandColor, 10%)
               border-color lighten(brandColor, 10%)
+            &:focus
+              background-color lighten(brandColor, 10%)
+              border-color focusBorderColor
           .TagSelect-tags-item-label
             background-color brandColor
             float left
@@ -142,12 +148,13 @@ infoButton()
         input.TagSelect-input
           background-color transparent
           border none
+          border-bottom 1px solid transparent
           outline none
           margin 0 2px
           transition 0.15s
           height 18px
           &:focus
-            font-size 13px
+            border-color focusBorderColor
       .TagSelect-suggest
         position fixed
         width 150px
@@ -208,7 +215,7 @@ infoButton()
             padding 0 5px
             line-height 33px
         &.edit
-          border-color iptFocusBorderColor
+          border-color focusBorderColor
           input
             width 120px
             line-height 31px

browser/styles/main/ArticleList.styl

@@ -8,6 +8,8 @@ articleItemColor = #777
   width 250px
   border-top 1px solid borderColor
   border-right 1px solid borderColor
+  &:focus
+    border-color focusBorderColor
   overflow-y auto
   noSelect()
   &>div

browser/styles/main/ArticleTopBar.styl

@@ -137,6 +137,11 @@ infoBtnActiveBgColor = #3A3A3A
         &:active
           color inherit
           background-color lighten(topBarBtnBgColor, 15%)
+        &:disabled
+          color inactiveTextColor
+          background transparent
+        &:focus
+          color focusBorderColor
         &.ArticleTopBar-left-unsaved-save-button
           position relative
           .ArticleTopBar-left-unsaved-save-button-count
@@ -175,8 +180,10 @@ infoBtnActiveBgColor = #3A3A3A
       background-color infoBtnBgColor
       color bgColor
       border-radius 11px
-      border none
+      border 1px solid bgColor
       transition 0.1s
+      &:focus
+        border-color focusBorderColor
       .tooltip
         tooltip()
         margin-left -50px
@@ -192,6 +199,12 @@ infoBtnActiveBgColor = #3A3A3A
       top 8px
       right 15px
       opacity 0.7
+      border-radius 23px
+      height 46px
+      width 46px
+      border 1px solid transparent
+      &:focus
+        border-color focusBorderColor
       &:hover
         opacity 1
         .tooltip

browser/styles/main/modal/DeleteArticleModal.styl

@@ -1,5 +1,5 @@
 .DeleteArticleModal.modal
-  width 350px
+  width 350px !important
   top 100px
   user-select none
   .title
@@ -21,9 +21,13 @@
       margin-left 5px
       &:hover
         background-color darken(white, 10%)
+      &:focus
+        border-color focusBorderColor
       &.danger
         border-color #E9432A
         background-color #E9432A
         color white
         &:hover
           background-color lighten(#E9432A, 15%)
+        &:focus
+          background-color lighten(#E9432A, 15%)

browser/styles/vars.styl

@@ -3,6 +3,8 @@ highlightenBorderColor = darken(borderColor, 20%)
 invBorderColor = #404849
 brandBorderColor = #3FB399
 
+focusBorderColor = #369DCD
+
 buttonBorderColor = #4C4C4C
 
 lightButtonColor = #898989