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" type="checkbox"
checked={snapStates.settings.contentTranslation} checked={snapStates.settings.contentTranslation}
onChange={(e) => { onChange={(e) => {
states.settings.contentTranslation = e.target.checked; const { checked } = e.target;
states.settings.contentTranslation = checked;
if (!checked) {
states.settings.contentTranslationTargetLanguage = null;
}
}} }}
/>{' '} />{' '}
Post translation Post translation
</label> </label>
{snapStates.settings.contentTranslation && ( <div
<div class="sub-section"> class={`sub-section ${
<label> !snapStates.settings.contentTranslation
Translate to{' '} ? 'more-insignificant'
<select : ''
value={targetLanguage} }`}
onChange={(e) => { >
states.settings.contentTranslationTargetLanguage = <label>
e.target.value || null; 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=""> Lingva Translate
System language ({systemTargetLanguageText}) </a>
</option> .
<option disabled></option> </small>
{targetLanguages.map((lang) => ( </p>
<option value={lang.code}>{lang.name}</option> </div>
))}
</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>
)}
</li> </li>
<li> <li>
<button <button

View file

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