Tooltip追加、キー反応改善、Pinch2Zoom使用禁止、Webpack config debug

browser/main/HomePage/ArticleDetail.js

@@ -1,10 +1,11 @@
 import React, { PropTypes } from 'react'
+import ReactDOM from 'react-dom'
 import moment from 'moment'
 import _ from 'lodash'
 import ModeIcon from 'boost/components/ModeIcon'
 import MarkdownPreview from 'boost/components/MarkdownPreview'
 import CodeEditor from 'boost/components/CodeEditor'
-import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle } from 'boost/actions'
+import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle, NEW } from 'boost/actions'
 import aceModes from 'boost/ace-modes'
 import Select from 'react-select'
 import linkState from 'boost/linkState'
@@ -32,23 +33,33 @@ export default class ArticleDetail extends React.Component {
     }
   }
 
+  componentDidUpdate (prevProps) {
+    let isModeChanged = prevProps.status.mode !== this.props.status.mode
+    if (isModeChanged && this.props.status.mode !== IDLE_MODE) {
+      ReactDOM.findDOMNode(this.refs.title).focus()
+    }
+  }
+
   componentWillReceiveProps (nextProps) {
     let nextState = {}
 
     let isArticleChanged = nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key)
     let isModeChanged = nextProps.status.mode !== this.props.status.mode
+    // Reset article input
     if (isArticleChanged || (isModeChanged && nextProps.status.mode !== IDLE_MODE)) {
       Object.assign(nextState, {
         article: makeInstantArticle(nextProps.activeArticle)
       })
     }
 
+    // Clean state
     if (isModeChanged) {
       Object.assign(nextState, {
         openDeleteConfirmMenu: false,
         previewMode: false
       })
     }
+
     this.setState(nextState)
   }
 
@@ -76,7 +87,7 @@ export default class ArticleDetail extends React.Component {
     this.setState({openDeleteConfirmMenu: false})
   }
 
-  handleDeleteCancleButtonClick (e) {
+  handleDeleteCancelButtonClick (e) {
     this.setState({openDeleteConfirmMenu: false})
   }
 
@@ -102,7 +113,7 @@ export default class ArticleDetail extends React.Component {
                 <button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>
                   <i className='fa fa-fw fa-check'/> Sure
                 </button>
-                <button onClick={e => this.handleDeleteCancleButtonClick(e)}>
+                <button onClick={e => this.handleDeleteCancelButtonClick(e)}>
                   <i className='fa fa-fw fa-times'/> Cancel
                 </button>
               </div>
@@ -119,8 +130,12 @@ export default class ArticleDetail extends React.Component {
                 <div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
               </div>
               <div className='right'>
-                <button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
-                <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-trash'/></button>
+                <button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
+                  <i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit 編集(e)</span>
+                </button>
+                <button onClick={e => this.handleDeleteButtonClick(e)} className='deleteBtn'>
+                  <i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete 削除(d)</span>
+                </button>
               </div>
             </div>
           )
@@ -143,7 +158,9 @@ export default class ArticleDetail extends React.Component {
   }
 
   handleCancelButtonClick (e) {
-    this.props.dispatch(switchMode(IDLE_MODE))
+    let { activeArticle, dispatch } = this.props
+    if (activeArticle.status === NEW) dispatch(switchArticle(null))
+    dispatch(switchMode(IDLE_MODE))
   }
 
   handleSaveButtonClick (e) {

browser/main/HomePage/ArticleNavigator.js

@@ -57,17 +57,26 @@ export default class ArticleNavigator extends React.Component {
         <div className='userInfo'>
           <div className='userProfileName'>{userName}</div>
           <div className='userName'>local</div>
-          <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
+          <button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
+            <i className='fa fa-fw fa-chevron-down'/>
+            <span className='tooltip'>Preferences 環境設定</span>
+          </button>
         </div>
 
         <div className='controlSection'>
-          <button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>New Post</button>
+          <button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>
+            New Post
+            <span className='tooltip'>新しいポスト (⌘ + Enter or a)</span>
+          </button>
         </div>
 
         <div className='folders'>
           <div className='header'>
             <div className='title'>Folders</div>
-            <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'><i className='fa fa-fw fa-plus'/></button>
+            <button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
+              <i className='fa fa-fw fa-plus'/>
+              <span className='tooltip'>New folder 新しいフォルダー</span>
+            </button>
           </div>
           <div className='folderList'>
             <button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>

browser/main/HomePage/ArticleTopBar.js

@@ -4,6 +4,32 @@ import ExternalLink from 'boost/components/ExternalLink'
 import { setSearchFilter, clearSearch } from 'boost/actions'
 
 export default class ArticleTopBar extends React.Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      isTooltipHidden: true
+    }
+  }
+
+  componentDidMount () {
+    this.searchInput = ReactDOM.findDOMNode(this.refs.searchInput)
+  }
+
+  componentWillUnmount () {
+    this.searchInput.removeEventListener('keydown', this.showTooltip)
+    this.searchInput.removeEventListener('focus', this.showTooltip)
+    this.searchInput.removeEventListener('blur', this.showTooltip)
+  }
+
+  handleTooltipRequest (e) {
+    if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
+      this.setState({isTooltipHidden: false})
+    } else {
+      this.setState({isTooltipHidden: true})
+    }
+  }
+
   isInputFocused () {
     return document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)
   }
@@ -18,17 +44,18 @@ export default class ArticleTopBar extends React.Component {
   }
 
   focusInput () {
-    ReactDOM.findDOMNode(this.refs.searchInput).focus()
+    this.searchInput.focus()
   }
 
   blurInput () {
-    ReactDOM.findDOMNode(this.refs.searchInput).blur()
+    this.searchInput.blur()
   }
 
   handleSearchChange (e) {
     let { dispatch } = this.props
 
     dispatch(setSearchFilter(e.target.value))
+    this.handleTooltipRequest()
   }
 
   handleSearchClearButton (e) {
@@ -44,18 +71,31 @@ export default class ArticleTopBar extends React.Component {
         <div className='left'>
           <div className='search'>
             <i className='fa fa-search fa-fw' />
-            <input ref='searchInput' value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
+            <input
+              ref='searchInput'
+              onFocus={e => this.handleSearchChange(e)}
+              onBlur={e => this.handleSearchChange(e)}
+              value={this.props.status.search}
+              onChange={e => this.handleSearchChange(e)}
+              placeholder='Search'
+              type='text'
+            />
             {
               this.props.status.search != null && this.props.status.search.length > 0
                 ? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button>
                 : null
             }
+            <div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
+              - Search by tag タグで検索 : #{'{string}'}<br/>
+              - Search by folder フォルダーで検索 : in:{'{folder_name}'}
+            </div>
           </div>
         </div>
         <div className='right'>
-          <button>?</button>
+          <button>?<span className='tooltip'>How to use 使い方</span></button>
           <ExternalLink className='logo' href='http://b00st.io'>
             <img src='../../resources/favicon-230x230.png' width='44' height='44'/>
+            <span className='tooltip'>Boost official page 公式サイト</span>
           </ExternalLink>
         </div>
       </div>