midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add 'ctrl+F' to select the search box immediately

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-12-24 02:01:58 +01:00
parent 8f51dd8d64
commit 92b311bffa
3 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
UI/BigComponents/MoreScreen.ts
View file

@ -92,13 +92,13 @@ export default class MoreScreen extends Combine {
if (onMainScreen) {
search.focus()
document.addEventListener("keydown", function (event) {
if (event.ctrlKey && event.code === "KeyF") {
search.focus()
event.preventDefault()
}
})
}
document.addEventListener("keydown", function (event) {
if (event.ctrlKey && event.code === "KeyF") {
search.focus()
event.preventDefault()
}
})
const searchBar = new Combine([
Svg.search_svg().SetClass("w-8"),

7
UI/BigComponents/SearchAndGo.ts
View file

@ -1,6 +1,5 @@
import { UIEventSource } from "../../Logic/UIEventSource"
import { Translation } from "../i18n/Translation"
import { VariableUiElement } from "../Base/VariableUIElement"
import Svg from "../../Svg"
import { TextField } from "../Input/TextField"
import { Geocoding } from "../../Logic/Osm/Geocoding"
@ -10,6 +9,7 @@ import Combine from "../Base/Combine"
import Locale from "../i18n/Locale"
export default class SearchAndGo extends Combine {
private readonly _searchField: TextField
constructor(state: { leafletMap: UIEventSource<any>; selectedElement?: UIEventSource<any> }) {
const goButton = Svg.search_ui().SetClass("w-8 h-8 full-rounded border-black float-right")
@ -74,6 +74,11 @@ export default class SearchAndGo extends Combine {
}
searchField.enterPressed.addCallback(runSearch)
this._searchField = searchField
goButton.onClick(runSearch)
}
focus() {
this._searchField.focus()
}
}

13
UI/DefaultGUI.ts
View file

@ -238,11 +238,18 @@ export default class DefaultGUI {
.AttachTo("on-small-screen")
new Combine([
Toggle.If(state.featureSwitchSearch, () =>
new SearchAndGo(state).SetClass(
Toggle.If(state.featureSwitchSearch, () => {
const search = new SearchAndGo(state).SetClass(
"shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm pointer-events-auto"
)
),
document.addEventListener("keydown", function (event) {
if (event.ctrlKey && event.code === "KeyF") {
search.focus()
event.preventDefault()
}
})
return search
}),
]).AttachTo("top-right")
new LeftControls(state, guiState).AttachTo("bottom-left")