From d338f217fee2e95d595229689b8aa8ae2c98d1a4 Mon Sep 17 00:00:00 2001
From: Rokt33r <fluke8259@gmail.com>
Date: Sun, 1 Nov 2015 02:24:17 +0900
Subject: [PATCH] =?UTF-8?q?Tooltip=E8=BF=BD=E5=8A=A0=E3=80=81=E3=82=AD?=
 =?UTF-8?q?=E3=83=BC=E5=8F=8D=E5=BF=9C=E6=94=B9=E5=96=84=E3=80=81Pinch2Zoo?=
 =?UTF-8?q?m=E4=BD=BF=E7=94=A8=E7=A6=81=E6=AD=A2=E3=80=81Webpack=20config?=
 =?UTF-8?q?=20debug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 browser/finder/index.html                     |  6 +--
 browser/main/HomePage.js                      |  6 ++-
 browser/main/HomePage/ArticleDetail.js        | 29 ++++++++---
 browser/main/HomePage/ArticleNavigator.js     | 15 ++++--
 browser/main/HomePage/ArticleTopBar.js        | 48 +++++++++++++++++--
 browser/main/index.html                       |  8 +---
 .../components/ArticleDetail.styl             | 12 ++++-
 .../components/ArticleNavigator.styl          | 22 ++++++++-
 .../components/ArticleTopBar.styl             | 21 +++++++-
 browser/styles/mixins/tooltip.styl            |  6 ++-
 lib/dataStore.js                              |  2 +-
 webpack.config.production.js                  |  3 +-
 12 files changed, 144 insertions(+), 34 deletions(-)

diff --git a/browser/finder/index.html b/browser/finder/index.html
index 8deba929..0a058ce7 100644
--- a/browser/finder/index.html
+++ b/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) {
-      if(e.deltaY % 1 !== 0) {
-        e.preventDefault()
-      }
-    })
+    require('web-frame').setZoomLevelLimits(1, 1)
     var scriptUrl = process.env.BOOST_ENV === 'development'
       ? 'http://localhost:8080/assets/finder.js'
       : '../../compiled/finder.js'
diff --git a/browser/main/HomePage.js b/browser/main/HomePage.js
index 4aa30802..4aa47847 100644
--- a/browser/main/HomePage.js
+++ b/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()
         }
     }
   }
diff --git a/browser/main/HomePage/ArticleDetail.js b/browser/main/HomePage/ArticleDetail.js
index 1fb90405..7803803d 100644
--- a/browser/main/HomePage/ArticleDetail.js
+++ b/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) {
diff --git a/browser/main/HomePage/ArticleNavigator.js b/browser/main/HomePage/ArticleNavigator.js
index 1d6ea82c..d3970d03 100644
--- a/browser/main/HomePage/ArticleNavigator.js
+++ b/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>
diff --git a/browser/main/HomePage/ArticleTopBar.js b/browser/main/HomePage/ArticleTopBar.js
index bd0eae1c..adcb364d 100644
--- a/browser/main/HomePage/ArticleTopBar.js
+++ b/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>
diff --git a/browser/main/index.html b/browser/main/index.html
index b3b2cbe8..364f96ed 100644
--- a/browser/main/index.html
+++ b/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'
diff --git a/browser/styles/main/HomeContainer/components/ArticleDetail.styl b/browser/styles/main/HomeContainer/components/ArticleDetail.styl
index 5ae17ddc..4ccb2c52 100644
--- a/browser/styles/main/HomeContainer/components/ArticleDetail.styl
+++ b/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
diff --git a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl b/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
index fa8b1fed..05cb70a2 100644
--- a/browser/styles/main/HomeContainer/components/ArticleNavigator.styl
+++ b/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
diff --git a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl b/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
index 7369f21d..e15a06c7 100644
--- a/browser/styles/main/HomeContainer/components/ArticleTopBar.styl
+++ b/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
diff --git a/browser/styles/mixins/tooltip.styl b/browser/styles/mixins/tooltip.styl
index 963d52fc..a3e5f762 100644
--- a/browser/styles/mixins/tooltip.styl
+++ b/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
+
diff --git a/lib/dataStore.js b/lib/dataStore.js
index ca3fc58c..a142f6c2 100644
--- a/lib/dataStore.js
+++ b/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')
diff --git a/webpack.config.production.js b/webpack.config.production.js
index cf06e118..a7ec5e97 100644
--- a/webpack.config.production.js
+++ b/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',