UX: sharescreen: fixes, slight reorg, add QR

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>
+<div class="flex flex-col">
-  <Tr t={tr.intro} />
+  <div class="flex justify-between items-start">
-  <div class="flex">
+
-    {#if typeof navigator?.share === "function"}
+    <div class="flex flex-col">
-      <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
+
-        <Share />
+      <Tr t={tr.intro} />
-      </button>
+      <div class="flex">
-    {/if}
+        {#if typeof navigator?.share === "function"}
-    {#if navigator.clipboard !== undefined}
+          <button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
-      <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
+            <Share />
-        <DocumentDuplicateIcon />
+          </button>
-      </button>
+        {/if}
-    {/if}
+        {#if navigator.clipboard !== undefined}
-    <div class="literal-code" on:click={(e) => Utils.selectTextIn(e.target)}>
+          <button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
-      {linkToShare}
+            <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">
+  <div class="flex flex-col interactive p-1">
-    <label>
-      <input bind:checked={showWelcomeMessage} type="checkbox" />
-      <Tr t={tr.fsWelcomeMessage} />
-    </label>
 
-    <label>
+    <div class="literal-code m-1">
-      <input bind:checked={enableLogin} type="checkbox" />
+      &lt;span class="literal-code iframe-code-block"&gt; <br />
-      <Tr t={tr.fsUserbadge} />
+      &lt;iframe src="{linkToShare}"
-    </label>
+      <br />
-  </div>
+      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">
+      <label>
-    &lt;span class="literal-code iframe-code-block"&gt; <br />
+        <input bind:checked={enableLogin} type="checkbox" id="share_enable_login"/>
-    &lt;iframe src="${url}"
+        <Tr t={tr.fsUserbadge} />
-    <br />
+      </label>
-    allow="geolocation" width="100%" height="100%" style="min-width: 250px; min-height: 250px"
+    </div>
-    <br />
-    title="${state.layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;
-    <br />
-    &lt;/iframe&gt;
-    <br />
-    &lt;/span&gt;
   </div>
-  <Tr t={tr.documentation} cls="link-underline" />
+  <Tr cls="link-underline" t={tr.documentation} />
 </div>