Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/settings: disable the language dropdown when auto

Browse source
This commit is contained in:
wukko 2024-07-08 19:46:20 +06:00
parent bd2bdf326f
commit cbc1febab2
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
3 changed files with 15 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/i18n/en/settings.json
View file

@ -78,7 +78,7 @@
"language": "language", "language": "language",
"language.auto.title": "use default browser language", "language.auto.title": "use default browser language",
"language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead.", "language.auto.description": "automatically picks the best language for you. if preferred browser language isn't available, english is used instead. disable this toggle to pick a language manually.",
"language.preferred.title": "preferred language", "language.preferred.title": "preferred language",
"language.preferred.description": "language used for interface and content." "language.preferred.description": "language used for interface and content."
} }

14
web/src/components/settings/LanguageDropdown.svelte
View file

@ -8,6 +8,8 @@
$: currentSetting = $settings.appearance.language; $: currentSetting = $settings.appearance.language;
$: disabled = $settings.appearance.autoLanguage;
const updateLocale = (lang: string) => { const updateLocale = (lang: string) => {
updateSetting({ updateSetting({
appearance: { appearance: {
@ -17,7 +19,7 @@
}; };
</script> </script>
<div class="language-selector-parent"> <div class="language-selector-parent" class:disabled aria-hidden={disabled}>
<div id="language-selector" class="selector button"> <div id="language-selector" class="selector button">
<div class="selector-info"> <div class="selector-info">
<h4 class="selector-title"> <h4 class="selector-title">
@ -34,6 +36,7 @@
id="setting-dropdown-appearance-language" id="setting-dropdown-appearance-language"
bind:value={$locale} bind:value={$locale}
on:change={() => updateLocale($locale)} on:change={() => updateLocale($locale)}
disabled={disabled}
> >
{#each $locales as value} {#each $locales as value}
<option {value} selected={currentSetting === value}> <option {value} selected={currentSetting === value}>
@ -53,6 +56,11 @@
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
overflow: hidden; overflow: hidden;
transition: opacity 0.2s;
}
.language-selector-parent.disabled {
opacity: 0.5;
} }
#language-selector { #language-selector {
@ -68,6 +76,10 @@
overflow: scroll; overflow: scroll;
} }
.disabled #language-selector {
pointer-events: none;
}
.selector-info { .selector-info {
height: 100%; height: 100%;
width: 100%; width: 100%;

2
web/src/routes/settings/general/appearance/+page.svelte
View file

@ -48,11 +48,11 @@
</SettingsCategory> </SettingsCategory>
<SettingsCategory sectionId="language" title={$t("settings.language")}> <SettingsCategory sectionId="language" title={$t("settings.language")}>
<LanguageDropdown />
<SettingsToggle <SettingsToggle
settingContext="appearance" settingContext="appearance"
settingId="autoLanguage" settingId="autoLanguage"
title={$t("settings.language.auto.title")} title={$t("settings.language.auto.title")}
description={$t("settings.language.auto.description")} description={$t("settings.language.auto.description")}
/> />
<LanguageDropdown />
</SettingsCategory> </SettingsCategory>