Joplin
/
joplin
mirror of https://github.com/laurent22/joplin.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix annoying flicker when entering first query character.

pull/2304/head^2
mic074b 2020-01-18 14:16:12 +11:00
parent c856e8d9ac
commit b6db2bf2c5
1 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ElectronClient/app/gui/NoteSearchBar.jsx
View File

@ -9,7 +9,7 @@ class NoteSearchBarComponent extends React.Component {
this.state = { this.state = {
query: '', query: '',
resultCount: 0, backgroundColor: undefined,
}; };
this.searchInput_change = this.searchInput_change.bind(this); this.searchInput_change = this.searchInput_change.bind(this);
@ -115,13 +115,17 @@ class NoteSearchBarComponent extends React.Component {
const nextButton = this.buttonIconComponent('fa-chevron-down', this.nextButton_click); const nextButton = this.buttonIconComponent('fa-chevron-down', this.nextButton_click);
if (this.props.resultCount !== undefined) { if (this.props.resultCount !== undefined) {
this.state.resultCount = this.props.resultCount; const theme = themeStyle(this.props.theme);
} if (this.state.query.length === 0 || this.props.resultCount > 0) {
this.state.backgroundColor = theme.backgroundColor;
const theme = themeStyle(this.props.theme); } else {
let backgroundColor = theme.backgroundColor; this.state.backgroundColor = theme.warningBackgroundColor;
if (this.state.query.length > 0 && this.state.resultCount === 0) { }
backgroundColor = theme.warningBackgroundColor; } else {
if (this.state.backgroundColor === undefined) {
const theme = themeStyle(this.props.theme);
this.state.backgroundColor = theme.backgroundColor;
}
} }
return ( return (
@ -135,7 +139,7 @@ class NoteSearchBarComponent extends React.Component {
onKeyDown={this.searchInput_keyDown} onKeyDown={this.searchInput_keyDown}
ref="searchInput" ref="searchInput"
type="text" type="text"
style={{ width: 200, marginRight: 5, backgroundColor: backgroundColor }} style={{ width: 200, marginRight: 5, backgroundColor: this.state.backgroundColor }}
/> />
{nextButton} {nextButton}
{previousButton} {previousButton}