From 8465b59c7f4ece18b830899e9cc7b680ae100c13 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 28 Aug 2024 15:07:18 +0200 Subject: [PATCH] UX: improve attribution display, add magnifying class --- langs/en.json | 1 + public/css/index-tailwind-output.css | 32 +++++++------ src/UI/Image/AttributedImage.svelte | 29 ++++++++---- src/UI/Image/ImageAttribution.svelte | 67 +++++++++++++++++----------- src/UI/Image/ImageOperations.svelte | 4 +- src/UI/Image/LinkableImage.svelte | 26 ++++++----- src/UI/Image/NearbyImages.svelte | 2 +- 7 files changed, 97 insertions(+), 64 deletions(-) diff --git a/langs/en.json b/langs/en.json index 23b50736e..c37154f37 100644 --- a/langs/en.json +++ b/langs/en.json @@ -193,6 +193,7 @@ }, "josmNotOpened": "JOSM could not be reached. Make sure it is opened and remote control is enabled", "josmOpened": "JOSM is opened", + "madeBy": "Mady by {author}", "mapContributionsBy": "The current visible data has edits made by {contributors}", "mapContributionsByAndHidden": "The current visible data has edits made by {contributors} and {hiddenCount} more contributors", "mapDataByOsm": "Map data: OpenStreetMap", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index a17c7a81a..d31b30538 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -2073,6 +2073,12 @@ video { margin-bottom: calc(0px * var(--tw-space-y-reverse)); } +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} + .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); @@ -2097,12 +2103,6 @@ video { margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse))); } -.space-x-4 > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} - .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); @@ -2431,6 +2431,10 @@ video { border-top-right-radius: 0.25rem; } +.rounded-bl-full { + border-bottom-left-radius: 9999px; +} + .rounded-tl { border-top-left-radius: 0.25rem; } @@ -3454,6 +3458,14 @@ video { padding-top: 0px; } +.pl-3 { + padding-left: 0.75rem; +} + +.pb-3 { + padding-bottom: 0.75rem; +} + .pl-4 { padding-left: 1rem; } @@ -3462,14 +3474,6 @@ video { padding-right: 1rem; } -.pl-3 { - padding-left: 0.75rem; -} - -.pr-3 { - padding-right: 0.75rem; -} - .pl-1 { padding-left: 0.25rem; } diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte index 5c64ccfdc..c95b45d2b 100644 --- a/src/UI/Image/AttributedImage.svelte +++ b/src/UI/Image/AttributedImage.svelte @@ -6,6 +6,7 @@ import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider" import { Mapillary } from "../../Logic/ImageProviders/Mapillary" import { UIEventSource } from "../../Logic/UIEventSource" + import { MagnifyingGlassPlusIcon } from "@babeard/svelte-heroicons/outline" export let image: Partial let fallbackImage: string = undefined @@ -16,25 +17,35 @@ let imgEl: HTMLImageElement export let imgClass: string = undefined export let previewedImage: UIEventSource = undefined + export let attributionFormat: "minimal" | "medium" | "large" = "medium" + let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
- { +
+ { previewedImage?.setData(image) }} - on:error={() => { + on:error={() => { if (fallbackImage) { imgEl.src = fallbackImage } }} - src={image.url} - /> + src={image.url} + /> + {#if canZoom} +
+ +
+ {/if} + +
- +
diff --git a/src/UI/Image/ImageAttribution.svelte b/src/UI/Image/ImageAttribution.svelte index b62ce1baf..cd7c9847a 100644 --- a/src/UI/Image/ImageAttribution.svelte +++ b/src/UI/Image/ImageAttribution.svelte @@ -4,11 +4,15 @@ import { Store, UIEventSource } from "../../Logic/UIEventSource" import ToSvelte from "../Base/ToSvelte.svelte" import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid" + import Tr from "../Base/Tr.svelte" + import Translations from "../i18n/Translations" /** * A small element showing the attribution of a single image */ export let image: Partial & { id: string; url: string } + export let attributionFormat: "minimal" | "medium" | "large" = "medium" + let license: Store = UIEventSource.FromPromise( image.provider?.DownloadAttribution(image) ) @@ -16,50 +20,59 @@ {#if $license !== undefined} -
+
{#if icon !== undefined}
{/if} -
- {#if $license.title} - {#if $license.informationLocation} - - {$license.title} - - {:else} - $license.title +
+ {#if attributionFormat !== "minimal" } + {#if $license.title} + {#if $license.informationLocation} + + {$license.title} + + {:else} + $license.title + {/if} {/if} {/if} {#if $license.artist} -
- {@html $license.artist} -
+ {#if attributionFormat === "large"} + + {:else} +
+ {@html $license.artist} +
+ {/if} {/if} -
- {#if $license.license !== undefined || $license.licenseShortName !== undefined} -
- {$license?.license ?? $license?.licenseShortName} -
- {/if} - - {#if $license.views} -
- - {$license.views} -
- {/if} -
- {#if $license.date}
{$license.date.toLocaleDateString()}
{/if} + + {#if attributionFormat !== "minimal"} +
+ {#if ($license.license !== undefined || $license.licenseShortName !== undefined)} +
+ {$license?.license ?? $license?.licenseShortName} +
+ {/if} + + {#if $license.views} +
+ + {$license.views} +
+ {/if} +
+ {/if} +
{/if} diff --git a/src/UI/Image/ImageOperations.svelte b/src/UI/Image/ImageOperations.svelte index 0152e9cf5..7d131e2e0 100644 --- a/src/UI/Image/ImageOperations.svelte +++ b/src/UI/Image/ImageOperations.svelte @@ -38,9 +38,9 @@ class="pointer-events-none absolute bottom-0 left-0 flex w-full flex-wrap items-end justify-between" >
- +