refs #151 Translate at preferences

src/config/locales/en/translation.json

@@ -60,5 +60,46 @@
       "placeholder": "Filter out by regular expressions",
       "apply": "Apply"
     }
+  },
+  "preferences": {
+    "title": "Preferences",
+    "general": {
+      "title": "General",
+      "appearance": "Appearance",
+      "theme_color": "Theme color:",
+      "white": "white",
+      "dark": "dark",
+      "font_size": "Font size:",
+      "display_style": {
+        "title": "Display style:",
+        "display_name_and_username": "Display name and username",
+        "display_name": "Display name",
+        "username": "Username"
+      },
+      "toot": "Toot",
+      "visibility": {
+        "title": "Default visibility:",
+        "public": "Public",
+        "unlisted": "Unlisted",
+        "private": "Private",
+        "direct": "Direct"
+      },
+      "sounds": "Sounds",
+      "fav_rb_sound": "Favoute and Boost:",
+      "toot_sound": "Toot:"
+    },
+    "account": {
+      "title": "Account",
+      "connected": "Connected Account",
+      "username": "Username",
+      "domain": "Domain",
+      "association": "Association",
+      "order": "Order",
+      "remove_association": "Remove assocication",
+      "remove_all_associations": "Remove all associations",
+      "confirm": "Confirm",
+      "cancel": "Cancel",
+      "confirm_message": "Are you sure to remove all associations?"
+    }
   }
 }

src/config/locales/ja/translation.json

@@ -60,5 +60,46 @@
       "placeholder": "正規表現でフィルター",
       "apply": "適用"
     }
+  },
+  "preferences": {
+    "title": "設定",
+    "general": {
+      "title": "一般",
+      "appearance": "外観",
+      "theme_color": "テーマカラー:",
+      "white": "標準",
+      "dark": "ダーク",
+      "font_size": "フォントサイズ:",
+      "display_style": {
+        "title": "ユーザ名の表示形式:",
+        "display_name_and_username": "表示名+ユーザー名",
+        "display_name": "表示名",
+        "username": "ユーザー名"
+      },
+      "toot": "トゥート",
+      "visibility": {
+        "title": "公開設定:",
+        "public": "公開",
+        "unlisted": "未収載",
+        "private": "フォロワー限定",
+        "direct": "ダイレクト"
+      },
+      "sounds": "効果音",
+      "fav_rb_sound": "お気に入り，ブースト時:",
+      "toot_sound": "トゥート時:"
+    },
+    "account": {
+      "title": "アカウント",
+      "connected": "登録済みアカウント",
+      "username": "ユーザー名",
+      "domain": "ドメイン名",
+      "association": "連携",
+      "order": "順序",
+      "remove_association": "連携を削除",
+      "remove_all_associations": "全ての連携を削除",
+      "confirm": "確認",
+      "cancel": "キャンセル",
+      "confirm_message": "本当に全ての連携を削除しますか？"
+    }
   }
 }

src/constants/visibility.js

@@ -1,18 +1,20 @@
+import i18n from '../config/i18n'
+
 export default {
   Public: {
-    name: 'public',
+    name: i18n.t('preferences.general.visibility.public'),
     value: 0
   },
   Unlisted: {
-    name: 'unlisted',
+    name: i18n.t('preferences.general.visibility.unlisted'),
     value: 1
   },
   Private: {
-    name: 'private',
+    name: i18n.t('preferences.general.visibility.private'),
     value: 2
   },
   Direct: {
-    name: 'direct',
+    name: i18n.t('preferences.general.visibility.direct'),
     value: 3
   }
 }

src/main/index.js

@@ -9,13 +9,13 @@ import simplayer from 'simplayer'
 import path from 'path'
 import ContextMenu from 'electron-context-menu'
 import * as Splashscreen from '@trodi/electron-splashscreen'
+import openAboutWindow from 'about-window'
 
 import Authentication from './auth'
 import Account from './account'
 import Streaming from './streaming'
 import Preferences from './preferences'
 import Hashtags from './hashtags'
-import ApplicationMenu from './menu'
 import i18n from '../config/i18n'
 
 /**
@@ -113,7 +113,7 @@ async function createWindow () {
   /**
    * Set application menu
    */
-  ApplicationMenu(mainWindow, accountsChange, i18n)
+  ApplicationMenu(accountsChange, i18n)
 
   /**
    * Set dock menu for mac
@@ -646,3 +646,166 @@ app.on('ready', () => {
  */
 
 class EmptyTokenError {}
+
+/**
+ * Set application menu
+ */
+const ApplicationMenu = (accountsChange, i18n) => {
+  /**
+   * For mac menu
+   */
+  const macGeneralMenu = process.platform !== 'darwin' ? [] : [
+    {
+      type: 'separator'
+    },
+    {
+      label: i18n.t('main_menu.application.services'),
+      role: 'services',
+      submenu: []
+    },
+    {
+      type: 'separator'
+    },
+    {
+      label: i18n.t('main_menu.application.hide'),
+      role: 'hide'
+    },
+    {
+      label: i18n.t('main_menu.application.hide_others'),
+      role: 'hideothers'
+    },
+    {
+      label: i18n.t('main_menu.application.show_all'),
+      role: 'unhide'
+    }
+  ]
+
+  const template = [
+    {
+      label: i18n.t('main_menu.application.name'),
+      submenu: [
+        {
+          label: i18n.t('main_menu.application.about'),
+          role: 'about',
+          click: () => {
+            openAboutWindow({
+              icon_path: path.resolve(__dirname, '../../build/icons/256x256.png'),
+              copyright: 'Copyright (c) 2018 AkiraFukushima',
+              package_json_dir: path.resolve(__dirname, '../../'),
+              open_devtools: process.env.NODE_ENV !== 'production'
+            })
+          }
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: i18n.t('main_menu.application.preferences'),
+          accelerator: 'CmdOrCtrl+,',
+          click: () => {
+            mainWindow.webContents.send('open-preferences')
+          }
+        },
+        ...macGeneralMenu,
+        {
+          type: 'separator'
+        },
+        {
+          label: i18n.t('main_menu.application.quit'),
+          accelerator: 'CmdOrCtrl+Q',
+          role: 'quit'
+        }
+      ]
+    },
+    {
+      label: i18n.t('main_menu.toot.name'),
+      submenu: [
+        {
+          label: i18n.t('main_menu.toot.new'),
+          accelerator: 'CmdOrCtrl+N',
+          click: () => {
+            mainWindow.webContents.send('CmdOrCtrl+N')
+          }
+        }
+      ]
+    },
+    {
+      label: i18n.t('main_menu.edit.name'),
+      submenu: [
+        {
+          label: i18n.t('main_menu.edit.undo'),
+          accelerator: 'CmdOrCtrl+Z',
+          role: 'undo'
+        },
+        {
+          label: i18n.t('main_menu.edit.redo'),
+          accelerator: 'Shift+CmdOrCtrl+Z',
+          role: 'redo'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: i18n.t('main_menu.edit.cut'),
+          accelerator: 'CmdOrCtrl+X',
+          role: 'cut'
+        },
+        {
+          label: i18n.t('main_menu.edit.copy'),
+          accelerator: 'CmdOrCtrl+C',
+          role: 'copy'
+        },
+        {
+          label: i18n.t('main_menu.edit.paste'),
+          accelerator: 'CmdOrCtrl+V',
+          role: 'paste'
+        },
+        {
+          label: i18n.t('main_menu.edit.select_all'),
+          accelerator: 'CmdOrCtrl+A',
+          role: 'selectall'
+        }
+      ]
+    },
+    {
+      label: i18n.t('main_menu.view.name'),
+      submenu: [
+        {
+          label: i18n.t('main_menu.view.toggle_full_screen'),
+          role: 'togglefullscreen'
+        }
+      ]
+    },
+    {
+      label: i18n.t('main_menu.window.name'),
+      submenu: [
+        {
+          label: i18n.t('main_menu.window.close'),
+          role: 'close'
+        },
+        {
+          label: i18n.t('main_menu.window.minimize'),
+          role: 'minimize'
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: i18n.t('main_menu.window.jump_to'),
+          accelerator: 'CmdOrCtrl+K',
+          enabled: true,
+          click: () => {
+            mainWindow.webContents.send('CmdOrCtrl+K')
+          }
+        },
+        {
+          type: 'separator'
+        },
+        ...accountsChange
+      ]
+    }
+  ]
+
+  const menu = Menu.buildFromTemplate(template)
+  Menu.setApplicationMenu(menu)
+}

src/main/menu.js

@@ -1,169 +0,0 @@
-import { Menu } from 'electron'
-import path from 'path'
-import openAboutWindow from 'about-window'
-
-/**
- * Set application menu
- */
-const ApplicationMenu = (mainWindow, accountsChange, i18n) => {
-  /**
-   * For mac menu
-   */
-
-  const macGeneralMenu = process.platform !== 'darwin' ? [] : [
-    {
-      type: 'separator'
-    },
-    {
-      label: i18n.t('main_menu.application.services'),
-      role: 'services',
-      submenu: []
-    },
-    {
-      type: 'separator'
-    },
-    {
-      label: i18n.t('main_menu.application.hide'),
-      role: 'hide'
-    },
-    {
-      label: i18n.t('main_menu.application.hide_others'),
-      role: 'hideothers'
-    },
-    {
-      label: i18n.t('main_menu.application.show_all'),
-      role: 'unhide'
-    }
-  ]
-
-  const template = [
-    {
-      label: i18n.t('main_menu.application.name'),
-      submenu: [
-        {
-          label: i18n.t('main_menu.application.about'),
-          role: 'about',
-          click: () => {
-            openAboutWindow({
-              icon_path: path.resolve(__dirname, '../../build/icons/256x256.png'),
-              copyright: 'Copyright (c) 2018 AkiraFukushima',
-              package_json_dir: path.resolve(__dirname, '../../'),
-              open_devtools: process.env.NODE_ENV !== 'production'
-            })
-          }
-        },
-        {
-          type: 'separator'
-        },
-        {
-          label: i18n.t('main_menu.application.preferences'),
-          accelerator: 'CmdOrCtrl+,',
-          click: () => {
-            mainWindow.webContents.send('open-preferences')
-          }
-        },
-        ...macGeneralMenu,
-        {
-          type: 'separator'
-        },
-        {
-          label: i18n.t('main_menu.application.quit'),
-          accelerator: 'CmdOrCtrl+Q',
-          role: 'quit'
-        }
-      ]
-    },
-    {
-      label: i18n.t('main_menu.toot.name'),
-      submenu: [
-        {
-          label: i18n.t('main_menu.toot.new'),
-          accelerator: 'CmdOrCtrl+N',
-          click: () => {
-            mainWindow.webContents.send('CmdOrCtrl+N')
-          }
-        }
-      ]
-    },
-    {
-      label: i18n.t('main_menu.edit.name'),
-      submenu: [
-        {
-          label: i18n.t('main_menu.edit.undo'),
-          accelerator: 'CmdOrCtrl+Z',
-          role: 'undo'
-        },
-        {
-          label: i18n.t('main_menu.edit.redo'),
-          accelerator: 'Shift+CmdOrCtrl+Z',
-          role: 'redo'
-        },
-        {
-          type: 'separator'
-        },
-        {
-          label: i18n.t('main_menu.edit.cut'),
-          accelerator: 'CmdOrCtrl+X',
-          role: 'cut'
-        },
-        {
-          label: i18n.t('main_menu.edit.copy'),
-          accelerator: 'CmdOrCtrl+C',
-          role: 'copy'
-        },
-        {
-          label: i18n.t('main_menu.edit.paste'),
-          accelerator: 'CmdOrCtrl+V',
-          role: 'paste'
-        },
-        {
-          label: i18n.t('main_menu.edit.select_all'),
-          accelerator: 'CmdOrCtrl+A',
-          role: 'selectall'
-        }
-      ]
-    },
-    {
-      label: i18n.t('main_menu.view.name'),
-      submenu: [
-        {
-          label: i18n.t('main_menu.view.toggle_full_screen'),
-          role: 'togglefullscreen'
-        }
-      ]
-    },
-    {
-      label: i18n.t('main_menu.window.name'),
-      submenu: [
-        {
-          label: i18n.t('main_menu.window.close'),
-          role: 'close'
-        },
-        {
-          label: i18n.t('main_menu.window.minimize'),
-          role: 'minimize'
-        },
-        {
-          type: 'separator'
-        },
-        {
-          label: i18n.t('main_menu.window.jump_to'),
-          accelerator: 'CmdOrCtrl+K',
-          enabled: true,
-          click: () => {
-            mainWindow.webContents.send('CmdOrCtrl+K')
-          }
-        },
-        {
-          type: 'separator'
-        },
-        ...accountsChange
-      ]
-    }
-  ]
-
-  const menu = Menu.buildFromTemplate(template)
-  Menu.setApplicationMenu(menu)
-}
-
-export default ApplicationMenu

src/renderer/components/Preferences.vue

@@ -3,7 +3,7 @@
     <el-header class="header">
       <el-row>
         <el-col :span="23">
-          <h3>Preferences</h3>
+          <h3>{{ $t('preferences.title') }}</h3>
         </el-col>
         <el-col :span="1">
           <el-button type="text" icon="el-icon-close" @click="close" class="close-button"></el-button>
@@ -20,11 +20,11 @@
           :route="true">
           <el-menu-item index="1" :route="{path: '/preferences/general'}" @click="general">
             <icon name="cog" class="icon" scale="1.3"></icon>
-            <span>General</span>
+            <span>{{ $t('preferences.general.title') }}</span>
           </el-menu-item>
           <el-menu-item index="2" :route="{path: '/preferences/account'}" @click="account">
             <icon name="user" class="icon" scale="1.3"></icon>
-            <span>Account</span>
+            <span>{{ $t('preferences.account.title') }}</span>
           </el-menu-item>
         </el-menu>
       </el-aside>

src/renderer/components/Preferences/Account.vue

@@ -1,8 +1,8 @@
 <template>
 <div id="account">
-  <h2>Account</h2>
+  <h2>{{ $t('preferences.account.title') }}</h2>
   <div class="connected-account">
-    <h3>Connected Accounts</h3>
+    <h3>{{ $t('preferences.account.connected') }}</h3>
     <template>
       <el-table
         :data="accounts"
@@ -12,24 +12,24 @@
         v-loading="accountLoading">
         <el-table-column
           prop="username"
-          label="Username">
+          :label="$t('preferences.account.username')">
         </el-table-column>
         <el-table-column
           prop="domain"
-          label="Domain">
+          :label="$t('preferences.account.domain')">
         </el-table-column>
         <el-table-column
-          label="Association">
+          :label="$t('preferences.account.association')">
           <template slot-scope="scope">
             <el-button
               @click.native.prevent="removeAccount(scope.$index, accounts)"
               type="text">
-              <i class="el-icon-close"></i> Remove association
+              <i class="el-icon-close"></i> {{ $t('preferences.account.remove_association') }}
             </el-button>
           </template>
         </el-table-column>
         <el-table-column
-          label="Order"
+          :label="$t('preferences.account.order')"
           width="60">
           <template slot-scope="scope">
             <div>
@@ -48,12 +48,12 @@
       placement="top"
       width="160"
       v-model="deletePopoverVisible">
-      <p>Are you sure to remove all associations?</p>
+      <p>{{ $t('preferences.account.confirm_message') }}</p>
       <div style="text-align: right; margin: 0">
-        <el-button size="mini" type="text" @click="deletePopoverVisible = false">cancel</el-button>
-        <el-button type="danger" size="mini" @click="removeAllAssociations">confirm</el-button>
+        <el-button size="mini" type="text" @click="deletePopoverVisible = false">{{ $t('preferences.account.cancel') }}</el-button>
+        <el-button type="danger" size="mini" @click="removeAllAssociations">{{ $t('preferences.account.confirm') }}</el-button>
       </div>
-      <el-button slot="reference" type="danger">Remove all associations</el-button>
+      <el-button slot="reference" type="danger">{{ $t('preferences.account.remove_all_associations') }}</el-button>
     </el-popover>
   </div>
 </div>

src/renderer/components/Preferences/General.vue

@@ -1,25 +1,25 @@
 <template>
 <div id="general" v-loading="loading">
-  <h2>General</h2>
+  <h2>{{ $t('preferences.general.title') }}</h2>
   <div class="appearance">
-    <h3>Appearance</h3>
+    <h3>{{ $t('preferences.general.appearance') }}</h3>
     <table class="theme">
       <tbody>
         <tr>
-          <td class="title">Theme color:</td>
+          <td class="title">{{ $t('preferences.general.theme_color') }}</td>
           <td class="status">
-            <el-radio v-model="theme" label="white">White</el-radio>
-            <el-radio v-model="theme" label="dark">Dark</el-radio>
+            <el-radio v-model="theme" label="white">{{ $t('preferences.general.white') }}</el-radio>
+            <el-radio v-model="theme" label="dark">{{ $t('preferences.general.dark') }}</el-radio>
           </td>
         </tr>
         <tr>
-          <td class="title">Font size:</td>
+          <td class="title">{{ $t('preferences.general.font_size') }}</td>
           <td class="status">
             <el-input-number :value="fontSize" :min="9" :max="18" @change="updateFontSize"></el-input-number>
           </td>
         </tr>
         <tr>
-          <td class="title">Display name style:</td>
+          <td class="title">{{ $t('preferences.general.display_style.title') }}</td>
           <td class="status">
             <el-select v-model="displayNameStyle" placeholder="style">
               <el-option
@@ -35,11 +35,11 @@
     </table>
   </div>
   <div class="toot">
-    <h3>Toot</h3>
+    <h3>{{ $t('preferences.general.toot') }}</h3>
     <table>
       <tbody>
         <tr>
-          <td class="title">Default Visibility:</td>
+          <td class="title">{{ $t('preferences.general.visibility.title') }}</td>
           <td class="status">
             <el-select v-model="tootVisibility" placeholder="visibility">
               <el-option
@@ -55,11 +55,11 @@
     </table>
   </div>
   <div class="sounds">
-    <h3>Sounds</h3>
+    <h3>{{ $t('preferences.general.sounds') }}</h3>
     <table>
       <tbody>
         <tr>
-          <td class="title">Favourite, Reblog action sound:</td>
+          <td class="title">{{ $t('preferences.general.fav_rb_sound') }}</td>
           <td class="status">
             <el-switch
               v-model="sound_fav_rb"
@@ -68,7 +68,7 @@
           </td>
         </tr>
         <tr>
-          <td class="title">Toot action sound:</td>
+          <td class="title">{{ $t('preferences.general.toot_sound') }}</td>
           <td class="status">
             <el-switch
               v-model="sound_toot"
@@ -90,20 +90,6 @@ export default {
   name: 'general',
   data () {
     return {
-      nameStyles: [
-        {
-          name: 'DisplayName and username',
-          value: 0
-        },
-        {
-          name: 'DisplayName',
-          value: 1
-        },
-        {
-          name: 'username',
-          value: 2
-        }
-      ],
       visibilities: [
         Visibility.Public,
         Visibility.Unlisted,
@@ -159,6 +145,24 @@ export default {
           toot: value
         })
       }
+    },
+    nameStyles: {
+      get () {
+        return [
+          {
+            name: this.$t('preferences.general.display_style.display_name_and_username'),
+            value: 0
+          },
+          {
+            name: this.$t('preferences.general.display_style.display_name'),
+            value: 1
+          },
+          {
+            name: this.$t('preferences.general.display_style.username'),
+            value: 2
+          }
+        ]
+      }
     }
   },
   created () {