Skip to content

Commit d338f21

Browse files
Rokt33rRokt33r
committed
Tooltip追加、キー反応改善、Pinch2Zoom使用禁止、Webpack config debug
1 parent ca79857 commit d338f21

12 files changed

Lines changed: 144 additions & 34 deletions

File tree

‎browser/finder/index.html‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,7 @@
2727
<div id="content"></div>
2828
<script src="../../submodules/ace/src-min/ace.js"></script>
2929
<script>
30-
document.addEventListener('mousewheel', function(e) {
31-
if(e.deltaY % 1 !== 0) {
32-
e.preventDefault()
33-
}
34-
})
30+
require('web-frame').setZoomLevelLimits(1, 1)
3531
var scriptUrl = process.env.BOOST_ENV === 'development'
3632
? 'http://localhost:8080/assets/finder.js'
3733
: '../../compiled/finder.js'

‎browser/main/HomePage.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ class HomePage extends React.Component {
5454
case IDLE_MODE:
5555
if (e.keyCode === 69) {
5656
detail.handleEditButtonClick()
57+
e.preventDefault()
5758
}
5859
if (e.keyCode === 68) {
5960
detail.handleDeleteButtonClick()
@@ -62,7 +63,7 @@ class HomePage extends React.Component {
6263
// `detail`の`openDeleteConfirmMenu`の時。
6364
if (detail.state.openDeleteConfirmMenu) {
6465
if (e.keyCode === 27) {
65-
detail.handleDeleteCancleButtonClick()
66+
detail.handleDeleteCancelButtonClick()
6667
}
6768
if (e.keyCode === 13 && e.metaKey) {
6869
detail.handleDeleteConfirmButtonClick()
@@ -83,8 +84,9 @@ class HomePage extends React.Component {
8384
list.selectNextArticle()
8485
}
8586

86-
if (e.keyCode === 13 && e.metaKey) {
87+
if (e.keyCode === 65 || e.keyCode === 13 && e.metaKey) {
8788
nav.handleNewPostButtonClick()
89+
e.preventDefault()
8890
}
8991
}
9092
}

‎browser/main/HomePage/ArticleDetail.js‎

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { PropTypes } from 'react'
2+
import ReactDOM from 'react-dom'
23
import moment from 'moment'
34
import _ from 'lodash'
45
import ModeIcon from 'boost/components/ModeIcon'
56
import MarkdownPreview from 'boost/components/MarkdownPreview'
67
import CodeEditor from 'boost/components/CodeEditor'
7-
import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle } from 'boost/actions'
8+
import { IDLE_MODE, CREATE_MODE, EDIT_MODE, switchMode, switchArticle, switchFolder, clearSearch, updateArticle, destroyArticle, NEW } from 'boost/actions'
89
import aceModes from 'boost/ace-modes'
910
import Select from 'react-select'
1011
import linkState from 'boost/linkState'
@@ -32,23 +33,33 @@ export default class ArticleDetail extends React.Component {
3233
}
3334
}
3435

36+
componentDidUpdate (prevProps) {
37+
let isModeChanged = prevProps.status.mode !== this.props.status.mode
38+
if (isModeChanged && this.props.status.mode !== IDLE_MODE) {
39+
ReactDOM.findDOMNode(this.refs.title).focus()
40+
}
41+
}
42+
3543
componentWillReceiveProps (nextProps) {
3644
let nextState = {}
3745

3846
let isArticleChanged = nextProps.activeArticle != null && (nextProps.activeArticle.key !== this.state.article.key)
3947
let isModeChanged = nextProps.status.mode !== this.props.status.mode
48+
// Reset article input
4049
if (isArticleChanged || (isModeChanged && nextProps.status.mode !== IDLE_MODE)) {
4150
Object.assign(nextState, {
4251
article: makeInstantArticle(nextProps.activeArticle)
4352
})
4453
}
4554

55+
// Clean state
4656
if (isModeChanged) {
4757
Object.assign(nextState, {
4858
openDeleteConfirmMenu: false,
4959
previewMode: false
5060
})
5161
}
62+
5263
this.setState(nextState)
5364
}
5465

@@ -76,7 +87,7 @@ export default class ArticleDetail extends React.Component {
7687
this.setState({openDeleteConfirmMenu: false})
7788
}
7889

79-
handleDeleteCancleButtonClick (e) {
90+
handleDeleteCancelButtonClick (e) {
8091
this.setState({openDeleteConfirmMenu: false})
8192
}
8293

@@ -102,7 +113,7 @@ export default class ArticleDetail extends React.Component {
102113
<button onClick={e => this.handleDeleteConfirmButtonClick(e)} className='primary'>
103114
<i className='fa fa-fw fa-check'/> Sure
104115
</button>
105-
<button onClick={e => this.handleDeleteCancleButtonClick(e)}>
116+
<button onClick={e => this.handleDeleteCancelButtonClick(e)}>
106117
<i className='fa fa-fw fa-times'/> Cancel
107118
</button>
108119
</div>
@@ -119,8 +130,12 @@ export default class ArticleDetail extends React.Component {
119130
<div className='tags'><i className='fa fa-fw fa-tags'/>{tags}</div>
120131
</div>
121132
<div className='right'>
122-
<button onClick={e => this.handleEditButtonClick(e)}><i className='fa fa-fw fa-edit'/></button>
123-
<button onClick={e => this.handleDeleteButtonClick(e)}><i className='fa fa-fw fa-trash'/></button>
133+
<button onClick={e => this.handleEditButtonClick(e)} className='editBtn'>
134+
<i className='fa fa-fw fa-edit'/><span className='tooltip'>Edit 編集(e)</span>
135+
</button>
136+
<button onClick={e => this.handleDeleteButtonClick(e)} className='deleteBtn'>
137+
<i className='fa fa-fw fa-trash'/><span className='tooltip'>Delete 削除(d)</span>
138+
</button>
124139
</div>
125140
</div>
126141
)
@@ -143,7 +158,9 @@ export default class ArticleDetail extends React.Component {
143158
}
144159

145160
handleCancelButtonClick (e) {
146-
this.props.dispatch(switchMode(IDLE_MODE))
161+
let { activeArticle, dispatch } = this.props
162+
if (activeArticle.status === NEW) dispatch(switchArticle(null))
163+
dispatch(switchMode(IDLE_MODE))
147164
}
148165

149166
handleSaveButtonClick (e) {

‎browser/main/HomePage/ArticleNavigator.js‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,17 +57,26 @@ export default class ArticleNavigator extends React.Component {
5757
<div className='userInfo'>
5858
<div className='userProfileName'>{userName}</div>
5959
<div className='userName'>local</div>
60-
<button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'><i className='fa fa-fw fa-chevron-down'/></button>
60+
<button onClick={e => this.handlePreferencesButtonClick(e)} className='settingBtn'>
61+
<i className='fa fa-fw fa-chevron-down'/>
62+
<span className='tooltip'>Preferences 環境設定</span>
63+
</button>
6164
</div>
6265

6366
<div className='controlSection'>
64-
<button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>New Post</button>
67+
<button onClick={e => this.handleNewPostButtonClick(e)} className='newPostBtn'>
68+
New Post
69+
<span className='tooltip'>新しいポスト (⌘ + Enter or a)</span>
70+
</button>
6571
</div>
6672

6773
<div className='folders'>
6874
<div className='header'>
6975
<div className='title'>Folders</div>
70-
<button onClick={e => this.handleNewFolderButton(e)} className='addBtn'><i className='fa fa-fw fa-plus'/></button>
76+
<button onClick={e => this.handleNewFolderButton(e)} className='addBtn'>
77+
<i className='fa fa-fw fa-plus'/>
78+
<span className='tooltip'>New folder 新しいフォルダー</span>
79+
</button>
7180
</div>
7281
<div className='folderList'>
7382
<button onClick={e => this.handleAllFoldersButtonClick(e)} className={targetFolders.length === 0 ? 'active' : ''}>All folders</button>

‎browser/main/HomePage/ArticleTopBar.js‎

Lines changed: 44 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,32 @@ import ExternalLink from 'boost/components/ExternalLink'
44
import { setSearchFilter, clearSearch } from 'boost/actions'
55

66
export default class ArticleTopBar extends React.Component {
7+
constructor (props) {
8+
super(props)
9+
10+
this.state = {
11+
isTooltipHidden: true
12+
}
13+
}
14+
15+
componentDidMount () {
16+
this.searchInput = ReactDOM.findDOMNode(this.refs.searchInput)
17+
}
18+
19+
componentWillUnmount () {
20+
this.searchInput.removeEventListener('keydown', this.showTooltip)
21+
this.searchInput.removeEventListener('focus', this.showTooltip)
22+
this.searchInput.removeEventListener('blur', this.showTooltip)
23+
}
24+
25+
handleTooltipRequest (e) {
26+
if (this.searchInput.value.length === 0 && (document.activeElement === this.searchInput)) {
27+
this.setState({isTooltipHidden: false})
28+
} else {
29+
this.setState({isTooltipHidden: true})
30+
}
31+
}
32+
733
isInputFocused () {
834
return document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput)
935
}
@@ -18,17 +44,18 @@ export default class ArticleTopBar extends React.Component {
1844
}
1945

2046
focusInput () {
21-
ReactDOM.findDOMNode(this.refs.searchInput).focus()
47+
this.searchInput.focus()
2248
}
2349

2450
blurInput () {
25-
ReactDOM.findDOMNode(this.refs.searchInput).blur()
51+
this.searchInput.blur()
2652
}
2753

2854
handleSearchChange (e) {
2955
let { dispatch } = this.props
3056

3157
dispatch(setSearchFilter(e.target.value))
58+
this.handleTooltipRequest()
3259
}
3360

3461
handleSearchClearButton (e) {
@@ -44,18 +71,31 @@ export default class ArticleTopBar extends React.Component {
4471
<div className='left'>
4572
<div className='search'>
4673
<i className='fa fa-search fa-fw' />
47-
<input ref='searchInput' value={this.props.status.search} onChange={e => this.handleSearchChange(e)} placeholder='Search' type='text'/>
74+
<input
75+
ref='searchInput'
76+
onFocus={e => this.handleSearchChange(e)}
77+
onBlur={e => this.handleSearchChange(e)}
78+
value={this.props.status.search}
79+
onChange={e => this.handleSearchChange(e)}
80+
placeholder='Search'
81+
type='text'
82+
/>
4883
{
4984
this.props.status.search != null && this.props.status.search.length > 0
5085
? <button onClick={e => this.handleSearchClearButton(e)} className='searchClearBtn'><i className='fa fa-times'/></button>
5186
: null
5287
}
88+
<div className={'tooltip' + (this.state.isTooltipHidden ? ' hide' : '')}>
89+
- Search by tag タグで検索 : #{'{string}'}<br/>
90+
- Search by folder フォルダーで検索 : in:{'{folder_name}'}
91+
</div>
5392
</div>
5493
</div>
5594
<div className='right'>
56-
<button>?</button>
95+
<button>?<span className='tooltip'>How to use 使い方</span></button>
5796
<ExternalLink className='logo' href='http://b00st.io'>
5897
<img src='../../resources/favicon-230x230.png' width='44' height='44'/>
98+
<span className='tooltip'>Boost official page 公式サイト</span>
5999
</ExternalLink>
60100
</div>
61101
</div>

‎browser/main/index.html‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
5+
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
66

77
<link rel="stylesheet" href="../../node_modules/font-awesome/css/font-awesome.min.css" media="screen" charset="utf-8">
88
<link rel="stylesheet" href="../../node_modules/devicon/devicon.min.css">
@@ -53,13 +53,9 @@
5353

5454
<script src="../../submodules/ace/src-min/ace.js"></script>
5555
<script type='text/javascript'>
56+
require('web-frame').setZoomLevelLimits(1, 1)
5657
var version = require('remote').require('app').getVersion()
5758
document.title = 'Boost' + ((version == null || version.length === 0) ? ' DEV' : '')
58-
document.addEventListener('mousewheel', function(e) {
59-
if(e.deltaY % 1 !== 0) {
60-
e.preventDefault()
61-
}
62-
})
6359
var scriptUrl = process.env.BOOST_ENV === 'development'
6460
? 'http://localhost:8080/assets/main.js'
6561
: '../../compiled/main.js'

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -125,8 +125,6 @@ iptFocusBorderColor = #369DCD
125125
border none
126126
transition 0.1s
127127
height 18px
128-
129-
130128
.right
131129
button
132130
cursor pointer
@@ -203,8 +201,18 @@ iptFocusBorderColor = #369DCD
203201
color inactiveTextColor
204202
background-color transparent
205203
padding 0
204+
.tooltip
205+
tooltip()
206+
&.editBtn .tooltip
207+
margin-top 25px
208+
margin-left -63px
209+
&.deleteBtn .tooltip
210+
margin-top 25px
211+
margin-left -96px
206212
&:hover
207213
color inherit
214+
.tooltip
215+
opacity 1
208216
.detailBody
209217
.detailPanel
210218
&>.header

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

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ articleNavBgColor = #353535
1616
padding 6px 0 0 10px
1717
white-space nowrap
1818
text-overflow ellipsis
19-
overflow-x hidden
19+
overflow hidden
2020
.userName
2121
color white
2222
padding-left 20px
@@ -33,6 +33,13 @@ articleNavBgColor = #353535
3333
padding 0
3434
background-color transparent
3535
border 1px solid white
36+
.tooltip
37+
tooltip()
38+
margin-top -5px
39+
margin-left 10px
40+
&:hover
41+
.tooltip
42+
opacity 1
3643
&:active
3744
background-color brandColor
3845
border-color brandColor
@@ -49,8 +56,14 @@ articleNavBgColor = #353535
4956
border-radius 5px
5057
font-size 20px
5158
transition 0.1s
59+
.tooltip
60+
tooltip()
61+
margin-left 48px
62+
margin-top -3px
5263
&:hover
5364
background-color lighten(brandColor, 7%)
65+
.tooltip
66+
opacity 1
5467
.folders, .members
5568
.header
5669
border-bottom 1px solid borderColor
@@ -76,6 +89,13 @@ articleNavBgColor = #353535
7689
color white
7790
padding 0
7891
font-weight bold
92+
.tooltip
93+
tooltip()
94+
margin-top -6px
95+
margin-left 11px
96+
&:hover
97+
.tooltip
98+
opacity 1
7999
&:active
80100
background-color brandColor
81101
border-color brandColor

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

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,13 @@ infoBtnActiveBgColor = #3A3A3A
2828
transition 0.1s
2929
font-size 16px
3030
border 1px solid transparent
31+
.tooltip
32+
tooltip()
33+
margin-left -24px
34+
margin-top 35px
35+
opacity 1
36+
&.hide
37+
opacity 0
3138
input
3239
absolute top left
3340
width 350px
@@ -97,14 +104,26 @@ infoBtnActiveBgColor = #3A3A3A
97104
border-radius 11px
98105
border none
99106
transition 0.1s
107+
.tooltip
108+
tooltip()
109+
margin-left -70px
110+
margin-top 29px
100111
&:hover
101112
background-color infoBtnActiveBgColor
113+
.tooltip
114+
opacity 1
102115

103116
&>.logo
104117
display block
105118
position absolute
106119
top 8px
107120
right 15px
108121
opacity 0.7
122+
.tooltip
123+
tooltip()
124+
margin-top 44px
125+
margin-left -180px
109126
&:hover
110-
opacity 1.0
127+
opacity 1
128+
.tooltip
129+
opacity 1

0 commit comments

Comments
 (0)