feat(ui): localization of cli-ui (#987)

Author: kazupon

packages/@vue/cli-ui/package.json

@@ -29,6 +29,7 @@
     "subscriptions-transport-ws": "^0.9.5",
     "vue": "^2.5.13",
     "vue-apollo": "^3.0.0-beta.5",
+    "vue-i18n": "^7.6.0",
     "vue-instantsearch": "^1.5.1",
     "vue-router": "^3.0.1",
     "xterm": "^3.2.0"

packages/@vue/cli-ui/src/components/FolderExplorer.vue

@@ -9,15 +9,15 @@
       <VueButton
         class="icon-button"
         icon-left="keyboard_arrow_up"
-        v-tooltip="'Open parent folder'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.parent-folder')"
         @click="openParentFolder"
       />
 
       <div v-if="editingPath" class="path-edit">
         <VueInput
           ref="pathInput"
           v-model="editedPath"
-          placeholder="Enter the full path to a folder"
+          :placeholder="$t('components.folder-explorer.toolbar.placeholder')"
           icon-left="edit"
           @keyup.esc="editingPath = false"
           @keyup.enter="submitPathEdit()"
@@ -28,7 +28,7 @@
         v-else
         :query="require('@/graphql/cwd.gql')"
         class="current-path"
-        v-tooltip="'Edit path'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.edit-path')"
         @click.native="openPathEdit()"
       >
         <ApolloSubscribeToMore
@@ -50,7 +50,7 @@
       <VueButton
         class="icon-button favorite-button"
         :icon-left="folderCurrent.favorite ? 'star' : 'star_border'"
-        v-tooltip="'Toggle favorite'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite')"
         @click="toggleFavorite()"
       />
 
@@ -61,7 +61,7 @@
           slot="trigger"
           icon-left="arrow_drop_down"
           class="icon-button"
-          v-tooltip="'Favorite folders'"
+          v-tooltip="$t('components.folder-explorer.toolbar.tooltips.favorite-folders')"
         />
 
         <template v-if="foldersFavorite.length">
@@ -75,14 +75,14 @@
         </template>
 
         <div v-else class="vue-ui-empty">
-          No favorite folders yet.
+          {{ $t('components.folder-explorer.toolbar.empty') }}
         </div>
       </VueDropdown>
 
       <VueButton
         class="icon-button"
         icon-left="refresh"
-        v-tooltip="'Refresh'"
+        v-tooltip="$t('components.folder-explorer.toolbar.tooltips.refresh')"
         @click="refreshFolder"
       />
     </div>

packages/@vue/cli-ui/src/components/InstantSearchInput.vue

@@ -5,7 +5,7 @@
       icon-left="search"
       v-model="query"
       class="big"
-      placeholder="Search a plugin"
+      :placeholder="$t('components.instant-search-input.placeholder')"
     >
       <template slot="right">
         <VueButton

packages/@vue/cli-ui/src/components/ListItemInfo.vue

@@ -22,7 +22,7 @@
         @click.stop="() => {}"
       >
         <VueIcon icon="open_in_new" class="medium top"/>
-        More info
+        {{ $t('components.list-item-info.more-info') }}
       </a>
     </div>
   </div>

packages/@vue/cli-ui/src/components/LoggerView.vue

@@ -5,12 +5,12 @@
         icon="dvr"
       />
       <div class="title">
-        Logs
+        {{ $t('components.logger-view.title') }}
       </div>
       <VueButton
         class="icon-button"
         icon-left="delete_forever"
-        v-tooltip="'Clear logs'"
+        v-tooltip="$t('components.logger-view.buttons.clear')"
         @click="clearLogs()"
       />
       <VueIcon
@@ -20,13 +20,13 @@
       <VueButton
         class="icon-button"
         icon-left="subdirectory_arrow_left"
-        v-tooltip="'Scroll to bottom'"
+        v-tooltip="$t('components.logger-view.buttons.scroll')"
         @click="scrollToBottom()"
       />
       <VueButton
         class="icon-button"
         icon-left="close"
-        v-tooltip="'Close'"
+        v-tooltip="$t('components.logger-view.buttons.close')"
         @click="close()"
       />
     </div>
@@ -56,7 +56,7 @@
             class="vue-ui-empty"
           >
             <VueIcon icon="wifi" class="large"/>
-            <div>No logs yet</div>
+            <div>{{ $t('components.logger-view.empty') }}</div>
           </div>
         </template>
       </template>

packages/@vue/cli-ui/src/components/ProgressScreen.vue

@@ -20,7 +20,7 @@
             <div class="actions">
               <VueButton
                 icon-left="close"
-                label="Close"
+                :label="$t('components.progress-screen.close')"
                 @click="close()"
               />
             </div>

packages/@vue/cli-ui/src/components/ProjectNav.vue

@@ -12,7 +12,7 @@
           class="flat big icon-button"
           :value="route.name"
           :icon-left="route.icon"
-          v-tooltip.right="route.tooltip"
+          v-tooltip.right="renderTooltip(route.tooltip)"
         />
       </VueGroup>
     </div>
@@ -24,17 +24,17 @@ const BUILTIN_ROUTES = [
   {
     name: 'project-plugins',
     icon: 'widgets',
-    tooltip: 'Plugins'
+    tooltip: 'plugins'
   },
   {
     name: 'project-configuration',
     icon: 'settings_applications',
-    tooltip: 'Configuration'
+    tooltip: 'configuration'
   },
   {
     name: 'project-tasks',
     icon: 'assignment',
-    tooltip: 'Tasks'
+    tooltip: 'tasks'
   }
 ]
 
@@ -65,6 +65,12 @@ export default {
       }
     }
   },
+
+  methods: {
+    renderTooltip (target) {
+      return this.$t(`components.project-nav.tooltips.${target}`)
+    }
+  }
 }
 </script>
 

packages/@vue/cli-ui/src/components/ProjectPluginItem.vue

@@ -9,12 +9,12 @@
     >
       <span slot="description" class="plugin-description">
         <span class="info version">
-          <span class="label">version</span>
+          <span class="label">{{ $t('components.project-plugin-item.version') }}</span>
           <span class="value">{{ plugin.version.current }}</span>
         </span>
 
         <span class="info latest">
-          <span class="label">latest</span>
+          <span class="label">{{ $t('components.project-plugin-item.latest') }}</span>
           <VueIcon
             v-if="plugin.version.current !== plugin.version.latest"
             icon="warning"
@@ -28,15 +28,15 @@
             icon="star"
             class="top medium"
           />
-          Official
+          {{ $t('components.project-plugin-item.official') }}
         </span>
 
         <span v-if="plugin.installed" class="info">
           <VueIcon
             icon="check_circle"
             class="top medium"
           />
-          Installed
+          {{ $t('components.project-plugin-item.installed') }}
         </span>
 
         <span v-if="plugin.description" class="package-description">

packages/@vue/cli-ui/src/components/ProjectSelectList.vue

@@ -18,7 +18,7 @@
           </div>
           <div v-else class="vue-ui-empty">
             <VueIcon icon="attach_file" class="empty-icon"/>
-            <div>No existing projects</div>
+            <div>{{ $t('components.project-select-list.empty') }}</div>
           </div>
         </template>
       </template>

packages/@vue/cli-ui/src/components/ProjectSelectListItem.vue

@@ -5,7 +5,7 @@
         <VueButton
           class="icon-button"
           :icon-left="project.favorite ? 'star' : 'star_border'"
-          v-tooltip="'Toggle favorite'"
+          v-tooltip="$t('components.project-select-list-item.tooltips.favorite')"
           @click.stop="$emit('favorite')"
         />
       </div>
@@ -19,7 +19,7 @@
         <VueButton
           class="icon-button"
           icon-left="delete"
-          v-tooltip="'Delete'"
+          v-tooltip="$t('components.project-select-list-item.tooltips.delete')"
           @click.stop="$emit('remove')"
         />
       </div>

packages/@vue/cli-ui/src/components/StatusBar.vue

@@ -8,18 +8,18 @@
     <div class="content">
       <div
         class="section action current-project"
-        v-tooltip="'Current project<br><i>Click to toggle Project Manager</i>'"
+        v-tooltip="$t('components.status-bar.project.tooltip')"
         @click="onProjectClick()"
       >
         <VueIcon icon="work"/>
         <span v-if="projectCurrent">{{ projectCurrent.name }}</span>
-        <span v-else class="label">No project</span>
+        <span v-else class="label">{{ $t('components.status-bar.project.empty') }}</span>
       </div>
 
       <ApolloQuery
         :query="require('@/graphql/cwd.gql')"
         class="section current-path"
-        v-tooltip="'Current Working Directory'"
+        v-tooltip="$t('components.status-bar.path.tooltip')"
         @click.native="onCwdClick()"
       >
         <ApolloSubscribeToMore
@@ -37,15 +37,15 @@
 
       <div
         class="section action console-log"
-        v-tooltip="'Logs<br><i>Click to toggle vue-cli logs</i>'"
+        v-tooltip="$t('components.status-bar.log.tooltip')"
         @click="onConsoleClick()"
       >
         <VueIcon icon="dvr"/>
         <LoggerMessage class="last-message"
           v-if="consoleLogLast"
           :message="consoleLogLast"
         />
-        <div v-else class="last-message">No logs yet</div>
+        <div v-else class="last-message">{{ $t('components.status-bar.log.empty') }}</div>
         <!-- <TerminalView
           :cols="100"
           :rows="1"

packages/@vue/cli-ui/src/i18n.js

@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages () {
+  const locales = require.context('./locales', true, /[a-z0-9]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const locale = key.match(/([a-z0-9]+)\./i)[1]
+    messages[locale] = locales(key)
+  })
+  return messages
+}
+
+function detectLanguage () {
+  try {
+    const lang = (window.navigator.languages && window.navigator.languages[0]) ||
+      window.navigator.language ||
+      window.navigator.userLanguage
+    return lang.substr(0, 2)
+  } catch (e) {
+    return undefined
+  }
+}
+
+const i18n = new VueI18n({
+  locale: detectLanguage() || 'en',
+  fallbackLocale: 'en',
+  messages: loadLocaleMessages()
+})
+
+export default i18n