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

Fix: styling issues; refactoring: remove 'SearchAndGo'

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-05-06 12:35:02 +02:00
parent 5d3056cb09
commit 0e81b65363
10 changed files with 37 additions and 138 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/ModalRight.svelte
View file

@ -8,7 +8,7 @@
const dispatch = createEventDispatcher<{ close }>();
</script>
<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl">
<div class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl" style="max-width: 100vw; max-height: 100vh">
<div class="flex flex-col m-0 normal-background">
<slot name="close-button">
<div class="w-8 h-8 absolute right-10 top-10 cursor-pointer" on:click={() => dispatch("close")}>

7
UI/BigComponents/Geosearch.svelte
View file

@ -43,7 +43,7 @@
}
const result = await Geocoding.Search(searchContents, bounds.data);
if (result.length == 0) {
feedback = Translations.t.search.nothing.txt;
feedback = Translations.t.general.search.nothing.txt;
return;
}
const poi = result[0];
@ -61,7 +61,7 @@
}
} catch (e) {
console.error(e);
feedback = Translations.t.search.error.txt;
feedback = Translations.t.general.search.error.txt;
} finally {
isRunning = false;
}
@ -70,7 +70,7 @@
</script>
<div class="flex normal-background rounded-full pl-2 justify-between">
<form>
<form class="w-full">
{#if isRunning}
<Loading>{Translations.t.general.search.searching}</Loading>
@ -81,6 +81,7 @@
{:else }
<input
type="search"
class="w-full"
bind:this={inputElement}
on:keypress={keypr => keypr.key === "Enter" ? performSearch() : undefined}

25
UI/BigComponents/PdfExportGui.ts
View file

@ -1,21 +1,20 @@
import Combine from "../Base/Combine"
import { FlowPanelFactory, FlowStep } from "../ImportFlow/FlowStep"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import { InputElement } from "../Input/InputElement"
import { SvgToPdf, SvgToPdfOptions } from "../../Utils/svgToPdf"
import { FixedInputElement } from "../Input/FixedInputElement"
import { FixedUiElement } from "../Base/FixedUiElement"
import {FlowPanelFactory, FlowStep} from "../ImportFlow/FlowStep"
import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource"
import {InputElement} from "../Input/InputElement"
import {SvgToPdf, SvgToPdfOptions} from "../../Utils/svgToPdf"
import {FixedInputElement} from "../Input/FixedInputElement"
import {FixedUiElement} from "../Base/FixedUiElement"
import FileSelectorButton from "../Input/FileSelectorButton"
import InputElementMap from "../Input/InputElementMap"
import { RadioButton } from "../Input/RadioButton"
import { Utils } from "../../Utils"
import { VariableUiElement } from "../Base/VariableUIElement"
import {RadioButton} from "../Input/RadioButton"
import {Utils} from "../../Utils"
import {VariableUiElement} from "../Base/VariableUIElement"
import Loading from "../Base/Loading"
import BaseUIElement from "../BaseUIElement"
import Img from "../Base/Img"
import Title from "../Base/Title"
import { CheckBox } from "../Input/Checkboxes"
import SearchAndGo from "./SearchAndGo"
import {CheckBox} from "../Input/Checkboxes"
import Toggle from "../Input/Toggle"
import List from "../Base/List"
import LeftIndex from "../Base/LeftIndex"
@ -24,7 +23,7 @@ import Toggleable from "../Base/Toggleable"
import Lazy from "../Base/Lazy"
import LinkToWeblate from "../Base/LinkToWeblate"
import Link from "../Base/Link"
import { AllLanguagesSelector } from "../Popup/AllLanguagesSelector"
import {AllLanguagesSelector} from "../Popup/AllLanguagesSelector"
class SelectTemplate extends Combine implements FlowStep<{ title: string; pages: string[] }> {
readonly IsValid: Store<boolean>
@ -158,7 +157,7 @@ class SelectPdfOptions
false
)
const locationInput = Minimap.createMiniMap().SetClass("block w-full")
const searchField = new SearchAndGo({ leafletMap: locationInput.leafletMap })
const searchField = undefined // new SearchAndGo({ leafletMap: locationInput.leafletMap })
const selectLocation = new Combine([
new Toggle(
new Combine([new Title("Select override location"), searchField]).SetClass("flex"),

89
UI/BigComponents/SearchAndGo.ts
View file

@ -1,89 +0,0 @@
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { Translation } from "../i18n/Translation"
import Svg from "../../Svg"
import { TextField } from "../Input/TextField"
import { Geocoding } from "../../Logic/Osm/Geocoding"
import Translations from "../i18n/Translations"
import Hash from "../../Logic/Web/Hash"
import Combine from "../Base/Combine"
import Locale from "../i18n/Locale"
import { BBox } from "../../Logic/BBox"
export default class SearchAndGo extends Combine {
private readonly _searchField: TextField
constructor(state: {
leafletMap: UIEventSource<any>
selectedElement?: UIEventSource<any>
bounds?: Store<BBox>
}) {
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 searchField = new TextField({
placeholder: placeholder.map(
(tr) => tr.textFor(Locale.language.data),
[Locale.language]
),
value: new UIEventSource<string>(""),
inputStyle:
" background: transparent;\n" +
" border: none;\n" +
" font-size: large;\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" box-sizing: border-box;\n" +
" 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;"
)
// Triggered by 'enter' or onclick
async function runSearch() {
const searchString = searchField.GetValue().data
if (searchString === undefined || searchString === "") {
return
}
searchField.GetValue().setData("")
placeholder.setData(Translations.t.general.search.searching)
try {
const result = await Geocoding.Search(searchString, state.bounds.data)
console.log("Search result", result)
if (result.length == 0) {
placeholder.setData(Translations.t.general.search.nothing)
return
}
const poi = result[0]
const bb = poi.boundingbox
const bounds: [[number, number], [number, number]] = [
[bb[0], bb[2]],
[bb[1], bb[3]],
]
state.selectedElement?.setData(undefined)
Hash.hash.setData(poi.osm_type + "/" + poi.osm_id)
state.leafletMap.data.fitBounds(bounds)
placeholder.setData(Translations.t.general.search.search)
} catch (e) {
searchField.GetValue().setData("")
placeholder.setData(Translations.t.general.search.error)
}
}
searchField.enterPressed.addCallback(runSearch)
this._searchField = searchField
goButton.onClick(runSearch)
}
focus() {
this._searchField.focus()
}
}

2
UI/BigComponents/SelectedElementView.svelte
View file

@ -32,7 +32,7 @@
{#if _tags._deleted === "yes"}
<Tr t={ Translations.t.delete.isDeleted}/>
{:else}
<div class="absolute flex flex-col h-full normal-background">
<div class="absolute flex flex-col h-full w-full normal-background">
<div class="flex border-b-2 border-black shadow justify-between items-center">
<div class="flex flex-col">

2
UI/Popup/AllTagsPanel.svelte
View file

@ -57,7 +57,7 @@
onDestroy(allTags.addCallbackAndRunD(allTags => {
_allTags = allTags;
}));
const tagsTable = new Table(["Key", "Value"], _allTags).SetClass("zebra-table");
const tagsTable = new Table(["Key", "Value"], _allTags).SetClass("zebra-table break-all");
</script>
<section>

2
UI/ThemeViewGUI.svelte
View file

@ -134,7 +134,7 @@
<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
<ModalRight on:close={() => {selectedElement.setData(undefined)}}>
<ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
<ToSvelte construct={new VariableUiElement(selectedViewElement).SetClass("w-full h-full")}></ToSvelte>
</ModalRight>
</If>

42
css/index-tailwind-output.css
View file

@ -1171,10 +1171,6 @@ video {
flex-shrink: 0;
}
.flex-grow {
flex-grow: 1;
}
.grow {
flex-grow: 1;
}
@ -1301,12 +1297,6 @@ video {
row-gap: 0.25rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.self-end {
align-self: flex-end;
}
@ -1323,8 +1313,8 @@ video {
overflow: hidden;
}
.overflow-scroll {
overflow: scroll;
.overflow-y-auto {
overflow-y: auto;
}
.truncate {
@ -1374,10 +1364,6 @@ video {
border-radius: 0.375rem;
}
.rounded-2xl {
border-radius: 1rem;
}
.rounded-sm {
border-radius: 0.125rem;
}
@ -1407,8 +1393,8 @@ video {
border-bottom-width: 1px;
}
.border-solid {
border-style: solid;
.border-b-2 {
border-bottom-width: 2px;
}
.border-dashed {
@ -1600,14 +1586,14 @@ video {
padding-left: 0.75rem;
}
.pl-1 {
padding-left: 0.25rem;
}
.pr-0 {
padding-right: 0px;
}
.pl-1 {
padding-left: 0.25rem;
}
.pr-1 {
padding-right: 0.25rem;
}
@ -1773,6 +1759,12 @@ video {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow-2xl {
--tw-drop-shadow: drop-shadow(0 25px 25px rgb(0 0 0 / 0.15));
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
--tw-grayscale: grayscale(100%);
-webkit-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@ -2128,7 +2120,7 @@ li::marker {
}
.shadow {
box-shadow: 0 0 10px var(--shadow-color);
box-shadow: 0 0 20px var(--shadow-color);
}
.title-font span {
@ -2378,10 +2370,6 @@ input {
max-width: 36rem;
}
.sm\:flex-row {
flex-direction: row;
}
.sm\:items-stretch {
align-items: stretch;
}

2
index.css
View file

@ -344,7 +344,7 @@ li::marker {
}
.shadow {
box-shadow: 0 0 10px var(--shadow-color);
box-shadow: 0 0 20px var(--shadow-color);
}
.title-font span {

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "mapcomplete",
"version": "0.30.2",
"version": "0.30.3",
"repository": "https://github.com/pietervdvn/MapComplete",
"description": "A small website to edit OSM easily",
"bugs": "https://github.com/pietervdvn/MapComplete/issues",