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

2025-12-13 09:46:22 +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
+