refactoring: fix translation links

UI/Base/Tr.svelte

@@ -7,6 +7,7 @@
   import Locale from "../i18n/Locale";
   import { Utils } from "../../Utils";
   import FromHtml from "./FromHtml.svelte";
+  import WeblateLink from "./WeblateLink.svelte";
 
   export let t: Translation;
   export let tags: Record<string, string> | undefined = undefined;
@@ -14,17 +15,22 @@
   let txt: string | undefined;
 
   $: onDestroy(Locale.language.addCallbackAndRunD(l => {
-    const translation = t?.textFor(l)
-    if(translation === undefined){
-      return
+    const translation = t?.textFor(l);
+    if (translation === undefined) {
+      return;
     }
-    if(tags){
-      txt = Utils.SubstituteKeys(txt, tags)
-    }else{
-      txt = translation
+    if (tags) {
+      txt = Utils.SubstituteKeys(txt, tags);
+    } else {
+      txt = translation;
     }
   }));
 
 </script>
 
-<FromHtml src={txt}></FromHtml>
+{#if t}
+  <span class="inline-flex items-center">
+  <FromHtml src={txt}></FromHtml>
+  <WeblateLink context={t.context}></WeblateLink>
+  </span>
+{/if}

UI/Base/WeblateLink.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import Locale from "../i18n/Locale";
+  import LinkToWeblate from "./LinkToWeblate";
+
+  /**
+   * Shows a small icon which will open up weblate; a contributor can translate the item for 'context' there
+   */
+  export let context : string
+
+  let linkToWeblate = Locale.showLinkToWeblate;
+  let linkOnMobile = Locale.showLinkOnMobile;
+  let language = Locale.language;
+
+</script>
+
+
+{#if context}
+  {#if $linkOnMobile}
+    <a href={LinkToWeblate.hrefToWeblate($language, context)} target="_blank" class="mx-1">
+      <img src="./assets/svg/translate.svg" class="w-3 h-3 rounded-full font-gray" />
+    </a>
+  {:else if $linkToWeblate}
+    <a href={LinkToWeblate.hrefToWeblate($language, context)} class="hidden-on-mobile mx-1" target="_blank">
+      <img src="./assets/svg/translate.svg" class="w-3 h-3 rounded-full font-gray" />
+    </a>
+  {/if}
+{/if}

UI/Popup/TagRendering/SpecialTranslation.svelte

@@ -8,8 +8,9 @@
   import type { Feature } from "geojson";
   import { UIEventSource } from "../../../Logic/UIEventSource.js";
   import ToSvelte from "../../Base/ToSvelte.svelte";
-  import FromHtml from "../../Base/FromHtml.svelte";
   import LayerConfig from "../../../Models/ThemeConfig/LayerConfig";
+  import WeblateLink from "../../Base/WeblateLink.svelte";
+  import FromHtml from "../../Base/FromHtml.svelte";
 
   /**
    * The 'specialTranslation' renders a `Translation`-object, but interprets the special values as well
@@ -33,8 +34,11 @@
 </script>
 
 {#each specs as specpart}
-  {#if typeof specpart === "string"}
-    <FromHtml src={Utils.SubstituteKeys(specpart, $tags)}></FromHtml>
+  {#if typeof specpart === "string"} 
+    <span class="inline-flex items-center">
+    <FromHtml src={Utils.SubstituteKeys(specpart, $tags)} />
+    <WeblateLink context={t.context} />
+    </span>
   {:else if $tags !== undefined }
     <ToSvelte construct={specpart.func.constr(state, tags, specpart.args, feature, layer)}></ToSvelte>
   {/if}

UI/i18n/Translation.ts

@@ -7,7 +7,7 @@ export class Translation extends BaseUIElement {
     public static forcedLanguage = undefined
 
     public readonly translations: Record<string, string>
-    context?: string
+    public readonly context?: string
 
     constructor(translations: Record<string, string>, context?: string) {
         super()

css/index-tailwind-output.css

@@ -762,8 +762,12 @@ video {
   top: 1rem;
 }
 
-.bottom-2 {
-  bottom: 0.5rem;
+.right-1 {
+  right: 0.25rem;
+}
+
+.bottom-1 {
+  bottom: 0.25rem;
 }
 
 .left-1\/2 {
@@ -1039,6 +1043,10 @@ video {
   height: 3rem;
 }
 
+.h-6 {
+  height: 1.5rem;
+}
+
 .h-screen {
   height: 100vh;
 }
@@ -1047,10 +1055,6 @@ video {
   height: 1rem;
 }
 
-.h-6 {
-  height: 1.5rem;
-}
-
 .h-1\/2 {
   height: 50%;
 }
@@ -1170,11 +1174,6 @@ video {
   width: 24rem;
 }
 
-.w-min {
-  width: -webkit-min-content;
-  width: min-content;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -1455,6 +1454,10 @@ video {
   border-style: solid;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .border-dotted {
   border-style: dotted;
 }