Finetuning of usage within an iFrame

src/UI/BigComponents/AboutMapComplete.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+
+  import Translations from "../i18n/Translations"
+  import { Utils } from "../../Utils"
+  import Hotkeys from "../Base/Hotkeys"
+  import Constants from "../../Models/Constants"
+  import Tr from "../Base/Tr.svelte"
+  import Add from "../../assets/svg/Add.svelte"
+  import Github from "../../assets/svg/Github.svelte"
+  import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
+  import Mastodon from "../../assets/svg/Mastodon.svelte"
+  import Liberapay from "../../assets/svg/Liberapay.svelte"
+  import ToSvelte from "../Base/ToSvelte.svelte"
+  import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
+  import MapillaryLink from "./MapillaryLink.svelte"
+  import OpenJosm from "../Base/OpenJosm.svelte"
+  import OpenIdEditor from "./OpenIdEditor.svelte"
+  import If from "../Base/If.svelte"
+  import Community from "../../assets/svg/Community.svelte"
+  import Bug from "../../assets/svg/Bug.svelte"
+  import ThemeViewState from "../../Models/ThemeViewState"
+
+  export let state: ThemeViewState
+
+  let layout = state.layout
+  let featureSwitches = state.featureSwitches
+
+</script>
+
+<div class="link-underline links-w-full m-2 flex flex-col gap-y-1">
+  <Tr t={Translations.t.general.aboutMapComplete.intro} />
+
+  <a class="flex" href={Utils.HomepageLink()}>
+    <Add class="h-6 w-6" />
+    {#if Utils.isIframe}
+      <Tr t={Translations.t.general.seeIndex} />
+    {:else}
+      <Tr t={Translations.t.general.backToIndex} />
+    {/if}
+  </a>
+
+  <a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
+    <Github class="h-6 w-6" />
+    <Tr t={Translations.t.general.attribution.gotoSourceCode} />
+  </a>
+
+  <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
+    <Bug class="h-6 w-6" />
+    <Tr t={Translations.t.general.attribution.openIssueTracker} />
+  </a>
+
+  <a
+    class="flex"
+    href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
+              layout.id +
+              ".md"}
+    target="_blank"
+  >
+    <DocumentChartBar class="h-6 w-6" />
+    <Tr
+      t={Translations.t.general.attribution.openThemeDocumentation.Subs({
+                name: layout.title,
+              })}
+    />
+  </a>
+
+  <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
+    <Mastodon class="h-6 w-6" />
+    <Tr t={Translations.t.general.attribution.followOnMastodon} />
+  </a>
+
+  <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
+    <Liberapay class="h-6 w-6" />
+    <Tr t={Translations.t.general.attribution.donate} />
+  </a>
+
+  <button
+    class="as-link"
+    on:click={() => state.guistate.communityIndexPanelIsOpened.setData(true)}
+  >
+    <Community class="h-6 w-6" />
+    <Tr t={Translations.t.communityIndex.title} />
+  </button>
+
+  <If condition={featureSwitches.featureSwitchEnableLogin}>
+    <OpenIdEditor mapProperties={state.mapProperties} />
+    <OpenJosm {state} />
+    <MapillaryLink large={false} mapProperties={state.mapProperties} />
+  </If>
+
+  <button
+    class="as-link"
+    on:click={() => state.guistate.privacyPanelIsOpened.setData(true)}
+  >
+    <EyeIcon class="h-6 w-6 pr-1" />
+    <Tr t={Translations.t.privacy.title} />
+  </button>
+
+  <div class="subtle">
+    {Constants.vNumber}
+  </div>
+</div>