From a377ac2a1204a54866e870db6fe7a9e397090889 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guillermo=20Vay=C3=A1?= Date: Wed, 3 Jun 2020 10:42:09 +0200 Subject: [PATCH] [MM-25429]/[MM-25433] fix finder focus, align buttons, keep state consistent (#1301) * [MM-25429] fix finder focus, align buttons, keep state consistent * wip * actually fix the problem * remove logs * move finder class with the rest of the classes, back to top * address ux comments --- src/browser/components/Finder.jsx | 21 +++++++++--- src/browser/components/MainPage.jsx | 44 +++++++++++++------------ src/browser/css/components/Finder.css | 33 ++++++++++++++++--- src/browser/css/components/MainPage.css | 19 ----------- 4 files changed, 68 insertions(+), 49 deletions(-) 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; -}