Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Improved UI/UX of find bar
Browse files Browse the repository at this point in the history
  • Loading branch information
@jkup
jkup committed Aug 24, 2016
1 parent 9e405f1 commit 3bec3be
Show file tree
Hide file tree
Showing 7 changed files with 181 additions and 78 deletions.
25 changes: 25 additions & 0 deletions js/actions/webviewActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,31 @@ const webviewActions = {
webview.executeJavaScript('document.webkitRequestFullscreen()')
}
}
},

findInPage (searchString, caseSensitivity, forward, webview) {
webview = webview || getWebview()
if (!webview) {
return
}

if (searchString) {
webview.findInPage(searchString, {
matchCase: caseSensitivity,
forward: forward !== undefined ? forward : true,
findNext: forward !== undefined
})
} else {
webview.stopFindInPage('clearSelection')
}
},

stopFindInPage (webview) {
webview = webview || getWebview()
if (!webview) {
return
}
webview.stopFindInPage('keepSelection')
}
}

Expand Down
2 changes: 2 additions & 0 deletions js/components/button.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class Button extends ImmutableComponent {
if (this.props.iconClass) {
return <span disabled={this.props.disabled}
data-l10n-id={this.props.l10nId}
style={this.props.inlineStyles}
className={cx({
browserButton: true,
fa: true,
Expand All @@ -23,6 +24,7 @@ class Button extends ImmutableComponent {
return <span disabled={this.props.disabled}
data-l10n-id={this.props.l10nId}
data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
style={this.props.inlineStyles}
className={cx({
browserButton: true,
[this.props.className]: !!this.props.className
Expand Down
93 changes: 61 additions & 32 deletions js/components/findbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ const ImmutableComponent = require('./immutableComponent')
const Immutable = require('immutable')
const keyCodes = require('../constants/keyCodes')
const Button = require('./button.js')
const SwitchControl = require('../components/switchControl')
const windowActions = require('../actions/windowActions')
const windowStore = require('../stores/windowStore')
const {getTextColorForBackground} = require('../lib/color')

class FindBar extends ImmutableComponent {
constructor () {
super()
this.onBlur = this.onBlur.bind(this)
this.onClear = this.onClear.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
this.onChange = this.onChange.bind(this)
this.onFindPrev = this.onFindPrev.bind(this)
Expand All @@ -35,7 +38,7 @@ class FindBar extends ImmutableComponent {
onCaseSensitivityChange (e) {
windowActions.setFindDetail(this.frame, Immutable.fromJS({
searchString: this.searchString,
caseSensitivity: e.target.checked
caseSensitivity: !this.isCaseSensitive
}))
}

Expand Down Expand Up @@ -97,6 +100,14 @@ class FindBar extends ImmutableComponent {
windowActions.setFindbarSelected(this.frame, false)
}

onClear () {
windowActions.setFindDetail(this.frame, Immutable.fromJS({
searchString: '',
caseSensitivity: this.isCaseSensitive
}))
this.focus()
}

get numberOfMatches () {
if (!this.props.findDetail || this.props.findDetail.get('numberOfMatches') === undefined) {
return -1
Expand Down Expand Up @@ -125,6 +136,14 @@ class FindBar extends ImmutableComponent {
return this.props.findDetail.get('searchString')
}

get backgroundColor () {
return this.props.paintTabs && (this.props.themeColor || this.props.computedThemeColor)
}

get textColor () {
return getTextColorForBackground(this.backgroundColor)
}

render () {
let findMatchText
if (this.numberOfMatches !== -1 && this.activeMatchOrdinal !== -1 && this.searchString) {
Expand All @@ -145,39 +164,49 @@ class FindBar extends ImmutableComponent {
data-l10n-id='findResultMatches' />
}

return <div className='findBar' onBlur={this.onBlur}>
<div className='searchStringContainer'>
<input type='text'
spellCheck='false'
ref={(node) => { this.searchInput = node }}
onKeyDown={this.onKeyDown}
onChange={this.onChange}
value={this.searchString} />
{findMatchText}
</div>
<Button iconClass='findButton fa-chevron-up'
className='findButton smallButton findPrev'
disabled={this.numberOfMatches === 0}

onClick={this.onFindPrev} />
<Button iconClass='findButton fa-chevron-down'
className='findButton smallButton findNext'
disabled={this.numberOfMatches === 0}
onClick={this.onFindNext} />
<Button iconClass='fa-times'
className='findButton smallButton hideButton'
onClick={this.props.onFindHide} />
<div className='caseSensitivityContainer'>
<input
const backgroundColor = this.backgroundColor
let findBarStyle = {}

if (backgroundColor) {
findBarStyle = {
background: backgroundColor,
color: this.textColor
}
}

return <div className='findBar' style={findBarStyle} onBlur={this.onBlur}>
<div className='searchContainer'>
<div className='searchStringContainer'>
<span className='searchStringContainerIcon fa fa-search'></span>
<input type='text'
spellCheck='false'
ref={(node) => { this.searchInput = node }}
onKeyDown={this.onKeyDown}
onChange={this.onChange}
value={this.searchString} />
<span className='searchStringContainerIcon fa fa-times'
onClick={this.onClear}></span>
</div>
<span className='findMatchText'>{findMatchText}</span>
<Button iconClass='findButton fa-caret-down'
inlineStyles={findBarStyle}
className='findButton smallButton findNext'
disabled={this.numberOfMatches <= 0}
onClick={this.onFindNext} />
<Button iconClass='findButton fa-caret-up'
inlineStyles={findBarStyle}
className='findButton smallButton findPrev'
disabled={this.numberOfMatches <= 0}
onClick={this.onFindPrev} />
<SwitchControl
id='caseSensitivityCheckbox'
type='checkbox'
className='caseSensitivityCheckbox'
checked={this.isCaseSensitive}
onChange={this.onCaseSensitivityChange} />
<label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity'>
{'Match case'}
</label>
checkedOn={this.isCaseSensitive}
onClick={this.onCaseSensitivityChange} />
<label htmlFor='caseSensitivityCheckbox' data-l10n-id='caseSensitivity' style={findBarStyle}></label>
</div>
<span className='findButton closeButton'
style={findBarStyle}
onClick={this.props.onFindHide}>+</span>
</div>
}
}
Expand Down
39 changes: 3 additions & 36 deletions js/components/frame.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
const React = require('react')
const urlParse = require('url').parse
const windowActions = require('../actions/windowActions')
const webviewActions = require('../actions/webviewActions')
const appActions = require('../actions/appActions')
const ImmutableComponent = require('./immutableComponent')
const Immutable = require('immutable')
Expand All @@ -21,7 +22,6 @@ const FullScreenWarning = require('./fullScreenWarning')
const debounce = require('../lib/debounce.js')
const getSetting = require('../settings').getSetting
const settings = require('../constants/settings')
const FindBar = require('./findbar.js')
const { aboutUrls, isSourceAboutUrl, isTargetAboutUrl, getTargetAboutUrl, getBaseUrl, isNavigatableAboutPage } = require('../lib/appUrlUtil')
const { isFrameError } = require('../lib/errorUtil')
const locale = require('../l10n')
Expand All @@ -43,8 +43,6 @@ class Frame extends ImmutableComponent {
constructor () {
super()
this.onUpdateWheelZoom = debounce(this.onUpdateWheelZoom.bind(this), 20)
this.onFind = this.onFind.bind(this)
this.onFindHide = this.onFindHide.bind(this)
this.onFocus = this.onFocus.bind(this)
// Maps notification message to its callback
this.notificationCallbacks = {}
Expand Down Expand Up @@ -770,7 +768,7 @@ class Frame extends ImmutableComponent {

this.webview.addEventListener('did-navigate', (e) => {
if (this.props.findbarShown) {
this.onFindHide()
windowActions.setFindbarShown(this.frame, false)
}

for (let message in this.notificationCallbacks) {
Expand Down Expand Up @@ -931,15 +929,10 @@ class Frame extends ImmutableComponent {
}
const searchString = this.props.findDetail && this.props.findDetail.get('searchString')
if (searchString) {
this.onFind(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward)
webviewActions.findInPage(searchString, this.props.findDetail && this.props.findDetail.get('caseSensitivity') || undefined, forward, this.webview)
}
}

onFindHide () {
windowActions.setFindbarShown(this.frame, false)
this.webview.stopFindInPage('keepSelection')
}

onUpdateWheelZoom () {
if (this.wheelDeltaY > 0) {
this.zoomIn()
Expand All @@ -959,22 +952,6 @@ class Frame extends ImmutableComponent {
}
}

onFind (searchString, caseSensitivity, forward) {
if (searchString) {
this.webview.findInPage(searchString, {
matchCase: caseSensitivity,
forward: forward !== undefined ? forward : true,
findNext: forward !== undefined
})
} else {
this.onClearMatch()
}
}

onClearMatch () {
this.webview.stopFindInPage('clearSelection')
}

get webRTCPolicy () {
return this.webview ? this.webview.getWebRTCIPHandlingPolicy() : WEBRTC_DEFAULT
}
Expand All @@ -1000,16 +977,6 @@ class Frame extends ImmutableComponent {
? <FullScreenWarning location={this.props.location} />
: null
}
{
this.props.findbarShown
? <FindBar
onFind={this.onFind}
onFindHide={this.onFindHide}
frameKey={this.props.frameKey}
selected={this.props.findbarSelected}
findDetail={this.props.findDetail} />
: null
}
<div ref={(node) => { this.webviewContainer = node }}
className={cx({
webviewContainer: true,
Expand Down
27 changes: 26 additions & 1 deletion js/components/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ const NavigationBar = require('./navigationBar')
const Frame = require('./frame')
const TabPages = require('./tabPages')
const TabsToolbar = require('./tabsToolbar')
const FindBar = require('./findbar.js')
const UpdateBar = require('./updateBar')
const NotificationBar = require('./notificationBar')
const DownloadsBar = require('./downloadsBar')
Expand Down Expand Up @@ -84,6 +85,8 @@ class Main extends ImmutableComponent {
this.onBraveMenu = this.onBraveMenu.bind(this)
this.onHamburgerMenu = this.onHamburgerMenu.bind(this)
this.onTabContextMenu = this.onTabContextMenu.bind(this)
this.onFind = this.onFind.bind(this)
this.onFindHide = this.onFindHide.bind(this)
this.checkForTitleMode = debounce(this.checkForTitleMode.bind(this), 20)
}
registerWindowLevelShortcuts () {
Expand Down Expand Up @@ -620,6 +623,15 @@ class Main extends ImmutableComponent {
windowActions.setUrlBarActive(false)
}

onFindHide () {
const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
windowActions.setFindbarShown(activeFrame, false)
}

onFind (searchString, caseSensitivity, forward) {
webviewActions.findInPage(searchString, caseSensitivity, forward)
}

onTabContextMenu (e) {
const activeFrame = FrameStateUtil.getActiveFrame(this.props.windowState)
contextMenus.onTabsToolbarContextMenu(activeFrame, undefined, undefined, e)
Expand Down Expand Up @@ -874,6 +886,20 @@ class Main extends ImmutableComponent {
activeFrameKey={activeFrame && activeFrame.get('key') || undefined}
onMenu={this.onHamburgerMenu}
/>

{
activeFrame && activeFrame.get('findbarShown')
? <FindBar
paintTabs={getSetting(settings.PAINT_TABS)}
themeColor={activeFrame.get('themeColor')}
computedThemeColor={activeFrame.get('computedThemeColor')}
frameKey={activeFrame.get('key')}
selected={activeFrame.get('findbarSelected')}
findDetail={activeFrame.get('findDetail')}
onFind={this.onFind}
onFindHide={this.onFindHide} />
: null
}
</div>
<div className='mainContainer'>
<div className='tabContainer'
Expand Down Expand Up @@ -906,7 +932,6 @@ class Main extends ImmutableComponent {
isFullScreen={frame.get('isFullScreen')}
showFullScreenWarning={frame.get('showFullScreenWarning')}
findbarShown={frame.get('findbarShown')}
findbarSelected={frame.get('findbarSelected')}
findDetail={frame.get('findDetail')}
hrefPreview={frame.get('hrefPreview')}
showOnRight={frame.get('showOnRight')}
Expand Down
Loading

0 comments on commit 3bec3be

Please sign in to comment.