Style: better styling of translate buttons, hide translate buttons where not applicable

Models/ThemeConfig/LayerConfig.ts

@@ -388,7 +388,7 @@ export default class LayerConfig extends WithContextLoader {
             readOnlyMode: true,
         })
 
-        this.title = this.tr("title", undefined)
+        this.title = this.tr("title", undefined, translationContext)
         this.isShown = TagUtils.TagD(json.isShown, context + ".isShown")
 
         this.deletion = null

Models/ThemeConfig/WithContextLoader.ts

@@ -15,13 +15,13 @@ export default class WithContextLoader {
      *
      * The found value is interpreted as a tagrendering and fetched/parsed
      * */
-    public tr(key: string, deflt) {
+    public tr(key: string, deflt: undefined, translationContext?: string) {
         const v = this._json[key]
         if (v === undefined || v === null) {
             if (deflt === undefined) {
                 return undefined
             }
-            return new TagRenderingConfig(deflt, `${this._context}.${key}.default value`)
+            return new TagRenderingConfig(deflt, `${translationContext ?? this._context}.${key}.default value`)
         }
         if (typeof v === "string") {
             const shared = SharedTagRenderings.SharedTagRendering.get(v)
@@ -29,7 +29,7 @@ export default class WithContextLoader {
                 return shared
             }
         }
-        return new TagRenderingConfig(v, `${this._context}.${key}`)
+        return new TagRenderingConfig(v, `${translationContext ?? this._context}.${key}`)
     }
 
     /**

UI/Base/Tr.svelte

@@ -30,7 +30,7 @@
 </script>
 
 {#if t}
-  <span class={"inline-flex items-center "+cls}>
+  <span class={cls}>
   <FromHtml src={txt}></FromHtml>
   <WeblateLink context={t.context}></WeblateLink>
   </span>

UI/Base/WeblateLink.svelte

@@ -10,18 +10,17 @@
   let linkToWeblate = Locale.showLinkToWeblate;
   let linkOnMobile = Locale.showLinkOnMobile;
   let language = Locale.language;
-
 </script>
 
 
-{#if context}
+{#if !!context && context.indexOf(":") > 0}
   {#if $linkOnMobile}
     <a href={LinkToWeblate.hrefToWeblate($language, context)} target="_blank" class="mx-1 weblate-link">
-      <img src="./assets/svg/translate.svg" class="w-3 h-3 rounded-full font-gray" />
+      <img src="./assets/svg/translate.svg" class="font-gray" />
     </a>
   {:else if $linkToWeblate}
     <a href={LinkToWeblate.hrefToWeblate($language, context)} class="weblate-link hidden-on-mobile mx-1" target="_blank">
-      <img src="./assets/svg/translate.svg" class="w-3 h-3 rounded-full font-gray inline-block" />
+      <img src="./assets/svg/translate.svg" class="font-gray inline-block" />
     </a>
   {/if}
 {/if}

UI/OpeningHours/OpeningHoursPickerTable.ts

@@ -48,6 +48,7 @@ export default class OpeningHoursPickerTable extends InputElement<OpeningHour[]>
     protected InnerConstructElement(): HTMLElement {
         const table = document.createElement("table")
         table.classList.add("oh-table")
+        table.classList.add("no-weblate")
         table.classList.add("relative") // Workaround for webkit-based viewers, see #1019
 
         const cellHeightInPx = 14

UI/OpeningHours/OpeningHoursVisualization.ts

@@ -76,6 +76,7 @@ export default class OpeningHoursVisualization extends Toggle {
             new Loading(Translations.t.general.opening_hours.loadingCountry),
             tags.map((tgs) => tgs._country !== undefined)
         )
+        this.SetClass("no-weblate")
     }
 
     private static CreateFullVisualisation(oh: any): BaseUIElement {

UI/Popup/TagRendering/SpecialTranslation.svelte

@@ -52,7 +52,7 @@
 
 {#each specs as specpart}
   {#if typeof specpart === "string"} 
-    <span class="inline-flex items-center">
+    <span>
     <FromHtml src={Utils.SubstituteKeys(specpart, $tags)} />
     <WeblateLink context={t.context} />
     </span>

UI/i18n/Translation.ts

@@ -16,9 +16,11 @@ export class Translation extends BaseUIElement {
             throw `Translation without content (${context})`
         }
         this.context = translations["_context"] ?? context
+
         if (typeof translations === "string") {
             translations = { "*": translations }
         }
+
         let count = 0
         for (const translationsKey in translations) {
             if (!translations.hasOwnProperty(translationsKey)) {

index.css

@@ -324,7 +324,7 @@ label.checked {
     border: 2px solid var(--foreground-color);
 }
 
-.links-w-full a {
+.links-w-full a:not(.weblate-link) {
     display: flex;
     column-gap: 0.25rem;
     padding-left: 0.5rem;
@@ -462,15 +462,18 @@ select:hover {
 }
 
 .weblate-link {
-    width: fit-content;
+    display: inline-block;
     flex-shrink: 0;
     margin: 0;
     padding: 0.25rem;
+    width: 1.2rem;
+    height: 1.2rem;
     border: unset;
     border-radius: 5rem;
     backdrop-filter: var(--low-interaction-background);
 }
 
+
 .no-weblate .weblate-link {
     display: none !important;
 }

public/css/index-tailwind-output.css

@@ -2150,7 +2150,7 @@ label.checked {
   border: 2px solid var(--foreground-color);
 }
 
-.links-w-full a {
+.links-w-full a:not(.weblate-link) {
   display: flex;
   -webkit-column-gap: 0.25rem;
           column-gap: 0.25rem;
@@ -2286,12 +2286,12 @@ select:hover {
 }
 
 .weblate-link {
-  width: -webkit-fit-content;
+  display: inline-block;
-  width: -moz-fit-content;
-  width: fit-content;
   flex-shrink: 0;
   margin: 0;
   padding: 0.25rem;
+  width: 1.2rem;
+  height: 1.2rem;
   border: unset;
   border-radius: 5rem;
   -webkit-backdrop-filter: var(--low-interaction-background);