From 08a604c3f586abbbca5d3b173118defb67dda6df Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Tue, 30 May 2023 23:45:30 +0200 Subject: [PATCH] Style: better styling of translate buttons, hide translate buttons where not applicable --- Models/ThemeConfig/LayerConfig.ts | 2 +- Models/ThemeConfig/WithContextLoader.ts | 6 +++--- UI/Base/Tr.svelte | 2 +- UI/Base/WeblateLink.svelte | 7 +++---- UI/OpeningHours/OpeningHoursPickerTable.ts | 1 + UI/OpeningHours/OpeningHoursVisualization.ts | 1 + UI/Popup/TagRendering/SpecialTranslation.svelte | 2 +- UI/i18n/Translation.ts | 2 ++ index.css | 7 +++++-- public/css/index-tailwind-output.css | 8 ++++---- 10 files changed, 22 insertions(+), 16 deletions(-) diff --git a/Models/ThemeConfig/LayerConfig.ts b/Models/ThemeConfig/LayerConfig.ts index 2cc58b5d5..94d7be601 100644 --- a/Models/ThemeConfig/LayerConfig.ts +++ b/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 diff --git a/Models/ThemeConfig/WithContextLoader.ts b/Models/ThemeConfig/WithContextLoader.ts index ad481a57f..489531460 100644 --- a/Models/ThemeConfig/WithContextLoader.ts +++ b/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}`) } /** diff --git a/UI/Base/Tr.svelte b/UI/Base/Tr.svelte index 2fa188cd8..120b0e4c4 100644 --- a/UI/Base/Tr.svelte +++ b/UI/Base/Tr.svelte @@ -30,7 +30,7 @@ {#if t} - + diff --git a/UI/Base/WeblateLink.svelte b/UI/Base/WeblateLink.svelte index 594019883..7a4b04274 100644 --- a/UI/Base/WeblateLink.svelte +++ b/UI/Base/WeblateLink.svelte @@ -10,18 +10,17 @@ let linkToWeblate = Locale.showLinkToWeblate; let linkOnMobile = Locale.showLinkOnMobile; let language = Locale.language; - -{#if context} +{#if !!context && context.indexOf(":") > 0} {#if $linkOnMobile} - + {:else if $linkToWeblate} - + {/if} {/if} diff --git a/UI/OpeningHours/OpeningHoursPickerTable.ts b/UI/OpeningHours/OpeningHoursPickerTable.ts index e2a6cfade..dce9a8e10 100644 --- a/UI/OpeningHours/OpeningHoursPickerTable.ts +++ b/UI/OpeningHours/OpeningHoursPickerTable.ts @@ -48,6 +48,7 @@ export default class OpeningHoursPickerTable extends InputElement 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 diff --git a/UI/OpeningHours/OpeningHoursVisualization.ts b/UI/OpeningHours/OpeningHoursVisualization.ts index 7a4273352..fa25c199e 100644 --- a/UI/OpeningHours/OpeningHoursVisualization.ts +++ b/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 { diff --git a/UI/Popup/TagRendering/SpecialTranslation.svelte b/UI/Popup/TagRendering/SpecialTranslation.svelte index 7fe62c111..4648580ea 100644 --- a/UI/Popup/TagRendering/SpecialTranslation.svelte +++ b/UI/Popup/TagRendering/SpecialTranslation.svelte @@ -52,7 +52,7 @@ {#each specs as specpart} {#if typeof specpart === "string"} - + diff --git a/UI/i18n/Translation.ts b/UI/i18n/Translation.ts index 72f00dd00..1d64444fb 100644 --- a/UI/i18n/Translation.ts +++ b/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)) { diff --git a/index.css b/index.css index fe5d76958..d947f8ce5 100644 --- a/index.css +++ b/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; } diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index fc7330753..d8382b05e 100644 --- a/public/css/index-tailwind-output.css +++ b/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; - width: -moz-fit-content; - 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; -webkit-backdrop-filter: var(--low-interaction-background);