diff --git a/app/soapbox/__fixtures__/intlMessages.json b/app/soapbox/__fixtures__/intlMessages.json index a8217149e..9132feaee 100644 --- a/app/soapbox/__fixtures__/intlMessages.json +++ b/app/soapbox/__fixtures__/intlMessages.json @@ -323,7 +323,10 @@ "preferences.fields.demetricator_label": "Use Demetricator", "preferences.fields.dyslexic_font_label": "Dyslexic mode", "preferences.fields.expand_spoilers_label": "Always expand posts marked with content warnings", - "preferences.fields.language_label": "Language", + "preferences.fields.language_label": "Interface language", + "preferences.fields.language_hint": "The language of the user interface, e-mails and push notifications", + "preferences.fields.post_language_label": "Posting language", + "preferences.fields.post_language_hint": "The language of your posts cannot currently be detected automatically", "preferences.fields.privacy_label": "Post privacy", "preferences.fields.reduce_motion_label": "Reduce motion in animations", "preferences.fields.system_font_label": "Use system\"s default font", diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index a2b5c0f85..3d35ea8f6 100644 --- a/app/soapbox/actions/compose.js +++ b/app/soapbox/actions/compose.js @@ -178,6 +178,7 @@ export function submitCompose(routerHistory, group) { visibility: getState().getIn(['compose', 'privacy']), content_type: getState().getIn(['compose', 'content_type']), poll: getState().getIn(['compose', 'poll'], null), + language: getState().getIn(['settings', 'posting_language'], null), group_id: group ? group.get('id') : null, }, { headers: { diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index 0c2f35a8b..312103517 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -22,6 +22,7 @@ const defaultSettings = ImmutableMap({ defaultPrivacy: 'public', themeMode: 'light', locale: navigator.language.split(/[-_]/)[0] || 'en', + posting_language: navigator.language.split(/[-_]/)[0] || '', explanationBox: true, systemFont: false, diff --git a/app/soapbox/features/forms/index.js b/app/soapbox/features/forms/index.js index 75feac6d4..8928734b6 100644 --- a/app/soapbox/features/forms/index.js +++ b/app/soapbox/features/forms/index.js @@ -193,10 +193,11 @@ export class SelectDropdown extends ImmutablePureComponent { static propTypes = { label: FormPropTypes.label, items: PropTypes.object.isRequired, + hint: PropTypes.node, } render() { - const { label, items, ...props } = this.props; + const { label, items, hint, ...props } = this.props; const optionElems = Object.keys(items).map(item => ( @@ -205,7 +206,9 @@ export class SelectDropdown extends ImmutablePureComponent { const selectElem = ; return label ? ( - {selectElem} + {selectElem} + {hint && {hint}} + ) : selectElem; } diff --git a/app/soapbox/features/preferences/index.js b/app/soapbox/features/preferences/index.js index 80a49a7b7..0a9cde4e2 100644 --- a/app/soapbox/features/preferences/index.js +++ b/app/soapbox/features/preferences/index.js @@ -113,12 +113,22 @@ class Preferences extends ImmutablePureComponent { - } - items={languages} - defaultValue={settings.get('locale')} - onChange={this.onSelectChange(['locale'])} - /> +
+ } + hint={} + items={languages} + defaultValue={settings.get('locale')} + onChange={this.onSelectChange(['locale'])} + /> + } + hint={} + items={languages} + defaultValue={settings.get('posting_language')} + onChange={this.onSelectChange(['posting_language'])} + /> +
diff --git a/app/styles/application.scss b/app/styles/application.scss index bb3d0ca82..8ae479b28 100644 --- a/app/styles/application.scss +++ b/app/styles/application.scss @@ -71,3 +71,4 @@ @import 'components/error-boundary'; @import 'components/video-player'; @import 'components/audio-player'; +@import 'components/language-preferences'; diff --git a/app/styles/components/language-preferences.scss b/app/styles/components/language-preferences.scss new file mode 100644 index 000000000..d3384befb --- /dev/null +++ b/app/styles/components/language-preferences.scss @@ -0,0 +1,10 @@ +.select-languages__container { + display: flex; + flex-direction: row; + justify-content: space-around; + + .label_input { + width: 50%; + padding-right: 20px; + } +}