Merge branch 'master' into develop

src/UI/BigComponents/SelectedElementTitle.svelte

@@ -13,12 +13,15 @@
   export let layer: LayerConfig
   export let selectedElement: Feature
   let tags: UIEventSource<Record<string, string>> = state.featureProperties.getStore(
-    selectedElement.properties.id
+    selectedElement.properties.id,
   )
   $: {
     tags = state.featureProperties.getStore(selectedElement.properties.id)
   }
 
+  let isTesting = state.featureSwitchIsTesting
+  let isDebugging = state.featureSwitches.featureSwitchIsDebugging
+  
   let metatags: Store<Record<string, string>> = state.userRelatedState.preferencesAsTags
 </script>
 
@@ -39,7 +42,7 @@
           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"
         >
           {#each layer.titleIcons as titleIconConfig}
-            {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...$metatags, ...$tags } ) ?? true) && titleIconConfig.IsKnown($tags)}
+            {#if (titleIconConfig.condition?.matchesProperties($tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({ ...$metatags, ...$tags }) ?? true) && titleIconConfig.IsKnown($tags)}
               <div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
                 <TagRenderingAnswer
                   config={titleIconConfig}
@@ -52,6 +55,10 @@
               </div>
             {/if}
           {/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>
+          {/if}
         </div>
       </div>
     </div>
@@ -68,7 +75,7 @@
 {/if}
 
 <style>
-  :global(.title-icons a) {
-    display: block !important;
-  }
+    :global(.title-icons a) {
+        display: block !important;
+    }
 </style>

src/UI/BigComponents/ShareScreen.svelte

@@ -11,10 +11,11 @@
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
   import { Utils } from "../../Utils"
-  import Svg from "../../Svg"
-  import ToSvelte from "../Base/ToSvelte.svelte"
   import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
   import Share from "../../assets/svg/Share.svelte"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import Img from "../Base/Img"
+  import Qr from "../../Utils/Qr"
 
   export let state: ThemeViewState
   const tr = Translations.t.general.sharescreen
@@ -69,22 +70,32 @@
   }
 </script>
 
-<div>
-  <Tr t={tr.intro} />
-  <div class="flex">
-    {#if typeof navigator?.share === "function"}
-      <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
-        <Share />
-      </button>
-    {/if}
-    {#if navigator.clipboard !== undefined}
-      <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
-        <DocumentDuplicateIcon />
-      </button>
-    {/if}
-    <div class="literal-code" on:click={(e) => Utils.selectTextIn(e.target)}>
-      {linkToShare}
+<div class="flex flex-col">
+  <div class="flex justify-between items-start">
+
+    <div class="flex flex-col">
+
+      <Tr t={tr.intro} />
+      <div class="flex">
+        {#if typeof navigator?.share === "function"}
+          <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
+            <Share />
+          </button>
+        {/if}
+        {#if navigator.clipboard !== undefined}
+          <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
+            <DocumentDuplicateIcon />
+          </button>
+        {/if}
+        <div class="literal-code" on:click={(e) => Utils.selectTextIn(e.target)}>
+          {linkToShare}
+        </div>
+      </div>
     </div>
+      
+    <ToSvelte construct={() => new Img(new Qr(linkToShare).toImageElement(125)).SetStyle(
+                                    "width: 125px"
+                                )} />
   </div>
 
   <div class="flex justify-center">
@@ -95,29 +106,31 @@
 
   <Tr t={tr.embedIntro} />
 
-  <div class="link-underline my-1 flex flex-col">
-    <label>
-      <input bind:checked={showWelcomeMessage} type="checkbox" />
-      <Tr t={tr.fsWelcomeMessage} />
-    </label>
+  <div class="flex flex-col interactive p-1">
 
-    <label>
-      <input bind:checked={enableLogin} type="checkbox" />
-      <Tr t={tr.fsUserbadge} />
-    </label>
-  </div>
+    <div class="literal-code m-1">
+      &lt;span class="literal-code iframe-code-block"&gt; <br />
+      &lt;iframe src="{linkToShare}"
+      <br />
+      allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px"
+      <br />
+      title="{state.layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;
+      <br />
+      &lt;/iframe&gt;
+      <br />
+      &lt;/span&gt;
+    </div>
+    <div class="link-underline my-1 flex flex-col">
+      <label>
+        <input bind:checked={showWelcomeMessage} type="checkbox" id="share_show_welcome" />
+        <Tr t={tr.fsWelcomeMessage} />
+      </label>
 
-  <div class="literal-code m-1">
-    &lt;span class="literal-code iframe-code-block"&gt; <br />
-    &lt;iframe src="${url}"
-    <br />
-    allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px"
-    <br />
-    title="${state.layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;
-    <br />
-    &lt;/iframe&gt;
-    <br />
-    &lt;/span&gt;
+      <label>
+        <input bind:checked={enableLogin} type="checkbox" id="share_enable_login"/>
+        <Tr t={tr.fsUserbadge} />
+      </label>
+    </div>
   </div>
-  <Tr t={tr.documentation} cls="link-underline" />
+  <Tr cls="link-underline" t={tr.documentation} />
 </div>