refs #151 Switch language in preferences

src/config/locales/en/translation.json

@@ -102,6 +102,10 @@
       "confirm": "Confirm",
       "cancel": "Cancel",
       "confirm_message": "Are you sure to remove all associations?"
+    },
+    "language": {
+      "title": "Language",
+      "display_language": "language"
     }
   },
   "modals": {

src/config/locales/ja/translation.json

@@ -102,6 +102,10 @@
       "confirm": "確認",
       "cancel": "キャンセル",
       "confirm_message": "本当に全ての連携を削除しますか？"
+    },
+    "language": {
+      "title": "言語",
+      "display_language": "表示言語"
     }
   },
   "modals": {

src/constants/language.js

@@ -0,0 +1,10 @@
+export default {
+  en: {
+    name: 'English',
+    key: 'en'
+  },
+  ja: {
+    name: '日本語',
+    key: 'ja'
+  }
+}

src/main/index.js

@@ -17,6 +17,7 @@ import Streaming from './streaming'
 import Preferences from './preferences'
 import Hashtags from './hashtags'
 import i18n from '../config/i18n'
+import Language from '../constants/language'
 
 /**
  * Context menu
@@ -96,6 +97,16 @@ async function changeAccount (account, index) {
   }
 }
 
+async function getLanguage () {
+  try {
+    const preferences = new Preferences(preferencesDBPath)
+    const conf = await preferences.load()
+    return conf.language.language
+  } catch (err) {
+    return Language.en.key
+  }
+}
+
 async function createWindow () {
   /**
    * List accounts
@@ -109,6 +120,12 @@ async function createWindow () {
     }
   })
 
+  /**
+   * Get language
+   */
+  const language = await getLanguage()
+  i18n.changeLanguage(language)
+
   /**
    * Set application menu
    */
@@ -593,6 +610,20 @@ ipcMain.on('get-collapse', (event, _) => {
     })
 })
 
+ipcMain.on('change-language', (event, value) => {
+  const preferences = new Preferences(preferencesDBPath)
+  preferences.update(
+    {
+      language: {
+        language: value
+      }
+    })
+    .then((conf) => {
+      i18n.changeLanguage(conf.language.language)
+      event.sender.send('response-change-language', conf.language.language)
+    })
+})
+
 // hashtag
 ipcMain.on('save-hashtag', (event, tag) => {
   const hashtags = new Hashtags(hashtagsDB)

src/main/preferences.js

@@ -3,6 +3,7 @@ import objectAssignDeep from 'object-assign-deep'
 import Visibility from '../constants/visibility'
 import DisplayStyle from '../constants/displayStyle'
 import Theme from '../constants/theme'
+import Language from '../constants/language'
 
 const Base = {
   general: {
@@ -17,6 +18,9 @@ const Base = {
   },
   state: {
     collapse: false
+  },
+  language: {
+    language: Language.en.key
   }
 }
 

src/renderer/App.vue

@@ -31,6 +31,9 @@ export default {
   created () {
     this.$store.dispatch('App/watchShortcutsEvents')
     this.$store.dispatch('App/loadPreferences')
+      .then((conf) => {
+        this.$i18n.i18next.changeLanguage(conf.language.language)
+      })
   },
   destroyed () {
     this.$store.dispatch('App/removeShortcutsEvents')

src/renderer/components/Preferences.vue

@@ -26,6 +26,10 @@
             <icon name="user" class="icon" scale="1.3"></icon>
             <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
+          <el-menu-item index="3" :route="{path: '/preferences/language'}" @click="language">
+            <icon name="language" class="icon" scale="1.3"></icon>
+            <span>{{ $t('preferences.language.title') }}</span>
+          </el-menu-item>
         </el-menu>
       </el-aside>
       <el-main>
@@ -56,6 +60,9 @@ export default {
     },
     account () {
       this.$router.push('/preferences/account')
+    },
+    language () {
+      this.$router.push('/preferences/language')
     }
   }
 }

src/renderer/components/Preferences/Language.vue

@@ -0,0 +1,75 @@
+<template>
+<div id="language">
+  <h2>{{ $t('preferences.language.title') }}</h2>
+  <div class="display-language">
+    <table class="language">
+      <tbody>
+        <tr>
+          <td class="title">{{ $t('preferences.language.display_language') }}</td>
+          <td class="status">
+            <el-select v-model="displayLanguage" placeholder="style">
+              <el-option
+                v-for="lang in languages"
+                :key="lang.key"
+                :label="lang.name"
+                :value="lang.key">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+</template>
+
+<script>
+import Language from '~/src/constants/language'
+
+export default {
+  name: 'language',
+  data () {
+    return {
+      languages: [
+        Language.en,
+        Language.ja
+      ]
+    }
+  },
+  computed: {
+    displayLanguage: {
+      get () {
+        return this.$store.state.Preferences.Language.language.language
+      },
+      set (value) {
+        return this.$store.dispatch('Preferences/Language/changeLanguage', value)
+      }
+    }
+  },
+  created () {
+    this.$store.dispatch('Preferences/Language/loadLanguage')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#language {
+  table {
+    width: 100%;
+  }
+
+  td {
+    padding: 16px 0;
+  }
+
+  .title {
+    text-align: right;
+    width: 50%;
+  }
+
+  .status {
+    width: 50%;
+    text-align: center;
+  }
+}
+</style>

src/renderer/router/index.js

@@ -30,6 +30,11 @@ export default new Router({
           path: 'account',
           name: 'account',
           component: require('@/components/Preferences/Account').default
+        },
+        {
+          path: 'language',
+          name: 'language',
+          component: require('@/components/Preferences/Language').default
         }
       ]
     },

src/renderer/store/App.js

@@ -44,15 +44,19 @@ const App = {
       ipcRenderer.removeAllListeners('open-preferences')
     },
     loadPreferences ({ commit }) {
-      ipcRenderer.send('get-preferences')
-      ipcRenderer.once('error-get-preferences', (event, err) => {
-        ipcRenderer.removeAllListeners('response-get-preferences')
-      })
-      ipcRenderer.once('response-get-preferences', (event, conf) => {
-        ipcRenderer.removeAllListeners('error-get-preferences')
-        commit('updateTheme', conf.general.theme)
-        commit('updateDisplayNameStyle', conf.general.displayNameStyle)
-        commit('updateFontSize', conf.general.fontSize)
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-preferences')
+        ipcRenderer.once('error-get-preferences', (event, err) => {
+          ipcRenderer.removeAllListeners('response-get-preferences')
+          reject(err)
+        })
+        ipcRenderer.once('response-get-preferences', (event, conf) => {
+          ipcRenderer.removeAllListeners('error-get-preferences')
+          commit('updateTheme', conf.general.theme)
+          commit('updateDisplayNameStyle', conf.general.displayNameStyle)
+          commit('updateFontSize', conf.general.fontSize)
+          resolve(conf)
+        })
       })
     }
   }

src/renderer/store/Preferences.js

@@ -1,11 +1,13 @@
 import General from './Preferences/General'
 import Account from './Preferences/Account'
+import Language from './Preferences/Language'
 
 const Preferences = {
   namespaced: true,
   modules: {
     General,
-    Account
+    Account,
+    Language
   },
   state: {
     defaultActive: '1'

src/renderer/store/Preferences/Language.js

@@ -0,0 +1,41 @@
+import { ipcRenderer } from 'electron'
+import Language from '~/src/constants/language'
+
+export default {
+  namespaced: true,
+  state: {
+    language: {
+      language: Language.en.key
+    }
+  },
+  mutations: {
+    updateLanguage (state, conf) {
+      state.language = conf
+    },
+    changeLanguage (state, key) {
+      state.language.language = key
+    }
+  },
+  actions: {
+    loadLanguage ({ commit }) {
+      return new Promise((resolve, reject) => {
+        ipcRenderer.send('get-preferences')
+        ipcRenderer.once('error-get-preferences', (event, err) => {
+          ipcRenderer.removeAllListeners('response-get-preferences')
+          reject(err)
+        })
+        ipcRenderer.once('response-get-preferences', (event, conf) => {
+          ipcRenderer.removeAllListeners('error-get-preferences')
+          commit('updateLanguage', conf.language)
+          resolve(conf)
+        })
+      })
+    },
+    changeLanguage ({ commit }, key) {
+      ipcRenderer.send('change-language', key)
+      ipcRenderer.once('response-change-language', (event, value) => {
+        commit('changeLanguage', value)
+      })
+    }
+  }
+}