diff --git a/src/browser/components/Finder.jsx b/src/browser/components/Finder.jsx
index 14efe907..f1e62ee2 100644
--- a/src/browser/components/Finder.jsx
+++ b/src/browser/components/Finder.jsx
@@ -38,7 +38,10 @@ export default class Finder extends React.Component {
}
findNext = () => {
- this.webview.findInPage(this.state.searchTxt);
+ this.webview.findInPage(this.state.searchTxt, {
+ forward: true,
+ findNext: true,
+ });
};
find = (keyword) => {
@@ -53,7 +56,7 @@ export default class Finder extends React.Component {
};
findPrev = () => {
- this.webview.findInPage(this.state.searchTxt, {forward: false});
+ this.webview.findInPage(this.state.searchTxt, {forward: false, findNext: true});
}
searchTxt = (event) => {
@@ -77,6 +80,15 @@ export default class Finder extends React.Component {
});
}
+ inputFocus = (e) => {
+ e.stopPropagation();
+ this.props.inputFocus(e, true);
+ }
+
+ inputBlur = (e) => {
+ this.props.inputFocus(e, false);
+ }
+
render() {
return (
@@ -87,7 +99,8 @@ export default class Finder extends React.Component {
placeholder=''
value={this.state.searchTxt}
onChange={this.searchTxt}
- onBlur={this.props.inputBlur}
+ onBlur={this.inputBlur}
+ onClick={this.inputFocus}
ref={(input) => {
this.searchInput = input;
}}
@@ -172,5 +185,5 @@ Finder.propTypes = {
close: PropTypes.func,
webviewKey: PropTypes.number,
focusState: PropTypes.bool,
- inputBlur: PropTypes.func,
+ inputFocus: PropTypes.func,
};
diff --git a/src/browser/components/MainPage.jsx b/src/browser/components/MainPage.jsx
index 0e4e8f7b..56298606 100644
--- a/src/browser/components/MainPage.jsx
+++ b/src/browser/components/MainPage.jsx
@@ -58,6 +58,8 @@ export default class MainPage extends React.Component {
certificateRequests: [],
maximized: false,
showNewTeamModal: false,
+ focusFinder: false,
+ finderVisible: false,
};
}
@@ -174,25 +176,11 @@ export default class MainPage extends React.Component {
});
ipcRenderer.on('download-complete', this.showDownloadCompleteNotification);
- function focusListener() {
- if (self.state.showNewTeamModal && self.inputRef) {
- self.inputRef.current().focus();
- } else {
- self.handleOnTeamFocused(self.state.key);
- self.refs[`mattermostView${self.state.key}`].focusOnWebView();
- }
- self.setState({unfocused: false});
- }
-
- function blurListener() {
- self.setState({unfocused: true});
- }
-
const currentWindow = remote.getCurrentWindow();
- currentWindow.on('focus', focusListener);
- currentWindow.on('blur', blurListener);
+ currentWindow.on('focus', self.focusListener);
+ currentWindow.on('blur', self.blurListener);
window.addEventListener('beforeunload', () => {
- currentWindow.removeListener('focus', focusListener);
+ currentWindow.removeListener('focus', self.focusListener);
});
if (currentWindow.isMaximized()) {
@@ -209,7 +197,7 @@ export default class MainPage extends React.Component {
// https://github.com/mattermost/desktop/pull/371#issuecomment-263072803
currentWindow.webContents.on('devtools-closed', () => {
- focusListener();
+ self.focusListener();
});
ipcRenderer.on('open-devtool', () => {
@@ -358,6 +346,19 @@ export default class MainPage extends React.Component {
}
}
+ focusListener = () => {
+ if (this.state.showNewTeamModal && this.inputRef) {
+ this.inputRef.current().focus();
+ } else if (!(this.state.finderVisible && this.state.focusFinder)) {
+ this.handleOnTeamFocused(this.state.key);
+ this.refs[`mattermostView${this.state.key}`].focusOnWebView();
+ }
+ this.setState({unfocused: false});
+ }
+
+ blurListener = () => {
+ this.setState({unfocused: true});
+ }
loginRequest = (event, request, authInfo) => {
const loginQueue = this.state.loginQueue;
loginQueue.push({
@@ -588,12 +589,13 @@ export default class MainPage extends React.Component {
closeFinder = () => {
this.setState({
finderVisible: false,
+ focusFinder: false,
});
}
- inputBlur = () => {
+ inputFocus = (e, focus) => {
this.setState({
- focusFinder: false,
+ focusFinder: focus,
});
}
@@ -854,7 +856,7 @@ export default class MainPage extends React.Component {
webviewKey={this.state.key}
close={this.closeFinder}
focusState={this.state.focusFinder}
- inputBlur={this.inputBlur}
+ inputFocus={this.inputFocus}
/>
) : null}
diff --git a/src/browser/css/components/Finder.css b/src/browser/css/components/Finder.css
index 021c2108..4d9ac338 100644
--- a/src/browser/css/components/Finder.css
+++ b/src/browser/css/components/Finder.css
@@ -1,3 +1,22 @@
+.finder {
+ position: fixed;
+ top: 0px;
+ right: 200px;
+ padding: 4px;
+ 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;
+ -webkit-app-region: no-drag;
+}
+
+.finder.macOS {
+ right: 20px;
+}
+
.finder-input-wrapper {
display: inline-block;
position: relative;
@@ -6,14 +25,13 @@
.finder button {
border: none;
- background: #d2d2d2;
+ background: #f0f0f0;
outline: none;
- font-size: 18px;
height: 26px;
}
.finder button:hover {
- background: #f0f0f0;
+ background: #d2d2d2;
}
.finder-input {
@@ -50,8 +68,7 @@
}
.finder .finder-close {
- background: transparent;
- border: none;
+ border-radius: 3px;
}
.finder-next {
@@ -59,3 +76,9 @@
border-bottom-right-radius: 3px;
margin-right: 2px;
}
+
+.finder-prev {
+ border-top-left-radius: 3px;
+ border-bottom-left-radius: 3px;
+ margin-left: 2px;
+}
\ No newline at end of file
diff --git a/src/browser/css/components/MainPage.css b/src/browser/css/components/MainPage.css
index 37f3641f..e5097959 100644
--- a/src/browser/css/components/MainPage.css
+++ b/src/browser/css/components/MainPage.css
@@ -11,22 +11,3 @@
div[id*="-permissionDialog"] {
max-width: 350px;
}
-
-.finder {
- position: fixed;
- top: 0;
- right: 200px;
- padding: 4px;
- 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;
- -webkit-app-region: no-drag;
-}
-
-.finder.macOS {
- right: 20px;
-}