Fix toggle values for settings for translation

This commit is contained in:
Lim Chee Aun 2023-03-09 13:20:01 +08:00
parent bbdfb5dd7d
commit 731f91122b
2 changed files with 66 additions and 55 deletions

View file

@ -159,46 +159,55 @@ function Settings({ onClose }) {
type="checkbox"
checked={snapStates.settings.contentTranslation}
onChange={(e) => {
states.settings.contentTranslation = e.target.checked;
const { checked } = e.target;
states.settings.contentTranslation = checked;
if (!checked) {
states.settings.contentTranslationTargetLanguage = null;
}
}}
/>{' '}
Post translation
</label>
{snapStates.settings.contentTranslation && (
<div class="sub-section">
<label>
Translate to{' '}
<select
value={targetLanguage}
onChange={(e) => {
states.settings.contentTranslationTargetLanguage =
e.target.value || null;
}}
<div
class={`sub-section ${
!snapStates.settings.contentTranslation
? 'more-insignificant'
: ''
}`}
>
<label>
Translate to{' '}
<select
value={targetLanguage || ''}
disabled={!snapStates.settings.contentTranslation}
onChange={(e) => {
states.settings.contentTranslationTargetLanguage =
e.target.value || null;
}}
>
<option value="">
System language ({systemTargetLanguageText})
</option>
<option disabled></option>
{targetLanguages.map((lang) => (
<option value={lang.code}>{lang.name}</option>
))}
</select>
</label>
<p>
<small>
Note: This feature uses an external API to translate,
powered by{' '}
<a
href="https://github.com/thedaviddelta/lingva-translate"
target="_blank"
>
<option value="">
System language ({systemTargetLanguageText})
</option>
<option disabled></option>
{targetLanguages.map((lang) => (
<option value={lang.code}>{lang.name}</option>
))}
</select>
</label>
<p>
<small>
Note: This feature uses an external API to translate,
powered by{' '}
<a
href="https://github.com/thedaviddelta/lingva-translate"
target="_blank"
>
Lingva Translate
</a>
.
</small>
</p>
</div>
)}
Lingva Translate
</a>
.
</small>
</p>
</div>
</li>
<li>
<button

View file

@ -56,26 +56,28 @@ subscribeKey(states, 'notificationsLast', (v) => {
console.log('CHANGE', v);
store.account.set('notificationsLast', states.notificationsLast);
});
subscribe(states, (v) => {
console.debug('STATES change', v);
const [action, path, value, prevValue] = v[0];
if (path.join('.') === 'settings.boostsCarousel') {
store.account.set('settings-boostsCarousel', !!value);
}
if (path.join('.') === 'settings.shortcutsColumnsMode') {
store.account.set('settings-shortcutsColumnsMode', !!value);
}
if (path.join('.') === 'settings.shortcutsViewMode') {
store.account.set('settings-shortcutsViewMode', value);
}
if (path.join('.') === 'settings.contentTranslation') {
store.account.set('settings-contentTranslation', !!value);
}
if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
store.account.set('settings-contentTranslationTargetLanguage', value);
}
if (path?.[0] === 'shortcuts') {
store.account.set('shortcuts', states.shortcuts);
subscribe(states, (changes) => {
console.debug('STATES change', changes);
for (const [action, path, value, prevValue] of changes) {
if (path.join('.') === 'settings.boostsCarousel') {
store.account.set('settings-boostsCarousel', !!value);
}
if (path.join('.') === 'settings.shortcutsColumnsMode') {
store.account.set('settings-shortcutsColumnsMode', !!value);
}
if (path.join('.') === 'settings.shortcutsViewMode') {
store.account.set('settings-shortcutsViewMode', value);
}
if (path.join('.') === 'settings.contentTranslation') {
store.account.set('settings-contentTranslation', !!value);
}
if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
console.log('SET', value);
store.account.set('settings-contentTranslationTargetLanguage', value);
}
if (path?.[0] === 'shortcuts') {
store.account.set('shortcuts', states.shortcuts);
}
}
});