midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

100% height search field inside form

Browse source
This commit is contained in:
Ward 2021-07-19 16:48:10 +02:00
parent 3a16518bcb
commit 8cc3f8bede
1 changed files with 66 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

57
UI/BigComponents/SearchAndGo.ts
View file

@ -11,36 +11,37 @@ import Hash from "../../Logic/Web/Hash";
import Combine from "../Base/Combine"; import Combine from "../Base/Combine";
export default class SearchAndGo extends Combine { export default class SearchAndGo extends Combine {
constructor() { constructor() {
const goButton = Svg.search_ui().SetClass('w-8 h-8 full-rounded border-black float-right'); const goButton = Svg.search_ui().SetClass(
"w-8 h-8 full-rounded border-black float-right"
);
const placeholder = new UIEventSource<Translation>(Translations.t.general.search.search) const placeholder = new UIEventSource<Translation>(
Translations.t.general.search.search
);
const searchField = new TextField({ const searchField = new TextField({
placeholder: new VariableUiElement( placeholder: new VariableUiElement(placeholder),
placeholder.map(uiElement => uiElement, [Locale.language])
),
value: new UIEventSource<string>(""), value: new UIEventSource<string>(""),
inputStyle:
inputStyle: " background: transparent;\n" + " background: transparent;\n" +
" border: none;\n" + " border: none;\n" +
" font-size: large;\n" + " font-size: large;\n" +
" width: 100%;\n" + " width: 100%;\n" +
" height: 100%;\n" +
" box-sizing: border-box;\n" + " box-sizing: border-box;\n" +
" color: var(--foreground-color);" " color: var(--foreground-color);",
});
} searchField.SetClass("relative float-left mt-0 ml-2");
searchField.SetStyle("width: calc(100% - 3em);height: 100%");
super([searchField, goButton]);
this.SetClass("block h-8");
this.SetStyle(
"background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;"
); );
searchField.SetClass("relative float-left mt-0 ml-2")
searchField.SetStyle("width: calc(100% - 3em)")
super([searchField, goButton])
this.SetClass("block h-8")
this.SetStyle("background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;")
// Triggered by 'enter' or onclick // Triggered by 'enter' or onclick
function runSearch() { function runSearch() {
const searchString = searchField.GetValue().data; const searchString = searchField.GetValue().data;
@ -49,9 +50,10 @@ export default class SearchAndGo extends Combine {
} }
searchField.GetValue().setData(""); searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.searching); placeholder.setData(Translations.t.general.search.searching);
Geocoding.Search(searchString, (result) => { Geocoding.Search(
searchString,
console.log("Search result", result) (result) => {
console.log("Search result", result);
if (result.length == 0) { if (result.length == 0) {
placeholder.setData(Translations.t.general.search.nothing); placeholder.setData(Translations.t.general.search.nothing);
return; return;
@ -61,8 +63,8 @@ export default class SearchAndGo extends Combine {
const bb = poi.boundingbox; const bb = poi.boundingbox;
const bounds: [[number, number], [number, number]] = [ const bounds: [[number, number], [number, number]] = [
[bb[0], bb[2]], [bb[0], bb[2]],
[bb[1], bb[3]] [bb[1], bb[3]],
] ];
State.state.selectedElement.setData(undefined); State.state.selectedElement.setData(undefined);
Hash.hash.setData(poi.osm_type + "/" + poi.osm_id); Hash.hash.setData(poi.osm_type + "/" + poi.osm_id);
State.state.leafletMap.data.fitBounds(bounds); State.state.leafletMap.data.fitBounds(bounds);
@ -71,14 +73,11 @@ export default class SearchAndGo extends Combine {
() => { () => {
searchField.GetValue().setData(""); searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.error); placeholder.setData(Translations.t.general.search.error);
});
} }
);
}
searchField.enterPressed.addCallback(runSearch); searchField.enterPressed.addCallback(runSearch);
goButton.onClick(runSearch); goButton.onClick(runSearch);
} }
} }