Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Fix: style tweaks to link feature

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-09-16 02:50:01 +02:00
parent eb2a582d49
commit bd71645c04
3 changed files with 28 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

3
langs/en.json
View file

@ -407,7 +407,8 @@
"isDeleted": "Deleted", "isDeleted": "Deleted",
"nearby": { "nearby": {
"link": "This picture shows the object", "link": "This picture shows the object",
"seeNearby": "Browse and link nearby pictures" "seeNearby": "Browse and link nearby pictures",
"title": "Nearby streetview imagery"
}, },
"pleaseLogin": "Please log in to add a picture", "pleaseLogin": "Please log in to add a picture",
"respectPrivacy": "Do not photograph people nor license plates. Do not upload Google Maps, Google Streetview or other copyrighted sources.", "respectPrivacy": "Do not photograph people nor license plates. Do not upload Google Maps, Google Streetview or other copyrighted sources.",

29
src/UI/Popup/NearbyImages.svelte
View file

@ -11,6 +11,8 @@ import type { Feature } from "geojson";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"; import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import Loading from "../Base/Loading.svelte"; import Loading from "../Base/Loading.svelte";
import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"; import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders";
import Tr from "../Base/Tr.svelte";
import Translations from "../i18n/Translations";
export let tags: Store<OsmTags>; export let tags: Store<OsmTags>;
export let state: SpecialVisualizationState; export let state: SpecialVisualizationState;
@ -30,12 +32,23 @@ let images: Store<P4CPicture[]> = imagesProvider.store.map(images => images.slic
</script> </script>
{#if $images.length === 0} <div class="interactive rounded-2xl border-interactive p-2">
<Loading /> <div class="flex justify-between">
{:else}
<div class="py-2 interactive overflow-x-auto w-full flex space-x-1"> <h4>
{#each $images as image (image.pictureUrl)} <Tr t={Translations.t.image.nearby.title} />
<LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} /> </h4>
{/each} <slot name="corner" />
</div> </div>
{/if} {#if $images.length === 0}
<Loading />
{:else}
<div class="overflow-x-auto w-full flex space-x-1" style="scroll-snap-type: x proximity">
{#each $images as image (image.pictureUrl)}
<span class="w-fit shrink-0" style="scroll-snap-align: start">
<LinkableImage {tags} {image} {state} {lon} {lat} {feature} {layer} {linkable} />
</span>
{/each}
</div>
{/if}
</div>

6
src/UI/Popup/NearbyImagesCollapsed.svelte
View file

@ -9,6 +9,8 @@
import NearbyImages from "./NearbyImages.svelte"; import NearbyImages from "./NearbyImages.svelte";
import Svg from "../../Svg"; import Svg from "../../Svg";
import ToSvelte from "../Base/ToSvelte.svelte"; import ToSvelte from "../Base/ToSvelte.svelte";
import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
import exp from "constants";
export let tags: Store<OsmTags>; export let tags: Store<OsmTags>;
export let state: SpecialVisualizationState; export let state: SpecialVisualizationState;
@ -24,7 +26,9 @@
</script> </script>
{#if expanded} {#if expanded}
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}/> <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
<XCircleIcon slot="corner" class="w-6 h-6 cursor-pointer" on:click={() => {expanded = false}}/>
</NearbyImages>
{:else} {:else}
<button class="w-full flex items-center" on:click={() => { expanded = true; }}> <button class="w-full flex items-center" on:click={() => { expanded = true; }}>
<ToSvelte construct={ Svg.camera_plus_svg().SetClass("block w-8 h-8 p-1 mr-2 ")}/> <ToSvelte construct={ Svg.camera_plus_svg().SetClass("block w-8 h-8 p-1 mr-2 ")}/>