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

browser/finder/index.html

@@ -27,11 +27,7 @@
   <div id="content"></div>
   <script src="../../submodules/ace/src-min/ace.js"></script>
   <script>
-    document.addEventListener('mousewheel', function(e) {
+    require('web-frame').setZoomLevelLimits(1, 1)
-      if(e.deltaY % 1 !== 0) {
-        e.preventDefault()
-      }
-    })
     var scriptUrl = process.env.BOOST_ENV === 'development'
       ? 'http://localhost:8080/assets/finder.js'
       : '../../compiled/finder.js'

browser/main/HomePage.js

@@ -54,6 +54,7 @@ class HomePage extends React.Component {
       case IDLE_MODE:
         if (e.keyCode === 69) {
           detail.handleEditButtonClick()
+          e.preventDefault()
         }
         if (e.keyCode === 68) {
           detail.handleDeleteButtonClick()
@@ -62,7 +63,7 @@ class HomePage extends React.Component {
         // `detail`の`openDeleteConfirmMenu`の時。
         if (detail.state.openDeleteConfirmMenu) {
           if (e.keyCode === 27) {
-            detail.handleDeleteCancleButtonClick()
+            detail.handleDeleteCancelButtonClick()
           }
           if (e.keyCode === 13 && e.metaKey) {
             detail.handleDeleteConfirmButtonClick()
@@ -83,8 +84,9 @@ class HomePage extends React.Component {
           list.selectNextArticle()
         }
 
-        if (e.keyCode === 13 && e.metaKey) {
+        if (e.keyCode === 65 || e.keyCode === 13 && e.metaKey) {
           nav.handleNewPostButtonClick()
+          e.preventDefault()
         }
     }
   }

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.handleEditButtonClick(e)} className='editBtn'>
-                <button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-trash'/></button>
+                  <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>

browser/main/index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+  <meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
 
   <link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
   <link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
@@ -53,13 +53,9 @@
 
   <script src="../../submodules/ace/src-min/ace.js"></script>
   <script type='text/javascript'>
+    require('web-frame').setZoomLevelLimits(1, 1)
     var version = require('remote').require('app').getVersion()
     document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
-    document.addEventListener('mousewheel', function(e) {
-      if(e.deltaY % 1 !== 0) {
-        e.preventDefault()
-      }
-    })
     var scriptUrl = process.env.BOOST_ENV === 'development'
       ? 'http://localhost:8080/assets/main.js'
       : '../../compiled/main.js'

browser/styles/main/HomeContainer/components/ArticleDetail.styl

@@ -125,8 +125,6 @@ iptFocusBorderColor = #369DCD
             border none
             transition 0.1s
             height 18px
-
-
       .right
         button
           cursor pointer
@@ -203,8 +201,18 @@ iptFocusBorderColor = #369DCD
           color inactiveTextColor
           background-color transparent
           padding 0
+          .tooltip
+            tooltip()
+          &.editBtn .tooltip
+            margin-top 25px
+            margin-left -63px
+          &.deleteBtn .tooltip
+            margin-top 25px
+            margin-left -96px
           &:hover
             color inherit
+            .tooltip
+              opacity 1
     .detailBody
       .detailPanel
         &>.header

browser/styles/main/HomeContainer/components/ArticleNavigator.styl

@@ -16,7 +16,7 @@ articleNavBgColor = #353535
       padding 6px 0 0 10px
       white-space nowrap
       text-overflow ellipsis
-      overflow-x hidden
+      overflow hidden
     .userName
       color white
       padding-left 20px
@@ -33,6 +33,13 @@ articleNavBgColor = #353535
       padding 0
       background-color transparent
       border 1px solid white
+      .tooltip
+        tooltip()
+        margin-top -5px
+        margin-left 10px
+      &:hover
+        .tooltip
+          opacity 1
       &:active
         background-color brandColor
         border-color brandColor
@@ -49,8 +56,14 @@ articleNavBgColor = #353535
       border-radius 5px
       font-size 20px
       transition 0.1s
+      .tooltip
+        tooltip()
+        margin-left 48px
+        margin-top -3px
       &:hover
         background-color lighten(brandColor, 7%)
+        .tooltip
+          opacity 1
   .folders, .members
     .header
       border-bottom 1px solid borderColor
@@ -76,6 +89,13 @@ articleNavBgColor = #353535
         color white
         padding 0
         font-weight bold
+        .tooltip
+          tooltip()
+          margin-top -6px
+          margin-left 11px
+        &:hover
+          .tooltip
+            opacity 1
         &:active
           background-color brandColor
           border-color brandColor

browser/styles/main/HomeContainer/components/ArticleTopBar.styl

@@ -28,6 +28,13 @@ infoBtnActiveBgColor = #3A3A3A
       transition 0.1s
       font-size 16px
       border 1px solid transparent
+      .tooltip
+        tooltip()
+        margin-left -24px
+        margin-top 35px
+        opacity 1
+        &.hide
+          opacity 0
       input
         absolute top left
         width 350px
@@ -97,8 +104,14 @@ infoBtnActiveBgColor = #3A3A3A
       border-radius 11px
       border none
       transition 0.1s
+      .tooltip
+        tooltip()
+        margin-left -70px
+        margin-top 29px
       &:hover
         background-color infoBtnActiveBgColor
+        .tooltip
+          opacity 1
 
     &>.logo
       display block
@@ -106,5 +119,11 @@ infoBtnActiveBgColor = #3A3A3A
       top 8px
       right 15px
       opacity 0.7
+      .tooltip
+        tooltip()
+        margin-top 44px
+        margin-left -180px
       &:hover
-        opacity 1.0
+        opacity 1
+        .tooltip
+          opacity 1

browser/styles/mixins/tooltip.styl

@@ -3,10 +3,12 @@ tooltip()
   z-index popupZIndex
   background-color transparentify(invBackgroundColor, 80%)
   color invTextColor
-  padding 10px 15px
+  padding 6px 15px
   font-size 12px
-  line-height 12px
+  font-weight normal
+  line-height 20px
   white-space nowrap
   opacity 0
   transition 0.1s
   pointer-events none
+

lib/dataStore.js

@@ -1,6 +1,6 @@
 import keygen from 'boost/keygen'
 
-let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyantaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\n# 4. チーム機能を搭載、シームレスな情報共有の場を実現。\n開発の設計思想やmdファイルの共有等、チームによって用途は様々ですが、Boostは多くの情報共有の課題について解決策を投げかけます。\n魅力を感じたら、左下のプラスボタンを今すぐクリック。\n\n\n＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
+let defaultContent = '**Boost**は全く新しいエンジニアライクのノートアプリです。\n\n# ◎特徴\nBoostはエンジニアの仕事を圧倒的に効率化するいくつかの機能を備えています。\nその一部をご紹介します。\n1. Folderで情報を分類\n2. 豊富なsyantaxに対応\n3. Finder機能\n4. チーム機能（リアルタイム搭載）\n\n＊　＊　＊　＊\n\n# 1. Folderで情報を分類、欲しい情報にすぐアクセス。\n左側のバーに存在する「Folders」。\n今すぐプラスボタンを押しましょう。\n分類の仕方も自由自在です。\n- 言語やフレームワークごとにFolderを作成\n- 自分用のカジュアルなメモをまとめる場としてFolderを作成\n\n\n# 2. 豊富なsyantaxに対応、自分の脳の代わりに。\nプログラミングに関する情報を全て、手軽に保存しましょう。\n- mdで、apiの仕様をまとめる\n- よく使うモジュールやスニペット\n\nBoostに保存しておくことで、何度も同じコードを書いたり調べたりする必要がなくなります。\n\n# 3. Finder機能を搭載、もうコマンドを手打ちする必要はありません。\n**「shift+cmd+tab」** を同時に押してみてください。\nここでは、一瞬でBoostの中身を検索するウィンドウを表示させることができます。\n\n矢印キーで選択、Enterを押し、cmd+vでペーストすると…続きはご自身の目でお確かめください。\n- sqlやlinux等の、よく使うが手打ちが面倒なコマンド\n- （メールやカスタマーサポート等でよく使うフレーズ）\n\n私たちは、圧倒的な効率性を支援します。\n\＊　＊　＊　＊\n\n\n## ◎詳しくは\nこちらのブログ( http://blog-jp.b00st.io )にて随時更新しています。\n\nそれでは素晴らしいエンジニアライフを！\n\n## Hack your memory＊＊'
 
 export function init () {
   console.log('initialize data store')

webpack.config.production.js

@@ -2,7 +2,8 @@ var webpack = require('webpack')
 module.exports = {
   devtool: 'source-map',
   entry: {
-    main: './browser/main/index.js'
+    main: './browser/main/index.js',
+    finder: './browser/main/index.js'
   },
   output: {
     path: 'compiled',