From 2580a67e1f6e59787d0f71d023d8126f43499d25 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Sat, 16 Dec 2023 01:39:10 +0100
Subject: [PATCH] UX: improve styling of image attribution

---
 public/css/index-tailwind-output.css | 49 +++++++++++++++++++---------
 src/UI/Image/AttributedImage.svelte  |  6 +++-
 src/UI/Image/ImageAttribution.svelte |  2 +-
 src/UI/Image/ImageCarousel.ts        | 17 +++++++---
 4 files changed, 51 insertions(+), 23 deletions(-)

diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css
index 1e3f381c1..1092273a2 100644
--- a/public/css/index-tailwind-output.css
+++ b/public/css/index-tailwind-output.css
@@ -729,6 +729,14 @@ video {
   bottom: 0px;
 }
 
+.top-1\/2 {
+  top: 50%;
+}
+
+.left-1\/2 {
+  left: 50%;
+}
+
 .right-4 {
   right: 1rem;
 }
@@ -1114,6 +1122,14 @@ video {
   height: 4rem;
 }
 
+.h-0 {
+  height: 0px;
+}
+
+.h-5 {
+  height: 1.25rem;
+}
+
 .h-4 {
   height: 1rem;
 }
@@ -1134,10 +1150,6 @@ video {
   height: 2.75rem;
 }
 
-.h-5 {
-  height: 1.25rem;
-}
-
 .h-48 {
   height: 12rem;
 }
@@ -1224,14 +1236,18 @@ video {
   width: 6rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-0 {
   width: 0px;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .w-3 {
   width: 0.75rem;
 }
@@ -1256,10 +1272,6 @@ video {
   width: auto;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
 .w-10 {
   width: 2.5rem;
 }
@@ -1733,6 +1745,11 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+}
+
 .bg-white\/50 {
   background-color: rgb(255 255 255 / 0.5);
 }
@@ -1782,14 +1799,14 @@ video {
   padding: 0.25rem;
 }
 
-.p-0 {
-  padding: 0px;
-}
-
 .p-0\.5 {
   padding: 0.125rem;
 }
 
+.p-0 {
+  padding: 0px;
+}
+
 .p-12 {
   padding: 3rem;
 }
diff --git a/src/UI/Image/AttributedImage.svelte b/src/UI/Image/AttributedImage.svelte
index 672997a0e..42049ca9f 100644
--- a/src/UI/Image/AttributedImage.svelte
+++ b/src/UI/Image/AttributedImage.svelte
@@ -5,6 +5,7 @@
     import ImageAttribution from "./ImageAttribution.svelte"
     import type { ProvidedImage } from "../../Logic/ImageProviders/ImageProvider"
     import { Mapillary } from "../../Logic/ImageProviders/Mapillary"
+    import { UIEventSource } from "../../Logic/UIEventSource"
 
     export let image: ProvidedImage
     let fallbackImage: string = undefined
@@ -14,11 +15,14 @@
 
     let imgEl: HTMLImageElement
     export let imgClass: string = undefined
+    export let previewedImage: UIEventSource<string>  = undefined
 </script>
 
 
 <div class="relative">
-  <img bind:this={imgEl} src={image.url} class={imgClass ?? ""} on:error={(event) => {
+  <img bind:this={imgEl} src={image.url} class={imgClass ?? ""} 
+       on:click={() => {previewedImage?.setData(image)}}
+       on:error={(event) => {
     if(fallbackImage){
       imgEl.src = fallbackImage
     }
diff --git a/src/UI/Image/ImageAttribution.svelte b/src/UI/Image/ImageAttribution.svelte
index 0fad16aff..54601e19b 100644
--- a/src/UI/Image/ImageAttribution.svelte
+++ b/src/UI/Image/ImageAttribution.svelte
@@ -34,7 +34,7 @@
 
       {#if $license.artist}
         <div class="font-bold">
-          {$license.artist}
+          {@html $license.artist}
         </div>
       {/if}
 
diff --git a/src/UI/Image/ImageCarousel.ts b/src/UI/Image/ImageCarousel.ts
index 0b6f43d98..578a9ca6f 100644
--- a/src/UI/Image/ImageCarousel.ts
+++ b/src/UI/Image/ImageCarousel.ts
@@ -14,17 +14,25 @@ import AttributedImage from "./AttributedImage.svelte"
 
 export class ImageCarousel extends Toggle {
     constructor(
-        images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
+        images: Store<{ id: string; key: string; url: string; provider: ImageProvider }[]>,
         tags: Store<any>,
-        state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig, previewedImage?: UIEventSource<ProvidedImage> },
+        state: {
+            osmConnection?: OsmConnection
+            changes?: Changes
+            layout: LayoutConfig
+            previewedImage?: UIEventSource<ProvidedImage>
+        },
         feature: Feature
     ) {
         const uiElements = images.map(
-            (imageURLS: { key: string; url: string; provider: ImageProvider, id: string }[]) => {
+            (imageURLS: { key: string; url: string; provider: ImageProvider; id: string }[]) => {
                 const uiElements: BaseUIElement[] = []
                 for (const url of imageURLS) {
                     try {
-                        let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url})
+                        let image: BaseUIElement = new SvelteUIElement(AttributedImage, {
+                            image: url,
+                            previewedImage: state.previewedImage,
+                        })
 
                         if (url.key !== undefined) {
                             image = new Combine([
@@ -37,7 +45,6 @@ export class ImageCarousel extends Toggle {
                         image
                             .SetClass("w-full block")
                             .SetStyle("min-width: 50px; background: grey;")
-                            .onClick(() => state.previewedImage.setData(url))
                         uiElements.push(image)
                     } catch (e) {
                         console.error("Could not generate image element for", url.url, "due to", e)