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

UX: do not show nearby features box if there are none

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-30 01:41:41 +01:00
parent e7c2bd54f7
commit 8e73369308
1 changed files with 76 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

152
src/UI/ThemeViewGUI.svelte
View file

@ -66,71 +66,70 @@
import OpenJosm from "./Base/OpenJosm.svelte" import OpenJosm from "./Base/OpenJosm.svelte"
export let state: ThemeViewState export let state: ThemeViewState
let layout = state.layout let layout = state.layout
let maplibremap: UIEventSource<MlMap> = state.map let maplibremap: UIEventSource<MlMap> = state.map
let selectedElement: UIEventSource<Feature> = state.selectedElement let selectedElement: UIEventSource<Feature> = state.selectedElement
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer
let currentZoom = state.mapProperties.zoom let currentZoom = state.mapProperties.zoom
let showCrosshair = state.userRelatedState.showCrosshair let showCrosshair = state.userRelatedState.showCrosshair
let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation let arrowKeysWereUsed = state.mapProperties.lastKeyNavigation
let centerFeatures = state.closestFeatures.features let centerFeatures = state.closestFeatures.features
$: console.log("Centerfeatures are", $centerFeatures) const selectedElementView = selectedElement.map(
const selectedElementView = selectedElement.map( (selectedElement) => {
(selectedElement) => { // Svelte doesn't properly reload some of the legacy UI-elements
// Svelte doesn't properly reload some of the legacy UI-elements // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick const layer = selectedLayer.data
const layer = selectedLayer.data if (selectedElement === undefined || layer === undefined) {
if (selectedElement === undefined || layer === undefined) { return undefined
return undefined }
}
if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) { if (!(layer.tagRenderings?.length > 0) || layer.title === undefined) {
return undefined return undefined
} }
const tags = state.featureProperties.getStore(selectedElement.properties.id) const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementView, { return new SvelteUIElement(SelectedElementView, {
state, state,
layer, layer,
selectedElement, selectedElement,
tags, tags,
}).SetClass("h-full w-full") }).SetClass("h-full w-full")
}, },
[selectedLayer] [selectedLayer],
) )
const selectedElementTitle = selectedElement.map( const selectedElementTitle = selectedElement.map(
(selectedElement) => { (selectedElement) => {
// Svelte doesn't properly reload some of the legacy UI-elements // Svelte doesn't properly reload some of the legacy UI-elements
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected // As such, we _reconstruct_ the selectedElementView every time a new feature is selected
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick // This is a bit wasteful, but until everything is a svelte-component, this should do the trick
const layer = selectedLayer.data const layer = selectedLayer.data
if (selectedElement === undefined || layer === undefined) { if (selectedElement === undefined || layer === undefined) {
return undefined return undefined
} }
const tags = state.featureProperties.getStore(selectedElement.properties.id) const tags = state.featureProperties.getStore(selectedElement.properties.id)
return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags }) return new SvelteUIElement(SelectedElementTitle, { state, layer, selectedElement, tags })
}, },
[selectedLayer] [selectedLayer],
) )
let mapproperties: MapProperties = state.mapProperties let mapproperties: MapProperties = state.mapProperties
let featureSwitches: FeatureSwitchState = state.featureSwitches let featureSwitches: FeatureSwitchState = state.featureSwitches
let availableLayers = state.availableLayers let availableLayers = state.availableLayers
let userdetails = state.osmConnection.userDetails let userdetails = state.osmConnection.userDetails
let currentViewLayer = layout.layers.find((l) => l.id === "current_view") let currentViewLayer = layout.layers.find((l) => l.id === "current_view")
let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer let rasterLayer: Store<RasterLayerPolygon> = state.mapProperties.rasterLayer
let rasterLayerName = let rasterLayerName =
rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name rasterLayer.data?.properties?.name ?? AvailableRasterLayers.maptilerDefaultLayer.properties.name
onDestroy( onDestroy(
rasterLayer.addCallbackAndRunD((l) => { rasterLayer.addCallbackAndRunD((l) => {
rasterLayerName = l.properties.name rasterLayerName = l.properties.name
}) }),
) )
</script> </script>
<div class="absolute top-0 left-0 h-screen w-screen overflow-hidden"> <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
@ -214,7 +213,7 @@
<!-- bottom left elements --> <!-- bottom left elements -->
<If condition={state.featureSwitches.featureSwitchFilter}> <If condition={state.featureSwitches.featureSwitchFilter}>
<MapControlButton on:click={() => state.guistate.openFilterView()}> <MapControlButton on:click={() => state.guistate.openFilterView()}>
<Filter class="h-6 w-6"/> <Filter class="h-6 w-6" />
</MapControlButton> </MapControlButton>
</If> </If>
<If condition={state.featureSwitches.featureSwitchBackgroundSelection}> <If condition={state.featureSwitches.featureSwitchBackgroundSelection}>
@ -231,16 +230,17 @@
</a> </a>
</div> </div>
</div> </div>
{#if $arrowKeysWereUsed !== undefined} {#if $arrowKeysWereUsed !== undefined}
<div class="interactive pointer-events-auto p-1"> {#if $centerFeatures.length > 0}
{#each $centerFeatures as feat, i (feat.properties.id)} <div class="interactive pointer-events-auto p-1">
<div class="flex"> {#each $centerFeatures as feat, i (feat.properties.id)}
<b>{i + 1}.</b> <div class="flex">
<Summary {state} feature={feat} /> <b>{i + 1}.</b>
</div> <Summary {state} feature={feat} />
{/each} </div>
</div> {/each}
</div>
{/if}
{/if} {/if}
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
<!-- bottom right elements --> <!-- bottom right elements -->
@ -257,7 +257,7 @@
<Plus class="w-8 h-8" /> <Plus class="w-8 h-8" />
</MapControlButton> </MapControlButton>
<MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}> <MapControlButton on:click={() => mapproperties.zoom.update((z) => z - 1)}>
<Min class="w-8 h-8"/> <Min class="w-8 h-8" />
</MapControlButton> </MapControlButton>
<If condition={featureSwitches.featureSwitchGeolocation}> <If condition={featureSwitches.featureSwitchGeolocation}>
<MapControlButton> <MapControlButton>
@ -350,7 +350,7 @@
</div> </div>
<div class="flex" slot="title1"> <div class="flex" slot="title1">
<Filter class="w-4 h-4"/> <Filter class="w-4 h-4" />
<Tr t={Translations.t.general.menu.filter} /> <Tr t={Translations.t.general.menu.filter} />
</div> </div>
@ -374,7 +374,7 @@
<div class="flex" slot="title2"> <div class="flex" slot="title2">
<If condition={state.featureSwitches.featureSwitchEnableExport}> <If condition={state.featureSwitches.featureSwitchEnableExport}>
<Download class="w-4 h-4"/> <Download class="w-4 h-4" />
<Tr t={Translations.t.general.download.title} /> <Tr t={Translations.t.general.download.title} />
</If> </If>
</div> </div>
@ -389,7 +389,7 @@
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" /> <ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
<div class="flex" slot="title4"> <div class="flex" slot="title4">
<Share class="w-4 h-4"/> <Share class="w-4 h-4" />
<Tr t={Translations.t.general.sharescreen.title} /> <Tr t={Translations.t.general.sharescreen.title} />
</div> </div>
<div class="m-2" slot="content4"> <div class="m-2" slot="content4">
@ -441,12 +441,12 @@
<Tr t={Translations.t.general.aboutMapComplete.intro} /> <Tr t={Translations.t.general.aboutMapComplete.intro} />
<a class="flex" href={Utils.HomepageLink()}> <a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6"/> <Add class="h-6 w-6" />
<Tr t={Translations.t.general.backToIndex} /> <Tr t={Translations.t.general.backToIndex} />
</a> </a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank"> <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<Bug class="h-6 w-6"/> <Bug class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} /> <Tr t={Translations.t.general.attribution.openIssueTracker} />
</a> </a>
@ -495,7 +495,7 @@
</div> </div>
<div class="flex" slot="title2"> <div class="flex" slot="title2">
<Community class="w-6 h-6"/> <Community class="w-6 h-6" />
<Tr t={Translations.t.communityIndex.title} /> <Tr t={Translations.t.communityIndex.title} />
</div> </div>
<div class="m-2" slot="content2"> <div class="m-2" slot="content2">
@ -513,7 +513,7 @@
<div class="m-2 flex flex-col" slot="content4"> <div class="m-2 flex flex-col" slot="content4">
<If condition={featureSwitches.featureSwitchEnableLogin}> <If condition={featureSwitches.featureSwitchEnableLogin}>
<OpenIdEditor mapProperties={state.mapProperties} /> <OpenIdEditor mapProperties={state.mapProperties} />
<OpenJosm {state}/> <OpenJosm {state} />
<MapillaryLink mapProperties={state.mapProperties} /> <MapillaryLink mapProperties={state.mapProperties} />
</If> </If>