Re-add language selector (#4723)

Fixed version
This commit is contained in:
d11n 2023-03-02 08:34:15 +01:00 committed by GitHub
parent 3cb7cc01e4
commit 126c8c101e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 5 deletions

View file

@ -164,9 +164,7 @@
<a class="store-powered-by" href="https://btcpayserver.org" target="_blank" rel="noreferrer noopener">
{{$t("powered_by")}} <partial name="_StoreFooterLogo" />
</a>
@* TODO: Re-add this once checkout v2 has been translated
<select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select w-auto" v-on:change="changeLanguage"></select>
*@
<select asp-for="DefaultLang" asp-items="@LangService.GetLanguageSelectListItems()" class="form-select" v-on:change="changeLanguage"></select>
</footer>
</div>
<noscript>

View file

@ -168,13 +168,12 @@ section dl > div dd {
color: var(--btcpay-body-text-muted);
}
#DefaultLang {
width: calc(var(--text-width, 110px) + 3rem);
color: var(--btcpay-body-text-muted);
background-color: transparent;
box-shadow: none;
border: none;
text-align: right;
cursor: pointer;
margin-left: -4.5rem; /* Adjust for visual center */
}
#DefaultLang:hover {
color: var(--btcpay-body-text-hover);

View file

@ -51,11 +51,23 @@ function isLanguageAvailable(languageCode) {
return availableLanguages.includes(languageCode);
}
function updateLanguageSelect() {
// calculate and set width, as we want it center aligned
const $languageSelect = document.getElementById('DefaultLang');
const element = document.createElement('div');
element.innerText = $languageSelect.querySelector('option:checked').text;
$languageSelect.parentElement.appendChild(element);
const width = element.offsetWidth;
$languageSelect.parentElement.removeChild(element);
$languageSelect.style.setProperty('--text-width', `${width}px`);
}
function updateLanguage(lang) {
if (isLanguageAvailable(lang)) {
i18next.changeLanguage(lang);
urlParams.set('lang', lang);
window.history.replaceState({}, '', `${location.pathname}?${urlParams}`);
updateLanguageSelect();
}
}
@ -177,6 +189,7 @@ function initApp() {
if (this.isActive) {
this.listenIn();
}
updateLanguageSelect();
window.parent.postMessage('loaded', '*');
},
methods: {