Add colour hints to the local search bar.

pull/2304/head^2
mic074b 2020-01-16 23:02:36 +11:00
parent e078de25f0
commit 0a8f9163db
2 changed files with 38 additions and 2 deletions

View File

@ -9,6 +9,7 @@ class NoteSearchBarComponent extends React.Component {
this.state = {
query: '',
backgroundColor: undefined,
};
this.searchInput_change = this.searchInput_change.bind(this);
@ -113,11 +114,31 @@ class NoteSearchBarComponent extends React.Component {
const previousButton = this.buttonIconComponent('fa-chevron-up', this.previousButton_click);
const nextButton = this.buttonIconComponent('fa-chevron-down', this.nextButton_click);
const theme = themeStyle(this.props.theme);
if (this.props.resultCount !== undefined) {
if (this.state.query.length > 0 && this.props.resultCount === 0) {
this.state.backgroundColor = theme.warningBackgroundColor;
} else {
this.state.backgroundColor = theme.backgroundColor;
}
}
if (this.state.backgroundColor === undefined) {
this.state.backgroundColor = theme.backgroundColor;
}
return (
<div style={this.props.style}>
<div style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
{closeButton}
<input placeholder={_('Search...')} value={this.state.query} onChange={this.searchInput_change} onKeyDown={this.searchInput_keyDown} ref="searchInput" type="text" style={{ width: 200, marginRight: 5 }}></input>
<input
placeholder={_('Search...')}
value={this.state.query}
onChange={this.searchInput_change}
onKeyDown={this.searchInput_keyDown}
ref="searchInput"
type="text"
style={{ width: 200, marginRight: 5, backgroundColor: this.state.backgroundColor }}
/>
{nextButton}
{previousButton}
</div>

View File

@ -2125,7 +2125,22 @@ class NoteTextComponent extends React.Component {
/>
);
const noteSearchBarComp = !this.state.showLocalSearch ? null : <NoteSearchBar ref={this.noteSearchBar_} style={{ display: 'flex', height: searchBarHeight, width: innerWidth, borderTop: `1px solid ${theme.dividerColor}` }} onChange={this.noteSearchBar_change} onNext={this.noteSearchBar_next} onPrevious={this.noteSearchBar_previous} onClose={this.noteSearchBar_close} />;
const noteSearchBarComp = !this.state.showLocalSearch ? null : (
<NoteSearchBar
ref={this.noteSearchBar_}
style={{
display: 'flex',
height: searchBarHeight,
width: innerWidth,
borderTop: `1px solid ${theme.dividerColor}`,
}}
resultCount={this.state.localSearch.resultCount}
onChange={this.noteSearchBar_change}
onNext={this.noteSearchBar_next}
onPrevious={this.noteSearchBar_previous}
onClose={this.noteSearchBar_close}
/>
);
return (
<div style={rootStyle} onDrop={this.onDrop_}>