Improve share functionality

assets/layers/questions/questions.json

@@ -1583,6 +1583,7 @@
     },
     {
       "id": "last_edit",
+      "labels": ["added_by_default"],
       "description": "Gives some metainfo about the last edit and who did edit it - rendering only",
       "condition": {
         "and": [
@@ -1622,6 +1623,7 @@
     },
     {
       "id": "just_created",
+      "labels": ["added_by_default"],
       "description": "This element shows a 'thank you' that the contributor has recently created this element",
       "classes": "rounded-xl thanks",
       "mappings": [
@@ -2609,6 +2611,34 @@
           }
         }
       ]
+    },
+    {
+      "id": "qr_code",
+      "labels": ["added_by_default"],
+      "classes": "flex items-center gap-x-2",
+      "render": {
+        "special": {
+          "type": "qr_code"
+        },
+        "after": {
+          "en": "Scan this code to open this location on another device",
+          "nl": "Scan deze code om deze locatie op een ander apparaat te zien"
+        }
+      }
+    },
+    {
+      "id": "share",
+      "labels": ["added_by_default"],
+      "metacondition": "_supports_sharing=yes",
+      "render": {
+        "special": {
+          "type": "share_link",
+          "text": {
+            "en": "Share this location",
+            "nl": "Deel deze locatie"
+          }
+        }
+      }
     }
   ]
 }

public/css/index-tailwind-output.css

@@ -1248,10 +1248,6 @@ video {
   width: 16rem;
 }
 
-.w-14 {
-  width: 3.5rem;
-}
-
 .w-auto {
   width: auto;
 }

src/Models/ThemeConfig/Conversion/PrepareLayer.ts

@@ -601,6 +601,7 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
         }
         json = { ...json }
         json.tagRenderings = [...(json.tagRenderings ?? [])]
+        const allIds = new Set<string>(json.tagRenderings.map((tr) => tr["id"]))
         const specialVisualisations = ValidationUtils.getAllSpecialVisualisations(
             <any>json.tagRenderings
         )
@@ -658,11 +659,12 @@ export class AddEditingElements extends DesugaringStep<LayerConfigJson> {
             })
         }
 
-        if (!usedSpecialFunctions.has("qr_code")) {
-            json.tagRenderings.push({
-                id: "qr_code",
-                render: { "*": "{qr_code()}" },
-            })
+        if (!allIds.has("qr_code")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code"))
+        }
+
+        if (!allIds.has("share")) {
+            json.tagRenderings.push(this._desugaring.tagRenderings.get("share"))
         }
 
         if (!usedSpecialFunctions.has("all_tags")) {

src/UI/Base/ShareButton.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import ToSvelte from "./ToSvelte.svelte"
-  import Svg from "../../Svg"
   import Share from "../../assets/svg/Share.svelte"
   import { ariaLabel } from "../../Utils/ariaLabel"
   import Translations from "../i18n/Translations"
@@ -10,6 +8,9 @@
     title: string
     url: string
   }
+  export let text: string
+  let isIcon = text === undefined || text === ""
+
   function share() {
     if (!navigator.share) {
       console.log("web share not supported")
@@ -26,8 +27,16 @@
   }
 </script>
 
-<button on:click={share} class="soft no-image-background m-0 h-8 w-8 p-0" use:ariaLabel={Translations.t.general.share}>
-  <slot name="content">
-    <Share class="h-7 w-7 p-1" />
-  </slot>
-</button>
+{#if isIcon}
+  <button on:click={share} class="soft no-image-background m-0 h-8 w-8 p-0"
+          use:ariaLabel={Translations.t.general.share}>
+    <slot name="content">
+      <Share class="h-7 w-7 p-1" />
+    </slot>
+  </button>
+{:else}
+  <button on:click={share}>
+    <Share class="h-8 w-8 pr-2" />
+    {text}
+  </button>
+{/if}

src/UI/Popup/ShareLinkViz.ts

@@ -14,6 +14,10 @@ export class ShareLinkViz implements SpecialVisualization {
             name: "url",
             doc: "The url to share (default: current URL)",
         },
+        {
+            name: "text",
+            doc: "The text to show on the button. If none is given, will act as a titleIcon",
+        },
     ]
     needsUrls = []
 
@@ -22,6 +26,8 @@ export class ShareLinkViz implements SpecialVisualization {
         tagSource: UIEventSource<Record<string, string>>,
         args: string[]
     ) {
+        const text = args[1]
+
         const generateShareData = () => {
             const title = state?.layout?.title?.txt ?? "MapComplete"
 
@@ -46,6 +52,6 @@ export class ShareLinkViz implements SpecialVisualization {
             }
         }
 
-        return new SvelteUIElement(ShareButton, { generateShareData })
+        return new SvelteUIElement(ShareButton, { generateShareData, text })
     }
 }

src/UI/SpecialVisualizations.ts

@@ -1578,8 +1578,15 @@ export default class SpecialVisualizations {
                                     return undefined
                                 }
                                 const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
+                                const includeLayout = window.location.pathname
+                                    .split("/")
+                                    .at(-1)
+                                    .startsWith("theme")
+                                const layout = includeLayout
+                                    ? "layout=" + state.layout.id + "&"
+                                    : ""
                                 const url =
-                                    `${window.location.protocol}//${window.location.host}${window.location.pathname}?lat=${lat}&lon=${lon}&z=15` +
+                                    `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` +
                                     `#${id}`
                                 return new Img(new Qr(url).toImageElement(75)).SetStyle(
                                     "width: 75px"