UX: improve infobox for deleted items, fix #1632

langs/en.json

@@ -20,6 +20,7 @@
         "cancel": "Cancel",
         "cannotBeDeleted": "This feature can not be deleted",
         "delete": "Delete",
+        "deletedTitle": "Deleted feature",
         "explanations": {
             "hardDelete": "This feature will be deleted in OpenStreetMap. It can be recovered by an experienced contributor",
             "retagNoOtherThemes": "This feature will be reclassified and hidden from this application",

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -21,15 +21,17 @@
 
   let isTesting = state.featureSwitchIsTesting
   let isDebugging = state.featureSwitches.featureSwitchIsDebugging
-  
+
   let metatags: Store<Record<string, string>> = state.userRelatedState.preferencesAsTags
 </script>
 
-{#if $tags._deleted === "yes"}
+<div class="low-interaction flex border-b-2 border-black px-3 drop-shadow-md">
-  <Tr t={Translations.t.delete.isDeleted} />
+  <div class="h-fit w-full overflow-auto sm:p-2" style="max-height: 20vh;">
-{:else}
+    {#if $tags._deleted === "yes"}
-  <div class="low-interaction flex border-b-2 border-black px-3 drop-shadow-md">
+      <h3 class="p-4">
-    <div class="h-fit w-full overflow-auto sm:p-2" style="max-height: 20vh;">
+        <Tr t={Translations.t.delete.deletedTitle} />
+      </h3>
+    {:else}
       <div class="flex h-full w-full flex-grow flex-col">
         <!-- Title element and  title icons-->
         <h3 class="m-0">
@@ -37,7 +39,6 @@
             <TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags} {layer} />
           </a>
         </h3>
-
         <div
           class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 pt-0.5 sm:pt-1"
         >
@@ -57,22 +58,22 @@
           {/each}
 
           {#if $isTesting || $isDebugging}
-            <a class="subtle" href="https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Layers/{layer.id}.md" target="_blank" rel="noreferrer noopener " >{layer.id}</a>
+            <a class="subtle" href="https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Layers/{layer.id}.md"
+               target="_blank" rel="noreferrer noopener ">{layer.id}</a>
           {/if}
         </div>
       </div>
-    </div>
+    {/if}
-
-    <button
-      on:click={() => state.selectedElement.setData(undefined)}
-      use:ariaLabel={Translations.t.general.backToMap}
-      class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
-      style="border: 0 !important; padding: 0 !important;"
-    >
-      <XCircleIcon aria-hidden={true} class="h-8 w-8" />
-    </button>
   </div>
-{/if}
+  <button
+    class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
+    on:click={() => state.selectedElement.setData(undefined)}
+    style="border: 0 !important; padding: 0 !important;"
+    use:ariaLabel={Translations.t.general.backToMap}
+  >
+    <XCircleIcon aria-hidden={true} class="h-8 w-8" />
+  </button>
+</div>
 
 <style>
     :global(.title-icons a) {

src/UI/BigComponents/SelectedElementView.svelte

@@ -9,25 +9,27 @@
   import Tr from "../Base/Tr.svelte"
   import TagRenderingConfig from "../../Models/ThemeConfig/TagRenderingConfig"
   import UserRelatedState from "../../Logic/State/UserRelatedState"
+  import Delete_icon from "../../assets/svg/Delete_icon.svelte"
+  import BackButton from "../Base/BackButton.svelte"
 
   export let state: SpecialVisualizationState
   export let selectedElement: Feature
   export let highlightedRendering: UIEventSource<string> = undefined
 
   export let tags: UIEventSource<Record<string, string>> = state.featureProperties.getStore(
-    selectedElement.properties.id
+    selectedElement.properties.id,
   )
 
-  let layer: LayerConfig = selectedElement.properties.id === "settings" ? UserRelatedState.usersettingsConfig :  state.layout.getMatchingLayer(tags.data)
+  let layer: LayerConfig = selectedElement.properties.id === "settings" ? UserRelatedState.usersettingsConfig : state.layout.getMatchingLayer(tags.data)
-  
+
-  
+
   let stillMatches = tags.map(tags => !layer?.source?.osmTags || layer.source.osmTags?.matchesProperties(tags))
 
   let _metatags: Record<string, string>
   onDestroy(
     state.userRelatedState.preferencesAsTags.addCallbackAndRun((tags) => {
       _metatags = tags
-    })
+    }),
   )
 
   let knownTagRenderings: Store<TagRenderingConfig[]> = tags.mapD((tgs) =>
@@ -35,22 +37,26 @@
       (config) =>
         (config.condition?.matchesProperties(tgs) ?? true) &&
         (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true) &&
-        config.IsKnown(tgs)
+        config.IsKnown(tgs),
-    )
+    ),
   )
 </script>
 
 {#if !$stillMatches}
-  <div class="alert"  aria-live="assertive">
+  <div class="alert" aria-live="assertive">
-    <Tr t={Translations.t.delete.isChanged}/>
+    <Tr t={Translations.t.delete.isChanged} />
   </div>
 {:else if $tags._deleted === "yes"}
-  <div aria-live="assertive">
+  <div class="flex w-full flex-col p-2">
-    <Tr t={Translations.t.delete.isDeleted} />
+    <div aria-live="assertive" class="alert flex items-center justify-center self-stretch">
+      <Delete_icon class="w-8 h-8 m-2" />
+      <Tr t={Translations.t.delete.isDeleted} />
+    </div>
+    <BackButton clss="self-stretch mt-4" on:click={() => state.selectedElement.setData(undefined)}>
+      <Tr t={Translations.t.general.returnToTheMap} />
+    </BackButton>
+    
   </div>
-  <button class="w-full" on:click={() => state.selectedElement.setData(undefined)}>
-    <Tr t={Translations.t.general.returnToTheMap} />
-  </button>
 {:else}
   <div
     class="selected-element-view flex h-full w-full flex-col gap-y-2 overflow-y-auto p-1 px-4"