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

2025-12-13 17:56:25 +00:00 · 2015-11-01 02:24:17 +09:00
parent ca79857386
commit d338f217fe
12 changed files with 144 additions and 34 deletions
--- 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'
--- 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()
        }
    }
  }
--- 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) {
--- 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>
--- 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>
--- 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'
--- 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
--- 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
--- 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
--- 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
+
--- 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')
--- 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',