From 4e1384c2dff095b9a5dbcbd9e515ce5a614ddcc2 Mon Sep 17 00:00:00 2001
From: Pieter Vander Vennet <pietervdvn@posteo.net>
Date: Mon, 4 Dec 2023 15:02:42 +0100
Subject: [PATCH] UX: move some items behind login-toggles, add a 'login to add
 pictures' button again (fix #1698)

---
 src/UI/Image/UploadImage.svelte             |  81 +++++-----
 src/UI/Popup/DeleteFlow/DeleteWizard.svelte | 164 ++++++++++----------
 src/UI/Popup/NearbyImages.svelte            | 106 ++++++-------
 src/UI/Popup/NearbyImagesCollapsed.svelte   |   5 +-
 4 files changed, 182 insertions(+), 174 deletions(-)

diff --git a/src/UI/Image/UploadImage.svelte b/src/UI/Image/UploadImage.svelte
index 80ae2ee0f..eda00468b 100644
--- a/src/UI/Image/UploadImage.svelte
+++ b/src/UI/Image/UploadImage.svelte
@@ -1,50 +1,53 @@
 <script lang="ts">
-  /**
-   * Shows an 'upload'-button which will start the upload for this feature
-   */
+    /**
+     * Shows an 'upload'-button which will start the upload for this feature
+     */
 
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import { ImmutableStore, Store } from "../../Logic/UIEventSource"
-  import type { OsmTags } from "../../Models/OsmFeature"
-  import LoginToggle from "../Base/LoginToggle.svelte"
-  import Translations from "../i18n/Translations"
-  import Tr from "../Base/Tr.svelte"
-  import UploadingImageCounter from "./UploadingImageCounter.svelte"
-  import FileSelector from "../Base/FileSelector.svelte"
-  import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import { ImmutableStore, Store } from "../../Logic/UIEventSource"
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import LoginToggle from "../Base/LoginToggle.svelte"
+    import Translations from "../i18n/Translations"
+    import Tr from "../Base/Tr.svelte"
+    import UploadingImageCounter from "./UploadingImageCounter.svelte"
+    import FileSelector from "../Base/FileSelector.svelte"
+    import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+    import LoginButton from "../Base/LoginButton.svelte"
 
-  export let state: SpecialVisualizationState
+    export let state: SpecialVisualizationState
 
-  export let tags: Store<OsmTags>
-  export let targetKey: string = undefined
-  /**
-   * Image to show in the button
-   * NOT the image to upload!
-   */
-  export let image: string = undefined
-  if (image === "") {
-    image = undefined
-  }
-  export let labelText: string = undefined
-  const t = Translations.t.image
-
-  let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
-
-  function handleFiles(files: FileList) {
-    for (let i = 0; i < files.length; i++) {
-      const file = files.item(i)
-      console.log("Got file", file.name)
-      try {
-        state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
-      } catch (e) {
-        alert(e)
-      }
+    export let tags: Store<OsmTags>
+    export let targetKey: string = undefined
+    /**
+     * Image to show in the button
+     * NOT the image to upload!
+     */
+    export let image: string = undefined
+    if (image === "") {
+        image = undefined
+    }
+    export let labelText: string = undefined
+    const t = Translations.t.image
+
+    let licenseStore = state?.userRelatedState?.imageLicense ?? new ImmutableStore("CC0")
+
+    function handleFiles(files: FileList) {
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i)
+            console.log("Got file", file.name)
+            try {
+                state?.imageUploadManager.uploadImageAndApply(file, tags, targetKey)
+            } catch (e) {
+                alert(e)
+            }
+        }
     }
-  }
 </script>
 
 <LoginToggle {state}>
-  <Tr slot="not-logged-in" t={t.pleaseLogin} />
+  <LoginButton slot="not-logged-in" clss="small w-full">
+    <Tr t={Translations.t.image.pleaseLogin} />
+  </LoginButton>
   <div class="flex flex-col">
     <UploadingImageCounter {state} {tags} />
     <FileSelector
diff --git a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte
index 3adfaacc9..287f77324 100644
--- a/src/UI/Popup/DeleteFlow/DeleteWizard.svelte
+++ b/src/UI/Popup/DeleteFlow/DeleteWizard.svelte
@@ -1,95 +1,95 @@
 <script lang="ts">
-  import LoginToggle from "../../Base/LoginToggle.svelte"
-  import type { SpecialVisualizationState } from "../../SpecialVisualization"
-  import Translations from "../../i18n/Translations"
-  import Tr from "../../Base/Tr.svelte"
-  import { TrashIcon } from "@babeard/svelte-heroicons/mini"
-  import type { OsmId, OsmTags } from "../../../Models/OsmFeature"
-  import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig"
-  import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte"
-  import type { Feature } from "geojson"
-  import { UIEventSource } from "../../../Logic/UIEventSource"
-  import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
-  import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
-  import { TagUtils } from "../../../Logic/Tags/TagUtils"
-  import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
-  import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
-  import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
-  import Loading from "../../Base/Loading.svelte"
-  import { DeleteFlowState } from "./DeleteFlowState"
-  import { twJoin } from "tailwind-merge"
+    import LoginToggle from "../../Base/LoginToggle.svelte"
+    import type { SpecialVisualizationState } from "../../SpecialVisualization"
+    import Translations from "../../i18n/Translations"
+    import Tr from "../../Base/Tr.svelte"
+    import { TrashIcon } from "@babeard/svelte-heroicons/mini"
+    import type { OsmId, OsmTags } from "../../../Models/OsmFeature"
+    import DeleteConfig from "../../../Models/ThemeConfig/DeleteConfig"
+    import TagRenderingQuestion from "../TagRendering/TagRenderingQuestion.svelte"
+    import type { Feature } from "geojson"
+    import { UIEventSource } from "../../../Logic/UIEventSource"
+    import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
+    import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
+    import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
+    import { TagUtils } from "../../../Logic/Tags/TagUtils"
+    import OsmChangeAction from "../../../Logic/Osm/Actions/OsmChangeAction"
+    import DeleteAction from "../../../Logic/Osm/Actions/DeleteAction"
+    import ChangeTagAction from "../../../Logic/Osm/Actions/ChangeTagAction"
+    import Loading from "../../Base/Loading.svelte"
+    import { DeleteFlowState } from "./DeleteFlowState"
+    import { twJoin } from "tailwind-merge"
 
-  export let state: SpecialVisualizationState
-  export let deleteConfig: DeleteConfig
+    export let state: SpecialVisualizationState
+    export let deleteConfig: DeleteConfig
 
-  export let tags: UIEventSource<OsmTags>
+    export let tags: UIEventSource<OsmTags>
 
-  let featureId: OsmId = <OsmId>tags.data.id
+    let featureId: OsmId = <OsmId>tags.data.id
 
-  export let feature: Feature
-  export let layer: LayerConfig
+    export let feature: Feature
+    export let layer: LayerConfig
 
-  const deleteAbility = new DeleteFlowState(featureId, state, deleteConfig.neededChangesets)
+    const deleteAbility = new DeleteFlowState(featureId, state, deleteConfig.neededChangesets)
 
-  const canBeDeleted: UIEventSource<boolean | undefined> = deleteAbility.canBeDeleted
-  const canBeDeletedReason = deleteAbility.canBeDeletedReason
+    const canBeDeleted: UIEventSource<boolean | undefined> = deleteAbility.canBeDeleted
+    const canBeDeletedReason = deleteAbility.canBeDeletedReason
 
-  const hasSoftDeletion = deleteConfig.softDeletionTags !== undefined
-  let currentState: "start" | "confirm" | "applying" | "deleted" = "start"
-  $: {
-    deleteAbility.CheckDeleteability(true)
-  }
-
-  const t = Translations.t.delete
-
-  let selectedTags: TagsFilter
-  let changedProperties = undefined
-  $: changedProperties = TagUtils.changeAsProperties(selectedTags?.asChange(tags?.data ?? {}) ?? [])
-  let isHardDelete = undefined
-  $: isHardDelete = changedProperties[DeleteConfig.deleteReasonKey] !== undefined
-
-  async function onDelete() {
-    if (selectedTags === undefined) {
-      return
-    }
-    currentState = "applying"
-    let actionToTake: OsmChangeAction
-    const changedProperties = TagUtils.changeAsProperties(selectedTags.asChange(tags?.data ?? {}))
-    const deleteReason = changedProperties[DeleteConfig.deleteReasonKey]
-    if (deleteReason) {
-      // This is a proper, hard deletion
-      actionToTake = new DeleteAction(
-        featureId,
-        deleteConfig.softDeletionTags,
-        {
-          theme: state?.layout?.id ?? "unknown",
-          specialMotivation: deleteReason,
-        },
-        canBeDeleted.data
-      )
-    } else {
-      // no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping
-      actionToTake = new ChangeTagAction(featureId, selectedTags, tags.data, {
-        theme: state?.layout?.id ?? "unkown",
-        changeType: "special-delete",
-      })
+    const hasSoftDeletion = deleteConfig.softDeletionTags !== undefined
+    let currentState: "start" | "confirm" | "applying" | "deleted" = "start"
+    $: {
+        deleteAbility.CheckDeleteability(true)
     }
 
-    await state.changes?.applyAction(actionToTake)
-    tags.data["_deleted"] = "yes"
-    tags.ping()
-    currentState = "deleted"
-  }
+    const t = Translations.t.delete
+
+    let selectedTags: TagsFilter
+    let changedProperties = undefined
+    $: changedProperties = TagUtils.changeAsProperties(selectedTags?.asChange(tags?.data ?? {}) ?? [])
+    let isHardDelete = undefined
+    $: isHardDelete = changedProperties[DeleteConfig.deleteReasonKey] !== undefined
+
+    async function onDelete() {
+        if (selectedTags === undefined) {
+            return
+        }
+        currentState = "applying"
+        let actionToTake: OsmChangeAction
+        const changedProperties = TagUtils.changeAsProperties(selectedTags.asChange(tags?.data ?? {}))
+        const deleteReason = changedProperties[DeleteConfig.deleteReasonKey]
+        if (deleteReason) {
+            // This is a proper, hard deletion
+            actionToTake = new DeleteAction(
+                featureId,
+                deleteConfig.softDeletionTags,
+                {
+                    theme: state?.layout?.id ?? "unknown",
+                    specialMotivation: deleteReason,
+                },
+                canBeDeleted.data,
+            )
+        } else {
+            // no _delete_reason is given, which implies that this is _not_ a deletion but merely a retagging via a nonDeleteMapping
+            actionToTake = new ChangeTagAction(featureId, selectedTags, tags.data, {
+                theme: state?.layout?.id ?? "unkown",
+                changeType: "special-delete",
+            })
+        }
+
+        await state.changes?.applyAction(actionToTake)
+        tags.data["_deleted"] = "yes"
+        tags.ping()
+        currentState = "deleted"
+    }
 </script>
+<LoginToggle ignoreLoading={true} {state}>
 
-{#if $canBeDeleted === false && !hasSoftDeletion}
-  <div class="low-interaction flex flex-col">
-    <Tr t={$canBeDeletedReason} />
-    <Tr cls="subtle" t={t.useSomethingElse} />
-  </div>
-{:else}
-  <LoginToggle ignoreLoading={true} {state}>
+  {#if $canBeDeleted === false && !hasSoftDeletion}
+    <div class="low-interaction flex flex-col">
+      <Tr t={$canBeDeletedReason} />
+      <Tr cls="subtle" t={t.useSomethingElse} />
+    </div>
+  {:else}
     {#if currentState === "start"}
       <button
         class="flex items-center"
@@ -158,5 +158,5 @@
         <Tr t={t.isDeleted} />
       </div>
     {/if}
-  </LoginToggle>
-{/if}
+  {/if}
+</LoginToggle>
diff --git a/src/UI/Popup/NearbyImages.svelte b/src/UI/Popup/NearbyImages.svelte
index 5f7192862..3fbb31ddb 100644
--- a/src/UI/Popup/NearbyImages.svelte
+++ b/src/UI/Popup/NearbyImages.svelte
@@ -1,61 +1,63 @@
 <script lang="ts">
-  /**
-   * Show nearby images which can be clicked
-   */
-  import type { OsmTags } from "../../Models/OsmFeature"
-  import { Store, UIEventSource } from "../../Logic/UIEventSource"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
-  import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
-  import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
-  import LinkableImage from "./LinkableImage.svelte"
-  import type { Feature } from "geojson"
-  import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
-  import Loading from "../Base/Loading.svelte"
-  import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
-  import Tr from "../Base/Tr.svelte"
-  import Translations from "../i18n/Translations"
+    /**
+     * Show nearby images which can be clicked
+     */
+    import type { OsmTags } from "../../Models/OsmFeature"
+    import { Store, UIEventSource } from "../../Logic/UIEventSource"
+    import type { SpecialVisualizationState } from "../SpecialVisualization"
+    import type { P4CPicture } from "../../Logic/Web/NearbyImagesSearch"
+    import NearbyImagesSearch from "../../Logic/Web/NearbyImagesSearch"
+    import LinkableImage from "./LinkableImage.svelte"
+    import type { Feature } from "geojson"
+    import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
+    import Loading from "../Base/Loading.svelte"
+    import AllImageProviders from "../../Logic/ImageProviders/AllImageProviders"
+    import Tr from "../Base/Tr.svelte"
+    import Translations from "../i18n/Translations"
+    import LoginToggle from "../Base/LoginToggle.svelte"
 
-  export let tags: Store<OsmTags>
-  export let state: SpecialVisualizationState
-  export let lon: number
-  export let lat: number
-  export let feature: Feature
+    export let tags: Store<OsmTags>
+    export let state: SpecialVisualizationState
+    export let lon: number
+    export let lat: number
+    export let feature: Feature
 
-  export let linkable: boolean = true
-  export let layer: LayerConfig
+    export let linkable: boolean = true
+    export let layer: LayerConfig
 
-  let imagesProvider = new NearbyImagesSearch(
-    {
-      lon,
-      lat,
-      allowSpherical: new UIEventSource<boolean>(false),
-      blacklist: AllImageProviders.LoadImagesFor(tags),
-    },
-    state.indexedFeatures
-  )
+    let imagesProvider = new NearbyImagesSearch(
+        {
+            lon,
+            lat,
+            allowSpherical: new UIEventSource<boolean>(false),
+            blacklist: AllImageProviders.LoadImagesFor(tags),
+        },
+        state.indexedFeatures,
+    )
 
-  let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
-  let allDone = imagesProvider.allDone
+    let images: Store<P4CPicture[]> = imagesProvider.store.map((images) => images.slice(0, 20))
+    let allDone = imagesProvider.allDone
 </script>
-
-<div class="interactive border-interactive rounded-2xl p-2">
-  <div class="flex justify-between">
-    <h4>
-      <Tr t={Translations.t.image.nearby.title} />
-    </h4>
-    <slot name="corner" />
-  </div>
-  {#if !$allDone}
-    <Loading />
-  {:else if $images.length === 0}
-    <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert"/>
-  {:else}
-    <div class="flex w-full space-x-1 overflow-x-auto" style="scroll-snap-type: x proximity">
-      {#each $images as image (image.pictureUrl)}
+<LoginToggle {state}>
+  <div class="interactive border-interactive rounded-2xl p-2">
+    <div class="flex justify-between">
+      <h4>
+        <Tr t={Translations.t.image.nearby.title} />
+      </h4>
+      <slot name="corner" />
+    </div>
+    {#if !$allDone}
+      <Loading />
+    {:else if $images.length === 0}
+      <Tr t={Translations.t.image.nearby.noNearbyImages} cls="alert" />
+    {:else}
+      <div class="flex w-full space-x-1 overflow-x-auto" 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>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</LoginToggle>
diff --git a/src/UI/Popup/NearbyImagesCollapsed.svelte b/src/UI/Popup/NearbyImagesCollapsed.svelte
index a8343e78c..a5337b723 100644
--- a/src/UI/Popup/NearbyImagesCollapsed.svelte
+++ b/src/UI/Popup/NearbyImagesCollapsed.svelte
@@ -12,6 +12,7 @@
   import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
   import exp from "constants"
   import Camera_plus from "../../assets/svg/Camera_plus.svelte"
+  import LoginToggle from "../Base/LoginToggle.svelte"
 
   export let tags: Store<OsmTags>
   export let state: SpecialVisualizationState
@@ -25,7 +26,8 @@
 
   let expanded = false
 </script>
-
+<LoginToggle {state}>
+  
 {#if expanded}
   <NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
     <XCircleIcon
@@ -47,3 +49,4 @@
     <Tr t={t.seeNearby} />
   </button>
 {/if}
+</LoginToggle>