Make interface language configurable from settings

The locale can now be configured in settings and is stored in
Vuex. The changes are applied immidiately after selection. The list of
languages is taken from the messages file, which contains all the
available locales (and a new value, `interfaceLanguage`, to control
the translation of this option in the options menu)

Closes #36
This commit is contained in:
Ekaterina Vaartis 2018-08-25 13:12:33 +03:00
parent 30a6b7be5b
commit c1e4bfa90f
9 changed files with 64 additions and 5 deletions

View file

@ -63,6 +63,7 @@
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"inject-loader": "^2.0.1",
"iso-639-1": "^2.0.3",
"isparta-loader": "^2.0.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",

View file

@ -20,6 +20,10 @@ export default {
data: () => ({
mobileActivePanel: 'timeline'
}),
created () {
// Load the locale from the storage
this.$i18n.locale = this.$store.state.config.interfaceLanguage
},
computed: {
currentUser () { return this.$store.state.users.currentUser },
background () {

View file

@ -0,0 +1,38 @@
<template>
<div>
<label for="interface-language-switcher" class='select'>
<select id="interface-language-switcher" v-model="language">
<option v-for="(langCode, i) in languageCodes" :value="langCode">
{{ languageNames[i] }}
</option>
</select>
<i class="icon-down-open"/>
</label>
</div>
</template>
<script>
import languagesObject from '../../i18n/messages'
import ISO6391 from 'iso-639-1'
import _ from 'lodash'
export default {
computed: {
languageCodes () {
return Object.keys(languagesObject)
},
languageNames () {
return _.map(this.languageCodes, ISO6391.getName)
},
language: {
get: function () { return this.$store.state.config.interfaceLanguage },
set: function (val) {
this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
this.$i18n.locale = val
}
}
}
}
</script>

View file

@ -1,5 +1,6 @@
/* eslint-env browser */
import StyleSwitcher from '../style_switcher/style_switcher.vue'
import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue'
import { filter, trim } from 'lodash'
const settings = {
@ -28,7 +29,8 @@ const settings = {
}
},
components: {
StyleSwitcher
StyleSwitcher,
InterfaceLanguageSwitcher
},
computed: {
user () {

View file

@ -84,6 +84,10 @@
</li>
</ul>
</div>
<div class="setting-item">
<h2>{{ $t('settings.interfaceLanguage') }}</h2>
<interface-language-switcher />
</div>
</div>
</div>
</template>

View file

@ -350,7 +350,8 @@ const en = {
default_vis: 'Default visibility scope',
profile_tab: 'Profile',
security_tab: 'Security',
data_import_export_tab: 'Data Import / Export'
data_import_export_tab: 'Data Import / Export',
interfaceLanguage: 'Interface language'
},
notifications: {
notifications: 'Notifications',
@ -1689,7 +1690,8 @@ const ru = {
profile_tab: 'Профиль',
security_tab: 'Безопасность',
data_import_export_tab: 'Импорт / Экспорт данных',
collapse_subject: 'Сворачивать посты с темой'
collapse_subject: 'Сворачивать посты с темой',
interfaceLanguage: 'Язык интерфейса'
},
notifications: {
notifications: 'Уведомления',

View file

@ -60,6 +60,7 @@ const persistedStateOptions = {
'config.loopVideoSilentOnly',
'config.pauseOnUnfocused',
'config.stopGifs',
'config.interfaceLanguage',
'users.lastLoginName',
'statuses.notifications.maxSavedId'
]
@ -79,6 +80,7 @@ const store = new Vuex.Store({
})
const i18n = new VueI18n({
// By default, use the browser locale, we will update it if neccessary
locale: currentLocale,
fallbackLocale: 'en',
messages
@ -201,4 +203,3 @@ window.fetch('/nodeinfo/2.0.json')
store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web })
})

View file

@ -1,6 +1,8 @@
import { set, delete as del } from 'vue'
import StyleSetter from '../services/style_setter/style_setter.js'
const browserLocale = (window.navigator.language || 'en').split('-')[0]
const defaultState = {
name: 'Pleroma FE',
colors: {},
@ -17,7 +19,8 @@ const defaultState = {
stopGifs: false,
replyVisibility: 'all',
muteWords: [],
highlight: {}
highlight: {},
interfaceLanguage: browserLocale
}
const config = {

View file

@ -3081,6 +3081,10 @@ isexe@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
iso-639-1@^2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/iso-639-1/-/iso-639-1-2.0.3.tgz#72dd3448ac5629c271628c5ac566369428d6ccd0"
isobject@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-2.1.0.tgz#f065561096a3f1da2ef46272f815c840d87e0c89"