Merge branch 'develop' into RobinLinde-patch-2

src/UI/BigComponents/ExtraLinkButton.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig"
+  import Locale from "../i18n/Locale"
+  import { Utils } from "../../Utils"
+  import Translations from "../i18n/Translations"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import Pop_out from "../../assets/svg/Pop_out.svelte"
+  import Tr from "../Base/Tr.svelte"
+  import Icon from "../Map/Icon.svelte"
+
+
+  export let state: SpecialVisualizationState
+  let theme = state.layout?.id ?? ""
+  let config: ExtraLinkConfig = state.layout.extraLink
+  const isIframe = window !== window.top
+  let basepath = window.location.host
+  let showWelcomeMessageSwitch = state.featureSwitches.featureSwitchWelcomeMessage
+
+  const t = Translations.t.general
+  const href = state.mapProperties.location.map(
+    (loc) => {
+      const subs = {
+        ...loc,
+        theme: theme,
+        basepath,
+        language: Locale.language.data
+      }
+      return Utils.SubstituteKeys(config.href, subs)
+    },
+    [state.mapProperties.zoom]
+  )
+</script>
+
+
+{#if config !== undefined &&
+!(config.requirements.has("iframe") && !isIframe) &&
+!(config.requirements.has("no-iframe") && isIframe) &&
+!(config.requirements.has("welcome-message") && !$showWelcomeMessageSwitch) &&
+!(config.requirements.has("no-welcome-message") && $showWelcomeMessageSwitch)}
+<div class="links-as-button">
+
+  <a href={$href} target={config.newTab ? "_blank" : ""} rel="noopener"
+     class="flex pointer-events-auto rounded-full border-black">
+
+    <Icon icon={config.icon} clss="w-6 h-6 m-2"/>
+
+    {#if config.text}
+      <Tr t={config.text} />
+    {:else}
+      <Tr t={t.screenToSmall.Subs({theme: state.layout.title})} />
+    {/if}
+
+  </a>
+</div>
+{/if}

src/UI/BigComponents/ExtraLinkButton.ts

@@ -1,101 +0,0 @@
-import { UIElement } from "../UIElement"
-import BaseUIElement from "../BaseUIElement"
-import { Store } from "../../Logic/UIEventSource"
-import ExtraLinkConfig from "../../Models/ThemeConfig/ExtraLinkConfig"
-import Img from "../Base/Img"
-import { SubtleButton } from "../Base/SubtleButton"
-import Toggle from "../Input/Toggle"
-import Locale from "../i18n/Locale"
-import { Utils } from "../../Utils"
-import Svg from "../../Svg"
-import Translations from "../i18n/Translations"
-import { Translation } from "../i18n/Translation"
-
-interface ExtraLinkButtonState {
-    layout: { id: string; title: Translation }
-    featureSwitches: { featureSwitchWelcomeMessage: Store<boolean> }
-    mapProperties: {
-        location: Store<{ lon: number; lat: number }>
-        zoom: Store<number>
-    }
-}
-export default class ExtraLinkButton extends UIElement {
-    private readonly _config: ExtraLinkConfig
-    private readonly state: ExtraLinkButtonState
-
-    constructor(state: ExtraLinkButtonState, config: ExtraLinkConfig) {
-        super()
-        this.state = state
-        this._config = config
-    }
-
-    protected InnerRender(): BaseUIElement {
-        if (this._config === undefined) {
-            return undefined
-        }
-
-        const c = this._config
-
-        const isIframe = window !== window.top
-        if (c.requirements?.has("iframe") && !isIframe) {
-            return undefined
-        }
-
-        if (c.requirements?.has("no-iframe") && isIframe) {
-            return undefined
-        }
-
-        let link: BaseUIElement
-        const theme = this.state.layout?.id ?? ""
-        const basepath = window.location.host
-        const href = this.state.mapProperties.location.map(
-            (loc) => {
-                const subs = {
-                    ...loc,
-                    theme: theme,
-                    basepath,
-                    language: Locale.language.data,
-                }
-                return Utils.SubstituteKeys(c.href, subs)
-            },
-            [this.state.mapProperties.zoom]
-        )
-
-        let img: BaseUIElement = Svg.pop_out_svg()
-        if (c.icon !== undefined) {
-            img = new Img(c.icon).SetClass("h-6")
-        }
-
-        let text: Translation
-        if (c.text === undefined) {
-            text = Translations.t.general.screenToSmall.Subs({
-                theme: this.state.layout.title,
-            })
-        } else {
-            text = c.text.Clone()
-        }
-
-        link = new SubtleButton(img, text, {
-            url: href,
-            newTab: c.newTab,
-        })
-
-        if (c.requirements?.has("no-welcome-message")) {
-            link = new Toggle(
-                undefined,
-                link,
-                this.state.featureSwitches.featureSwitchWelcomeMessage
-            )
-        }
-
-        if (c.requirements?.has("welcome-message")) {
-            link = new Toggle(
-                link,
-                undefined,
-                this.state.featureSwitches.featureSwitchWelcomeMessage
-            )
-        }
-
-        return link
-    }
-}

src/UI/BigComponents/OpenBackgroundSelectorButton.svelte

@@ -4,7 +4,6 @@
    * Even though the component is very small, it gets its own class as it is often reused
    */
   import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
-  import type { SpecialVisualizationState } from "../SpecialVisualization"
   import Translations from "../i18n/Translations"
   import MapControlButton from "../Base/MapControlButton.svelte"
   import Tr from "../Base/Tr.svelte"
@@ -16,11 +15,13 @@
   export let state: ThemeViewState
   export let map: Store<MlMap> = undefined
   export let hideTooltip = false
+  export let htmlElem : UIEventSource<HTMLElement> = undefined
 </script>
 
 <MapControlButton
   arialabel={Translations.t.general.labels.background}
   on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
+  {htmlElem}
 >
   <StyleLoadingIndicator map={map ?? state.map} rasterLayer={state.mapProperties.rasterLayer}>
     <Square3Stack3dIcon class="h-6 w-6" />

src/UI/BigComponents/PrivacyPolicy.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
   import Tr from "../Base/Tr.svelte"
   import Translations from "../i18n/Translations"
+  import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte"
+  import type { SpecialVisualizationState } from "../SpecialVisualization"
+  import UserRelatedState from "../../Logic/State/UserRelatedState"
 
   const t = Translations.t.privacy
+  export let state: SpecialVisualizationState
+  const usersettings = UserRelatedState.usersettingsConfig
+  const editPrivacy = usersettings.tagRenderings.find(tr => tr.id === "more_privacy")
+  const isLoggedIn = state.osmConnection.isLoggedIn
 </script>
 
 <div class="link-underline flex flex-col">
@@ -20,7 +27,41 @@
   <h3>
     <Tr t={t.editingTitle} />
   </h3>
-  <Tr t={t.editing} />
+  <Tr t={t.editingIntro} />
+  <Tr t={t.editingIntro} />
+  <ul>
+    <li>
+      <Tr t={t.items.changesYouMake} />
+    </li>
+    <li>
+      <Tr t={t.items.username} />
+    </li>
+    <li>
+      <Tr t={t.items.date} />
+    </li>
+    <li>
+      <Tr t={t.items.theme} />
+    </li>
+    <li>
+      <Tr t={t.items.language} />
+    </li>
+
+    <li>
+      {#if $isLoggedIn}
+      <TagRenderingEditable config={editPrivacy} selectedElement={{
+              type: "Feature",
+              properties: { id: "settings" },
+              geometry: { type: "Point", coordinates: [0, 0] },
+            }}
+                            {state}
+                            tags={state.userRelatedState.preferencesAsTags} />
+        {:else}
+          <Tr t={t.items.distanceIndicator} />
+        {/if}
+    </li>
+  </ul>
+
+  <Tr t={t.editingOutro} />
 
   <h3>
     <Tr t={t.miscCookiesTitle} />

src/UI/BigComponents/ThemeIntroPanel.svelte

@@ -15,6 +15,7 @@
   import Add from "../../assets/svg/Add.svelte"
   import Location_refused from "../../assets/svg/Location_refused.svelte"
   import Location from "../../assets/svg/Location.svelte"
+  import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
 
   /**
    * The theme introduction panel
@@ -48,6 +49,7 @@
 <div class="flex h-full flex-col justify-between">
   <div>
     <!-- Intro, description, ... -->
+
     <Tr t={layout.description} />
     <Tr t={Translations.t.general.welcomeExplanation.general} />
     {#if layout.layers.some((l) => l.presets?.length > 0)}