diff --git a/front/src/App.vue b/front/src/App.vue index 0d66cfc9ab1cf18e5dcd25603d57a1ce13ce9a3f..6efd3e582184af778b4a18459cd1734862437b1d 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -57,6 +57,18 @@ <translate>The funkwhale logo was kindly designed and provided by Francis Gading.</translate> </p> </div> + <div class="three wide column"> + <h4 v-translate class="ui header">Options</h4> + <div class="ui form"> + <div class="ui field"> + <label>{{Â $gettext('Change language') }}</label> + <select class="ui dropdown" v-model="$language.current"> + <option v-for="(language, key) in $language.available" :value="key">{{ language }}</option> + </select> + </div> + </div> + </div> + </div> </div> </div> @@ -144,6 +156,9 @@ export default { '$store.state.instance.instanceUrl' () { this.$store.dispatch('instance/fetchSettings') this.fetchNodeInfo() + }, + '$language.current' (newValue) { + this.$store.commit('ui/currentLanguage', newValue) } } } diff --git a/front/src/main.js b/front/src/main.js index b4522eb23f09751d4512e50035a0cb3b94e52963..d656bda99105cd74f3a7b1923f452e7037b54b55 100644 --- a/front/src/main.js +++ b/front/src/main.js @@ -32,16 +32,20 @@ window.$ = window.jQuery = require('jquery') // require('./semantic/semantic.css') require('semantic-ui-css/semantic.js') require('masonry-layout') - +let availableLanguages = (function () { + let l = {} + locales.locales.forEach(c => { + l[c.code] = c.label + }) + return l +})() +let defaultLanguage = 'en_US' +if (availableLanguages[store.state.ui.currentLanguage]) { + defaultLanguage = store.state.ui.currentLanguage +} Vue.use(GetTextPlugin, { - availableLanguages: (function () { - let l = {} - locales.locales.forEach(c => { - l[c.code] = c.label - }) - return l - })(), - defaultLanguage: 'en_US', + availableLanguages: availableLanguages, + defaultLanguage: defaultLanguage, languageVmMixin: { computed: { currentKebabCase: function () { diff --git a/front/src/store/index.js b/front/src/store/index.js index 0c2908d83d5cceee72997111f099aeda555d2337..46075d84756137bc5bb5be7c4b2cf8be2708d33a 100644 --- a/front/src/store/index.js +++ b/front/src/store/index.js @@ -36,6 +36,10 @@ export default new Vuex.Store({ key: 'instance', paths: ['instance.events', 'instance.instanceUrl'] }), + createPersistedState({ + key: 'ui', + paths: ['ui.currentLanguage'] + }), createPersistedState({ key: 'radios', paths: ['radios'], diff --git a/front/src/store/ui.js b/front/src/store/ui.js index c336803475c5c6c79776e501dd94a8884a9198c6..6641f4c0dec891c0d7f75fa26e3e974c135b38e7 100644 --- a/front/src/store/ui.js +++ b/front/src/store/ui.js @@ -3,6 +3,7 @@ import axios from 'axios' export default { namespaced: true, state: { + currentLanguage: 'en_US', lastDate: new Date(), maxMessages: 100, messageDisplayDuration: 10000, @@ -13,6 +14,9 @@ export default { } }, mutations: { + currentLanguage: (state, value) => { + state.currentLanguage = value + }, computeLastDate: (state) => { state.lastDate = new Date() },