midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX: only load magnifying button when image is loaded

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-29 23:12:25 +02:00
parent df40dbbff1
commit 9a194c69f0
1 changed files with 3 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/UI/Image/AttributedImage.svelte
View file

@ -19,12 +19,14 @@
export let previewedImage: UIEventSource<ProvidedImage> = undefined export let previewedImage: UIEventSource<ProvidedImage> = undefined
export let attributionFormat: "minimal" | "medium" | "large" = "medium" 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! let canZoom = previewedImage !== undefined // We check if there is a SOURCE, not if there is data in it!
let loaded = false
</script> </script>
<div class="relative shrink-0"> <div class="relative shrink-0">
<div class="relative w-fit"> <div class="relative w-fit">
<img <img
bind:this={imgEl} bind:this={imgEl}
on:load={() => loaded = true}
class={imgClass ?? ""} class={imgClass ?? ""}
class:cursor-zoom-in={previewedImage !== undefined} class:cursor-zoom-in={previewedImage !== undefined}
on:click={() => { on:click={() => {
@ -38,7 +40,7 @@
src={image.url} src={image.url}
/> />
{#if canZoom} {#if canZoom && loaded}
<div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full"> <div class="absolute right-0 top-0 bg-black-transparent rounded-bl-full">
<MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" /> <MagnifyingGlassPlusIcon class="w-8 h-8 pl-3 pb-3 cursor-zoom-in" color="white" />
</div> </div>