From e95c8cc3c558195c690c1be628f2458cf4a23af4 Mon Sep 17 00:00:00 2001 From: sudheer Date: Fri, 6 Jul 2018 11:44:19 +0530 Subject: [PATCH 1/6] Add CTRL+F shortcut to work as browser search * Add new finder for each webview contents --- .babelrc | 2 +- src/browser/components/MainPage.jsx | 15 +++- src/browser/css/components/MainPage.css | 61 +++++++++++++ src/main/finder.js | 109 ++++++++++++++++++++++++ src/main/menus/app.js | 6 ++ webpack.config.renderer.js | 2 +- 6 files changed, 191 insertions(+), 4 deletions(-) create mode 100644 src/main/finder.js diff --git a/.babelrc b/.babelrc index 56f23e0b..bec63fb1 100644 --- a/.babelrc +++ b/.babelrc @@ -8,5 +8,5 @@ }], "react" ], - "plugins": ["transform-object-rest-spread"] + "plugins": ["transform-object-rest-spread", "transform-class-properties"] } diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 4ea84f4d..7007b933 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -11,6 +11,7 @@ import {Grid, Row} from 'react-bootstrap'; import {ipcRenderer, remote} from 'electron'; +import Finder from '../../main/finder'; import Utils from '../../utils/util.js'; import LoginModal from './LoginModal.jsx'; @@ -45,6 +46,7 @@ const MainPage = createReactClass({ } } } + return { key, unreadCounts: new Array(this.props.teams.length), @@ -141,10 +143,19 @@ const MainPage = createReactClass({ } } }); + + const webview = document.getElementById('mattermostView' + this.state.key); + this.finder = new Finder(webview); + ipcRenderer.on('toggle-find', () => { + this.finder.toggle(); + }); }, componentDidUpdate(prevProps, prevState) { if (prevState.key !== this.state.key) { // i.e. When tab has been changed this.refs[`mattermostView${this.state.key}`].focusOnWebView(); + this.finder.destroy(); + const webview = document.getElementById('mattermostView' + this.state.key); + this.finder = new Finder(webview); } }, handleSelect(key) { @@ -152,13 +163,13 @@ const MainPage = createReactClass({ this.setState({ key: newKey, }); - this.handleOnTeamFocused(newKey); - var webview = document.getElementById('mattermostView' + newKey); ipcRenderer.send('update-title', { title: webview.getTitle(), }); + this.handleOnTeamFocused(newKey); }, + handleUnreadCountChange(index, unreadCount, mentionCount, isUnread, isMentioned) { var unreadCounts = this.state.unreadCounts; var mentionCounts = this.state.mentionCounts; diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css index e5097959..746a03f7 100644 --- a/src/browser/css/components/MainPage.css +++ b/src/browser/css/components/MainPage.css @@ -11,3 +11,64 @@ div[id*="-permissionDialog"] { max-width: 350px; } + +.finder { + position: fixed; + top: 0; + right: 20px; + padding: 5px; + background: #eee; + border: 1px solid #d7d7d7; + border-top: none; + border-right: none; + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; + font-size: 0px; +} + +.finder-input-wrapper { + display: inline-block; + position: relative; +} + +.finder button { + border: 1px solid #d2d2d2; + border-radius: 3px; + background: white; + outline: none; + padding: 5px; + cursor: pointer; + font-size: 14px; +} + +.finder button:hover { + background: #f0f0f0; +} + +.finder-input { + border: 1px solid #d2d2d2; + border-radius: 3px; + padding: 5px; + outline: none; + font-size: 14px; +} + +.finder-input:focus { + border-color: #35b5f4; + box-shadow: 0 0 1px #35b5f4; +} + +.finder__hidden { + display: none; +} + +.finder-progress__disabled { + display: none; +} + +.finder-progress { + position: absolute; + font-size: 12px; + right: 10px; + top: 10px; +} diff --git a/src/main/finder.js b/src/main/finder.js new file mode 100644 index 00000000..231ee925 --- /dev/null +++ b/src/main/finder.js @@ -0,0 +1,109 @@ +// Copyright (c) 2015-2016 Yuya Ochiai +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +export default class Finder { + constructor(target) { + this.target = target; + } + + toggle() { + return this.opened ? this.close() : this.open(); + } + + open() { + if (!this.initialized) { + this.initialize(); + } + this.opened = true; + this.$finder.classList.remove('finder__hidden'); + this.$input.focus(); + } + + close = () => { + this.opened = false; + this.target.stopFindInPage('clearSelection'); + this.$finder.classList.add('finder__hidden'); + } + + findNext = () => { + if (this.$input.value) { + this.target.findInPage(this.$input.value); + } + } + + findPrev = () => { + if (this.$input.value) { + this.target.findInPage(this.$input.value, {forward: false}); + } + } + + find = (keyword) => { + this.target.stopFindInPage('clearSelection'); + if (keyword) { + this.target.findInPage(keyword); + } else { + this.$progress.textContent = '0/0'; + } + } + + handleKeyEvent = (event) => { + if (event.code === 'Escape') { + this.close(); + } else if (event.code === 'Enter') { + this.findNext(); + } else { + this.find(event.target.value); + } + } + + foundInPage = (event) => { + const {matches, activeMatchOrdinal} = event.result; + this.$progress.classList.remove('finder-progress__disabled'); + this.$progress.textContent = `${activeMatchOrdinal}/${matches}`; + } + + destroy() { + this.initialized = false; + if (this.$input) { + this.$input.removeEventListener('keyup', this.handleKeyEvent); + this.$prev.removeEventListener('click', this.findPrev); + this.$next.removeEventListener('click', this.findNext); + this.$close.removeEventListener('click', this.close); + this.target.removeEventListener('found-in-page', this.foundInPage); + const searchDiv = document.getElementById('searchDiv'); + searchDiv.parentNode.removeChild(searchDiv); + } + } + + initialize() { + this.initialized = true; + const wrapper = document.createElement('div'); + wrapper.setAttribute('id', 'searchDiv'); + wrapper.innerHTML = ` +
+
+ + +
+ + + +
`; + + document.body.appendChild(wrapper); + + this.$finder = wrapper.querySelector('.finder'); + this.$progress = this.$finder.querySelector('.finder-progress'); + this.$input = this.$finder.querySelector('.finder-input'); + this.$prev = this.$finder.querySelector('.finder-prev'); + this.$next = this.$finder.querySelector('.finder-next'); + this.$close = this.$finder.querySelector('.finder-close'); + + this.$input.addEventListener('keyup', this.handleKeyEvent); + this.$prev.addEventListener('click', this.findPrev); + this.$next.addEventListener('click', this.findNext); + this.$close.addEventListener('click', this.close); + this.target.addEventListener('found-in-page', this.foundInPage); + } +} diff --git a/src/main/menus/app.js b/src/main/menus/app.js index 6c819bf7..eec6037e 100644 --- a/src/main/menus/app.js +++ b/src/main/menus/app.js @@ -95,6 +95,12 @@ function createTemplate(mainWindow, config, isDev) { template.push({ label: '&View', submenu: [{ + label: 'Find..', + accelerator: 'CmdOrCtrl+F', + click(item, focusedWindow) { + focusedWindow.webContents.send('toggle-find'); + }, + }, { label: 'Reload', accelerator: 'CmdOrCtrl+R', click(item, focusedWindow) { diff --git a/webpack.config.renderer.js b/webpack.config.renderer.js index 973840d0..28d60528 100644 --- a/webpack.config.renderer.js +++ b/webpack.config.renderer.js @@ -24,7 +24,7 @@ module.exports = merge(base, { }, module: { rules: [{ - test: /\.jsx$/, + test: /\.(js|jsx)?$/, use: { loader: 'babel-loader', }, From 83137dfc8d5f4b00740f05525ca3dca8dc7085b2 Mon Sep 17 00:00:00 2001 From: sudheer Date: Fri, 6 Jul 2018 12:21:18 +0530 Subject: [PATCH 2/6] Update docs with command --- docs/setup.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/setup.md b/docs/setup.md index ec802cd5..463d1df7 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -154,6 +154,7 @@ Below lists menu options (shortcut keys are listed in brackets, `Ctrl` becomes ` - **Select All** (Ctrl+A) - Select all text in input box - **Search in Team** (Ctrl+S) - Puts cursor in search box to search in the current team - **View** + - **Find..** (Ctrl+F)- Find in page - **Reload** (Ctrl+R) - Reload page from the server - **Clear Cache and Reload** (Ctrl+Shift+R) - Clear cached content in application and reload page - **Toggle Full Screen** (F11) - Toggle application from window to full screen and back From 6baa034197bd24b693fe4492130752738e841f18 Mon Sep 17 00:00:00 2001 From: sudheer Date: Mon, 9 Jul 2018 18:12:51 +0530 Subject: [PATCH 3/6] Fix review comments --- src/browser/components/Finder.jsx | 108 +++++++++++++++++++++++ src/browser/components/MainPage.jsx | 30 ++++--- src/browser/css/components/Finder.css | 42 +++++++++ src/browser/css/components/MainPage.css | 47 ---------- src/browser/css/components/index.css | 1 + src/main/finder.js | 109 ------------------------ 6 files changed, 170 insertions(+), 167 deletions(-) create mode 100644 src/browser/components/Finder.jsx create mode 100644 src/browser/css/components/Finder.css delete mode 100644 src/main/finder.js diff --git a/src/browser/components/Finder.jsx b/src/browser/components/Finder.jsx new file mode 100644 index 00000000..80203a87 --- /dev/null +++ b/src/browser/components/Finder.jsx @@ -0,0 +1,108 @@ +// Copyright (c) 2015-2016 Yuya Ochiai +// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React from 'react'; +import PropTypes from 'prop-types'; + +export default class Finder extends React.Component { + constructor(props) { + super(props); + this.webview = document.getElementById('mattermostView' + this.props.webviewKey); + this.state = { + foundInPage: false, + searchTxt: '', + }; + } + + componentDidMount() { + this.webview.addEventListener('found-in-page', this.foundInPage); + this.searchInput.focus(); + + // synthetic events are not working all that reliably for touch bar with esc keys + this.searchInput.addEventListener('keyup', this.handleKeyEvent); + } + + componentWillUnmount() { + this.webview.stopFindInPage('clearSelection'); + this.webview.removeEventListener('found-in-page', this.foundInPage); + this.searchInput.removeEventListener('keyup', this.handleKeyEvent); + } + + findNext = () => { + this.webview.findInPage(this.state.searchTxt); + }; + + find = (keyword) => { + this.webview.stopFindInPage('clearSelection'); + if (keyword) { + this.webview.findInPage(keyword); + } else { + this.setState({ + matches: '0/0', + }); + } + }; + + findPrev = () => { + this.webview.findInPage(this.state.searchTxt, {forward: false}); + } + + searchTxt = (event) => { + this.setState({searchTxt: event.target.value}); + this.find(event.target.value); + } + + handleKeyEvent = (event) => { + if (event.code === 'Escape') { + this.props.close(); + } else if (event.code === 'Enter') { + this.findNext(); + } + } + + foundInPage = (event) => { + const {matches, activeMatchOrdinal} = event.result; + this.setState({ + foundInPage: true, + matches: `${activeMatchOrdinal}/${matches}`, + }); + } + + render() { + return ( +
+
+
+ { + this.searchInput = input; + }} + /> + {this.state.matches} +
+ + + +
+
+ ); + } +} + +Finder.propTypes = { + close: PropTypes.func, + webviewKey: PropTypes.number, +}; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 7007b933..9440433c 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -11,7 +11,6 @@ import {Grid, Row} from 'react-bootstrap'; import {ipcRenderer, remote} from 'electron'; -import Finder from '../../main/finder'; import Utils from '../../utils/util.js'; import LoginModal from './LoginModal.jsx'; @@ -19,7 +18,7 @@ import MattermostView from './MattermostView.jsx'; import TabBar from './TabBar.jsx'; import HoveringURL from './HoveringURL.jsx'; import PermissionRequestDialog from './PermissionRequestDialog.jsx'; - +import Finder from './Finder.jsx'; import NewTeamModal from './NewTeamModal.jsx'; const MainPage = createReactClass({ @@ -144,24 +143,20 @@ const MainPage = createReactClass({ } }); - const webview = document.getElementById('mattermostView' + this.state.key); - this.finder = new Finder(webview); ipcRenderer.on('toggle-find', () => { - this.finder.toggle(); + this.toggleFinder(); }); }, componentDidUpdate(prevProps, prevState) { if (prevState.key !== this.state.key) { // i.e. When tab has been changed this.refs[`mattermostView${this.state.key}`].focusOnWebView(); - this.finder.destroy(); - const webview = document.getElementById('mattermostView' + this.state.key); - this.finder = new Finder(webview); } }, handleSelect(key) { const newKey = (this.props.teams.length + key) % this.props.teams.length; this.setState({ key: newKey, + finderVisible: false, }); var webview = document.getElementById('mattermostView' + newKey); ipcRenderer.send('update-title', { @@ -256,13 +251,20 @@ const MainPage = createReactClass({ }); }, - focusOnWebView() { - this.refs[`mattermostView${this.state.key}`].focusOnWebView(); + focusOnWebView(e) { + if (e.target.className !== 'finder-input') { + this.refs[`mattermostView${this.state.key}`].focusOnWebView(); + } + }, + + toggleFinder() { + this.setState({ + finderVisible: !this.state.finderVisible, + }); }, render() { var self = this; - var tabsRow; if (this.props.teams.length > 1) { tabsRow = ( @@ -376,6 +378,12 @@ const MainPage = createReactClass({ { tabsRow } { viewsRow } + { this.state.finderVisible ? ( + + ) : null} { (this.state.targetURL === '') ? diff --git a/src/browser/css/components/Finder.css b/src/browser/css/components/Finder.css new file mode 100644 index 00000000..45c72d03 --- /dev/null +++ b/src/browser/css/components/Finder.css @@ -0,0 +1,42 @@ +.finder-input-wrapper { + display: inline-block; + position: relative; +} + +.finder button { + border: 1px solid #d2d2d2; + border-radius: 3px; + background: white; + outline: none; + padding: 5px; + cursor: pointer; + font-size: 14px; +} + +.finder button:hover { + background: #f0f0f0; +} + +.finder-input { + border: 1px solid #d2d2d2; + border-radius: 3px; + padding: 5px; + outline: none; + font-size: 14px; +} + +.finder-input:focus { + border-color: #35b5f4; + box-shadow: 0 0 1px #35b5f4; +} + +.finder-progress__disabled { + display: none; +} + +.finder-progress { + position: absolute; + font-size: 12px; + right: 10px; + top: 10px; +} diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css index 746a03f7..e6e75041 100644 --- a/src/browser/css/components/MainPage.css +++ b/src/browser/css/components/MainPage.css @@ -25,50 +25,3 @@ div[id*="-permissionDialog"] { border-bottom-right-radius: 5px; font-size: 0px; } - -.finder-input-wrapper { - display: inline-block; - position: relative; -} - -.finder button { - border: 1px solid #d2d2d2; - border-radius: 3px; - background: white; - outline: none; - padding: 5px; - cursor: pointer; - font-size: 14px; -} - -.finder button:hover { - background: #f0f0f0; -} - -.finder-input { - border: 1px solid #d2d2d2; - border-radius: 3px; - padding: 5px; - outline: none; - font-size: 14px; -} - -.finder-input:focus { - border-color: #35b5f4; - box-shadow: 0 0 1px #35b5f4; -} - -.finder__hidden { - display: none; -} - -.finder-progress__disabled { - display: none; -} - -.finder-progress { - position: absolute; - font-size: 12px; - right: 10px; - top: 10px; -} diff --git a/src/browser/css/components/index.css b/src/browser/css/components/index.css index 65e16e05..357b259d 100644 --- a/src/browser/css/components/index.css +++ b/src/browser/css/components/index.css @@ -6,3 +6,4 @@ @import url("PermissionRequestDialog.css"); @import url("TabBar.css"); @import url("TeamListItem.css"); +@import url("Finder.css"); diff --git a/src/main/finder.js b/src/main/finder.js deleted file mode 100644 index 231ee925..00000000 --- a/src/main/finder.js +++ /dev/null @@ -1,109 +0,0 @@ -// Copyright (c) 2015-2016 Yuya Ochiai -// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved. -// See LICENSE.txt for license information. - -export default class Finder { - constructor(target) { - this.target = target; - } - - toggle() { - return this.opened ? this.close() : this.open(); - } - - open() { - if (!this.initialized) { - this.initialize(); - } - this.opened = true; - this.$finder.classList.remove('finder__hidden'); - this.$input.focus(); - } - - close = () => { - this.opened = false; - this.target.stopFindInPage('clearSelection'); - this.$finder.classList.add('finder__hidden'); - } - - findNext = () => { - if (this.$input.value) { - this.target.findInPage(this.$input.value); - } - } - - findPrev = () => { - if (this.$input.value) { - this.target.findInPage(this.$input.value, {forward: false}); - } - } - - find = (keyword) => { - this.target.stopFindInPage('clearSelection'); - if (keyword) { - this.target.findInPage(keyword); - } else { - this.$progress.textContent = '0/0'; - } - } - - handleKeyEvent = (event) => { - if (event.code === 'Escape') { - this.close(); - } else if (event.code === 'Enter') { - this.findNext(); - } else { - this.find(event.target.value); - } - } - - foundInPage = (event) => { - const {matches, activeMatchOrdinal} = event.result; - this.$progress.classList.remove('finder-progress__disabled'); - this.$progress.textContent = `${activeMatchOrdinal}/${matches}`; - } - - destroy() { - this.initialized = false; - if (this.$input) { - this.$input.removeEventListener('keyup', this.handleKeyEvent); - this.$prev.removeEventListener('click', this.findPrev); - this.$next.removeEventListener('click', this.findNext); - this.$close.removeEventListener('click', this.close); - this.target.removeEventListener('found-in-page', this.foundInPage); - const searchDiv = document.getElementById('searchDiv'); - searchDiv.parentNode.removeChild(searchDiv); - } - } - - initialize() { - this.initialized = true; - const wrapper = document.createElement('div'); - wrapper.setAttribute('id', 'searchDiv'); - wrapper.innerHTML = ` -
-
- - -
- - - -
`; - - document.body.appendChild(wrapper); - - this.$finder = wrapper.querySelector('.finder'); - this.$progress = this.$finder.querySelector('.finder-progress'); - this.$input = this.$finder.querySelector('.finder-input'); - this.$prev = this.$finder.querySelector('.finder-prev'); - this.$next = this.$finder.querySelector('.finder-next'); - this.$close = this.$finder.querySelector('.finder-close'); - - this.$input.addEventListener('keyup', this.handleKeyEvent); - this.$prev.addEventListener('click', this.findPrev); - this.$next.addEventListener('click', this.findNext); - this.$close.addEventListener('click', this.close); - this.target.addEventListener('found-in-page', this.foundInPage); - } -} From 945918e6c0069b0357f870aadd0b90d0045716a5 Mon Sep 17 00:00:00 2001 From: sudheer Date: Thu, 26 Jul 2018 13:25:22 +0530 Subject: [PATCH 4/6] Change toggle to always open for cntrl/cmd+F --- src/browser/components/Finder.jsx | 71 +++++++++++++++++++++++++++-- src/browser/components/MainPage.jsx | 15 ++++-- 2 files changed, 80 insertions(+), 6 deletions(-) diff --git a/src/browser/components/Finder.jsx b/src/browser/components/Finder.jsx index 80203a87..5f13cdcf 100644 --- a/src/browser/components/Finder.jsx +++ b/src/browser/components/Finder.jsx @@ -28,6 +28,12 @@ export default class Finder extends React.Component { this.searchInput.removeEventListener('keyup', this.handleKeyEvent); } + componentDidUpdate(prevProps) { + if (this.props.focusState && (this.props.focusState !== prevProps.focusState)) { + this.searchInput.focus(); + } + } + findNext = () => { this.webview.findInPage(this.state.searchTxt); }; @@ -78,6 +84,7 @@ export default class Finder extends React.Component { placeholder='' value={this.state.searchTxt} onChange={this.searchTxt} + onBlur={this.props.inputBlur} ref={(input) => { this.searchInput = input; }} @@ -87,15 +94,71 @@ export default class Finder extends React.Component { + > + + + + + > + + + + + > + + + + + ); @@ -105,4 +168,6 @@ export default class Finder extends React.Component { Finder.propTypes = { close: PropTypes.func, webviewKey: PropTypes.number, + focusState: PropTypes.bool, + inputBlur: PropTypes.func, }; diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index 9440433c..bb16c00d 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -144,7 +144,7 @@ const MainPage = createReactClass({ }); ipcRenderer.on('toggle-find', () => { - this.toggleFinder(); + this.toggleFinder(true); }); }, componentDidUpdate(prevProps, prevState) { @@ -257,9 +257,16 @@ const MainPage = createReactClass({ } }, - toggleFinder() { + toggleFinder(state) { this.setState({ - finderVisible: !this.state.finderVisible, + finderVisible: state || !this.state.finderVisible, + focusFinder: true, + }); + }, + + inputBlur() { + this.setState({ + focusFinder: false, }); }, @@ -382,6 +389,8 @@ const MainPage = createReactClass({ ) : null} From 6b235afbd16c6cbdb1166f8bd4ace0cd3eff3c51 Mon Sep 17 00:00:00 2001 From: sudheer Date: Thu, 26 Jul 2018 13:26:38 +0530 Subject: [PATCH 5/6] Fix styling for finder --- src/browser/css/components/Finder.css | 36 +++++++++++++++++++------ src/browser/css/components/MainPage.css | 2 +- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/src/browser/css/components/Finder.css b/src/browser/css/components/Finder.css index 45c72d03..8ab08d8e 100644 --- a/src/browser/css/components/Finder.css +++ b/src/browser/css/components/Finder.css @@ -1,16 +1,16 @@ .finder-input-wrapper { display: inline-block; position: relative; + vertical-align: bottom; } .finder button { - border: 1px solid #d2d2d2; - border-radius: 3px; - background: white; + border: none; + background: #d2d2d2; outline: none; - padding: 5px; cursor: pointer; - font-size: 14px; + font-size: 18px; + height: 26px; } .finder button:hover { @@ -20,9 +20,12 @@ .finder-input { border: 1px solid #d2d2d2; border-radius: 3px; - padding: 5px; + width: 200px; outline: none; + line-height: 24px; font-size: 14px; + padding: 0px 35px 0px 5px; + vertical-align: baseline; } .finder-input:focus { @@ -37,6 +40,23 @@ .finder-progress { position: absolute; font-size: 12px; - right: 10px; - top: 10px; + right: 8px; + top: 6px; + color: #7b7b7b; +} + +.icon { + height: 18px; + width: 18px; +} + +.finder .finder-close { + background: transparent; + border: none; +} + +.finder-next { + border-top-right-radius: 3px; + border-bottom-right-radius: 3px; + margin-right: 2px; } diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css index e6e75041..e3518a11 100644 --- a/src/browser/css/components/MainPage.css +++ b/src/browser/css/components/MainPage.css @@ -16,7 +16,7 @@ div[id*="-permissionDialog"] { position: fixed; top: 0; right: 20px; - padding: 5px; + padding: 4px; background: #eee; border: 1px solid #d7d7d7; border-top: none; From 579f99a800ce5a50ef4056dbdd2c9d9b19b7b9b1 Mon Sep 17 00:00:00 2001 From: sudheer Date: Tue, 31 Jul 2018 22:37:45 +0530 Subject: [PATCH 6/6] Change to explicit close function for closing finder --- src/browser/components/MainPage.jsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx index bb16c00d..f80695c0 100644 --- a/src/browser/components/MainPage.jsx +++ b/src/browser/components/MainPage.jsx @@ -144,7 +144,7 @@ const MainPage = createReactClass({ }); ipcRenderer.on('toggle-find', () => { - this.toggleFinder(true); + this.activateFinder(true); }); }, componentDidUpdate(prevProps, prevState) { @@ -257,13 +257,19 @@ const MainPage = createReactClass({ } }, - toggleFinder(state) { + activateFinder() { this.setState({ - finderVisible: state || !this.state.finderVisible, + finderVisible: true, focusFinder: true, }); }, + closeFinder() { + this.setState({ + finderVisible: false, + }); + }, + inputBlur() { this.setState({ focusFinder: false, @@ -388,7 +394,7 @@ const MainPage = createReactClass({ { this.state.finderVisible ? (