this repo has no description
Make auto inline translation as a setting, turned off by default
+67
-36
+3
src/pages/settings.css
+3
src/pages/settings.css
+59
-36
src/pages/settings.jsx
+59
-36
src/pages/settings.jsx
···
255
255
: ''
256
256
}`}
257
257
>
258
-
<label>
259
-
Translate to{' '}
260
-
<select
261
-
value={targetLanguage || ''}
262
-
disabled={!snapStates.settings.contentTranslation}
263
-
onChange={(e) => {
264
-
states.settings.contentTranslationTargetLanguage =
265
-
e.target.value || null;
266
-
}}
267
-
>
268
-
<option value="">
269
-
System language ({systemTargetLanguageText})
270
-
</option>
271
-
<option disabled>──────────</option>
272
-
{targetLanguages.map((lang) => (
273
-
<option value={lang.code}>{lang.name}</option>
274
-
))}
275
-
</select>
276
-
</label>
258
+
<div>
259
+
<label>
260
+
Translate to{' '}
261
+
<select
262
+
value={targetLanguage || ''}
263
+
disabled={!snapStates.settings.contentTranslation}
264
+
onChange={(e) => {
265
+
states.settings.contentTranslationTargetLanguage =
266
+
e.target.value || null;
267
+
}}
268
+
>
269
+
<option value="">
270
+
System language ({systemTargetLanguageText})
271
+
</option>
272
+
<option disabled>──────────</option>
273
+
{targetLanguages.map((lang) => (
274
+
<option value={lang.code}>{lang.name}</option>
275
+
))}
276
+
</select>
277
+
</label>
278
+
</div>
279
+
<hr />
277
280
<p class="checkbox-fieldset">
278
-
<small>
279
-
Hide "Translate" button for
280
-
{snapStates.settings.contentTranslationHideLanguages
281
-
.length > 0 && (
282
-
<>
283
-
{' '}
284
-
(
285
-
{
286
-
snapStates.settings.contentTranslationHideLanguages
287
-
.length
288
-
}
289
-
)
290
-
</>
291
-
)}
292
-
:
293
-
</small>
281
+
Hide "Translate" button for
282
+
{snapStates.settings.contentTranslationHideLanguages.length >
283
+
0 && (
284
+
<>
285
+
{' '}
286
+
(
287
+
{
288
+
snapStates.settings.contentTranslationHideLanguages
289
+
.length
290
+
}
291
+
)
292
+
</>
293
+
)}
294
+
:
294
295
<div class="checkbox-fields">
295
296
{targetLanguages.map((lang) => (
296
297
<label>
···
318
319
))}
319
320
</div>
320
321
</p>
321
-
<p>
322
+
<p class="insignificant">
322
323
<small>
323
324
Note: This feature uses an external API to translate,
324
325
powered by{' '}
···
331
332
.
332
333
</small>
333
334
</p>
335
+
<hr />
336
+
<div>
337
+
<label>
338
+
<input
339
+
type="checkbox"
340
+
checked={snapStates.settings.contentTranslationAutoInline}
341
+
disabled={!snapStates.settings.contentTranslation}
342
+
onChange={(e) => {
343
+
states.settings.contentTranslationAutoInline =
344
+
e.target.checked;
345
+
}}
346
+
/>{' '}
347
+
Auto inline translation
348
+
</label>
349
+
<p class="insignificant">
350
+
<small>
351
+
Automatically show translation for posts in timeline. Only
352
+
works for <b>short</b> posts without content warning,
353
+
media and poll.
354
+
</small>
355
+
</p>
356
+
</div>
334
357
</div>
335
358
</li>
336
359
<li>
+5
src/utils/states.js
+5
src/utils/states.js
···
52
52
store.account.get('settings-contentTranslationTargetLanguage') || null,
53
53
contentTranslationHideLanguages:
54
54
store.account.get('settings-contentTranslationHideLanguages') || [],
55
+
contentTranslationAutoInline:
56
+
store.account.get('settings-contentTranslationAutoInline') ?? false,
55
57
cloakMode: store.account.get('settings-cloakMode') ?? false,
56
58
},
57
59
});
···
79
81
}
80
82
if (path.join('.') === 'settings.contentTranslation') {
81
83
store.account.set('settings-contentTranslation', !!value);
84
+
}
85
+
if (path.join('.') === 'settings.contentTranslationAutoInline') {
86
+
store.account.set('settings-contentTranslationAutoInline', !!value);
82
87
}
83
88
if (path.join('.') === 'settings.contentTranslationTargetLanguage') {
84
89
console.log('SET', value);