Merge master

src/UI/Image/ImageAttribution.svelte

@@ -10,7 +10,7 @@
    */
   export let image: ProvidedImage
   let license: Store<LicenseInfo> = UIEventSource.FromPromise(
-    image.provider?.DownloadAttribution(image.url)
+    image.provider?.DownloadAttribution(image)
   )
   let icon = image.provider?.SourceIcon(image.id)?.SetClass("block h-8 w-8 pr-2")
 </script>
@@ -38,26 +38,28 @@
         </div>
       {/if}
 
-      <div class="flex justify-between">
+      <div class="flex justify-between w-full gap-x-1">
         {#if $license.license !== undefined || $license.licenseShortName !== undefined}
           <div>
             {$license?.license ?? $license?.licenseShortName}
           </div>
         {/if}
 
-        {#if $license.date}
-          <div>
-            {$license.date.toLocaleDateString()}
+        {#if $license.views}
+          <div class="flex justify-around self-center">
+            <EyeIcon class="h-4 w-4 pr-1" />
+            {$license.views}
           </div>
         {/if}
       </div>
 
-      {#if $license.views}
-        <div class="flex justify-around self-center">
-          <EyeIcon class="h-4 w-4 pr-1" />
-          {$license.views}
+      {#if $license.date}
+        <div>
+          {$license.date.toLocaleDateString()}
         </div>
       {/if}
+
+
     </div>
   </div>
 {/if}

src/UI/Image/UploadFailedMessage.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+
+  import Tr from "../Base/Tr.svelte"
+  import Translations from "../i18n/Translations"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+
+  export let failed: number
+  const t = Translations.t.image
+
+</script>
+<div class="alert flex">
+
+  <div class="flex flex-col items-start">
+    {#if failed === 1}
+      <Tr t={t.upload.one.failed} />
+    {:else}
+      <Tr t={t.upload.multiple.someFailed.Subs({ count: failed })} />
+    {/if}
+    <Tr cls="text-normal" t={t.upload.failReasons} />
+    <Tr cls="text-xs" t={t.upload.failReasonsAdvanced} />
+  </div>
+  <button
+    class="mt-2 h-fit shrink-0 rounded-full border-none p-0 pointer-events-auto"
+    on:click
+    style="border: 0 !important; padding: 0 !important;"
+  >
+    <XCircleIcon aria-hidden={true} class="h-8 w-8" />
+  </button>
+</div>

src/UI/Image/UploadingImageCounter.svelte

@@ -11,6 +11,8 @@
   import Translations from "../i18n/Translations"
   import Tr from "../Base/Tr.svelte"
   import Loading from "../Base/Loading.svelte"
+  import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
+  import UploadFailedMessage from "./UploadFailedMessage.svelte"
 
   export let state: SpecialVisualizationState
   export let tags: Store<OsmTags> = undefined
@@ -22,31 +24,40 @@
   const { uploadStarted, uploadFinished, retried, failed } =
     state.imageUploadManager.getCountsFor(featureId)
   const t = Translations.t.image
+  const debugging = state.featureSwitches.featureSwitchIsDebugging
+  let dismissed = 0
 </script>
 
-{#if $uploadStarted === 1}
+{#if $debugging}
+  <div class="low-interaction">Started {$uploadStarted} Done {$uploadFinished} Retry {$retried} Err {$failed}</div>
+{/if}
+{#if dismissed === $uploadStarted}
+  <!-- We don't show anything as we ignore this number of failed items-->
+{:else if $uploadStarted === 1}
   {#if $uploadFinished === 1}
     {#if showThankYou}
       <Tr cls="thanks" t={t.upload.one.done} />
     {/if}
   {:else if $failed === 1}
-    <div class="alert flex flex-col">
-      <Tr cls="self-center" t={t.upload.one.failed} />
-      <Tr t={t.upload.failReasons} />
-      <Tr t={t.upload.failReasonsAdvanced} />
-    </div>
+    <UploadFailedMessage failed={$failed} on:click={() => dismissed = $failed}/>
   {:else if $retried === 1}
-    <Loading cls="alert">
+    <div class="alert">
+    <Loading>
       <Tr t={t.upload.one.retrying} />
     </Loading>
+    </div>
   {:else}
-    <Loading cls="alert">
+    <div class="alert">
+    <Loading>
       <Tr t={t.upload.one.uploading} />
     </Loading>
+    </div>
   {/if}
 {:else if $uploadStarted > 1}
-  {#if $uploadFinished + $failed === $uploadStarted && $uploadFinished > 0}
-    {#if showThankYou}
+  {#if $uploadFinished + $failed === $uploadStarted}
+    {#if $uploadFinished === 0}
+      <!-- pass -->
+    {:else if showThankYou}
       <Tr cls="thanks" t={t.upload.multiple.done.Subs({ count: $uploadFinished })} />
     {/if}
   {:else if $uploadFinished === 0}
@@ -64,14 +75,7 @@
     </Loading>
   {/if}
   {#if $failed > 0}
-    <div class="alert flex flex-col">
-      {#if $failed === 1}
-        <Tr cls="self-center" t={t.upload.one.failed} />
-      {:else}
-        <Tr cls="self-center" t={t.upload.multiple.someFailed.Subs({ count: $failed })} />
-      {/if}
-      <Tr t={t.upload.failReasons} />
-      <Tr t={t.upload.failReasonsAdvanced} />
-    </div>
+    
+   <UploadFailedMessage failed={$failed} on:click={() => dismissed = $failed}/>
   {/if}
 {/if}