clearer message about approximate search mode

This commit is contained in:
adueck 2022-12-02 09:36:08 +05:00
parent da12287fb0
commit ffef1dd4bb
2 changed files with 19 additions and 9 deletions

View File

@ -395,12 +395,16 @@ class App extends Component<RouteComponentProps, State> {
} }
private handleSearchValueChange(searchValue: string) { private handleSearchValueChange(searchValue: string) {
if (searchValue === " ") return; if (searchValue === " ") {
return;
}
const lastChar = searchValue[searchValue.length-1]; const lastChar = searchValue[searchValue.length-1];
if (lastChar >= '0' && lastChar <= '9') { if (lastChar >= '0' && lastChar <= '9') {
return; return;
} }
if (this.state.dictionaryStatus !== "ready") return; if (this.state.dictionaryStatus !== "ready") {
return;
}
if (searchValue === "") { if (searchValue === "") {
this.setState({ this.setState({
searchValue: "", searchValue: "",
@ -510,12 +514,16 @@ class App extends Component<RouteComponentProps, State> {
<DictionaryStatusDisplay status={this.state.dictionaryStatus} /> <DictionaryStatusDisplay status={this.state.dictionaryStatus} />
: :
<> <>
<Route path="/" exact> <Route path="/" exact={true}>
<div className="text-center mt-4"> <div className="text-center mt-4">
<h4 className="font-weight-light p-3 mb-4">LingDocs Pashto Dictionary</h4> <h4 className="font-weight-light p-3 mb-4">LingDocs Pashto Dictionary</h4>
{this.state.options.searchType === "alphabetical" && <div className="mt-4 font-weight-light"> <div className="mt-4 font-weight-light">
<div className="mb-3"><span className="fa fa-book mr-2" ></span> Alphabetical browsing mode</div> <div className="mb-4 small">
</div>} {this.state.options.searchType === "alphabetical"
? <><span className="fa fa-book mr-2" /> Alphabetical browsing mode</>
: <><span className="fa fa-bolt mr-2" /> Approximate search mode</>}
</div>
</div>
{this.state.user?.level === "editor" && <div className="mt-4 font-weight-light"> {this.state.user?.level === "editor" && <div className="mt-4 font-weight-light">
<div className="mb-3">Editor privileges active</div> <div className="mb-3">Editor privileges active</div>
<Link to="/edit"> <Link to="/edit">
@ -529,7 +537,7 @@ class App extends Component<RouteComponentProps, State> {
<Link to="/phrase-builder" className="plain-link h5 font-weight-light"> <Link to="/phrase-builder" className="plain-link h5 font-weight-light">
Phrase Builder Phrase Builder
</Link> </Link>
<span className="mx-1">{``}</span> <span className="mx-1"> </span>
<a href="https://grammar.lingdocs.com" className="plain-link h5 font-weight-light"> <a href="https://grammar.lingdocs.com" className="plain-link h5 font-weight-light">
Grammar Grammar
</a> </a>
@ -616,7 +624,7 @@ class App extends Component<RouteComponentProps, State> {
{ "footer-thick": this.state.options.searchBarPosition === "bottom" && !["/search", "/word"].includes(this.props.location.pathname) }, { "footer-thick": this.state.options.searchBarPosition === "bottom" && !["/search", "/word"].includes(this.props.location.pathname) },
{ "wee-less-footer": this.state.options.searchBarPosition === "bottom" && ["/search", "/word"].includes(this.props.location.pathname) }, { "wee-less-footer": this.state.options.searchBarPosition === "bottom" && ["/search", "/word"].includes(this.props.location.pathname) },
)}> )}>
<Route path="/" exact> <Route path="/" exact={true}>
<div className="buttons-footer"> <div className="buttons-footer">
<BottomNavItem label="About" icon="info-circle" page="/about" /> <BottomNavItem label="About" icon="info-circle" page="/about" />
<BottomNavItem label="Settings" icon="cog" page="/settings" /> <BottomNavItem label="Settings" icon="cog" page="/settings" />

View File

@ -26,7 +26,9 @@ const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }
window.addEventListener("focus", onFocus); window.addEventListener("focus", onFocus);
Mousetrap.bind(["shift+space"], (e) => { Mousetrap.bind(["shift+space"], (e) => {
e.preventDefault(); e.preventDefault();
if (e.repeat) return; if (e.repeat) {
return;
}
inputRef.current?.focus(); inputRef.current?.focus();
}); });
return () => { return () => {