Added localization support Thai (TH)

kulapio · Sep 14, 2019 · ae6115f · ae6115f
1 parent 4d2a840
commit ae6115f
Show file tree

Hide file tree

Showing 18 changed files with 294 additions and 69 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,6 +21,7 @@
     "vue": "^2.6.10",
     "vue-clipboard2": "^0.3.0",
     "vue-element-loading": "^1.1.1",
+    "vue-i18n": "^8.14.1",
     "vue-loading-template": "^1.3.2",
     "vue-qrcode-reader": "^2.0.1",
     "vue-router": "^3.0.6",

diff --git a/src/App.vue b/src/App.vue
@@ -1,18 +1,33 @@
 <template>
   <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/stats">Stats</router-link> |
-      <router-link to="/about">About</router-link> |
-      <router-link to="/blog">Blog</router-link>
+    <div id="nav" style="display: flex; justify-content: center;">
+      <div class="menu-container">
+        <router-link to="/">{{ $t('home') }}</router-link> |
+        <router-link to="/stats">{{ $t('stats') }}</router-link> |
+        <router-link to="/about">{{ $t('about') }}</router-link> |
+        <router-link v-bind:to="`/blog?locale=${locale}`">{{ $t('blog') }}</router-link>
+      </div>
+      <b-dropdown
+        style="margin-left: auto;"
+        hoverable
+        aria-role="list"
+        position="is-bottom-left"
+      >
+        <div slot="trigger" class="dropdown-container">
+          <span>{{ locale.toUpperCase() }}</span>
+          <b-icon icon="menu-down"></b-icon>
+        </div>
+        <b-dropdown-item aria-role="listitem" @click="switchLocale('en')">English (EN)</b-dropdown-item>
+        <b-dropdown-item aria-role="listitem" @click="switchLocale('th')">ไทย (TH)</b-dropdown-item>
+      </b-dropdown>
     </div>
     <router-link to="/">
       <img
         src="@/assets/img/logo.png"
         class="header-image"
       >
     </router-link>
-    <router-view/>  
+    <router-view/> 
     <Footer/>
   </div>
 </template>
@@ -24,6 +39,21 @@ export default {
   name: 'App',
   components: {
     Footer
+  },
+  data () {
+    return {
+      locale: localStorage.getItem('locale') || 'en'
+    }
+  },
+  created () {
+    this.$i18n.locale = this.locale
+  },
+  methods: {
+    switchLocale (locale) {
+      this.locale = locale
+      this.$i18n.locale = locale
+      localStorage.setItem('locale', locale)
+    }
   }
 }
 </script>
@@ -37,7 +67,7 @@ export default {
   color: #2c3e50;
 }
 #nav {
-  padding: 30px;
+  padding: 30px 5px;
 }
 #nav a {
   font-weight: bold;
@@ -50,4 +80,22 @@ export default {
   height: 70px;
   cursor: pointer;
 }
+.menu-container {
+  display: inline-table;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, 0);
+}
+.dropdown-container {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+/* on desktop */
+@media only screen and (min-width: 1025px) {
+  #nav {
+    padding: 30px;
+  }
+}
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="content has-text-centered">
     <p>
-      <strong>Sponsored</strong> by <a href="https://www.kulap.io">KULAP.io</a>, The Best Rate Decentralized Exchange | <a target="_blank" href='https://github.com/kulapio/libra-wallet-poc'>Github</a>.
+      <strong>{{ $t('sponsored') }}</strong> {{ $t('by') }} <a href="https://www.kulap.io">KULAP.io</a>, The Best Rate Decentralized Exchange | <a target="_blank" href='https://github.com/kulapio/libra-wallet-poc'>Github</a>.
     </p>
   </div>
 </template>

diff --git a/src/components/LibraGrantProgram.vue b/src/components/LibraGrantProgram.vue
@@ -20,7 +20,7 @@
                         <span style="color:#3E2C8F;">
                           <span style="font-weight:bold;">
                             <span style="font-size:18px;">
-                              <span style="font-family:roboto-thin,roboto,sans-serif;">A Libracamp grant plan project.</span>
+                              <span style="font-family:roboto-thin,roboto,sans-serif;">{{ $t('libracampGrantPlan') }}</span>
                             </span>
                           </span>
                         </span>
@@ -30,22 +30,22 @@
                       <h1 class="font_0" style="font-size:18px; line-height:1.5em;">
                         <span style="color:#464646;">
                           <span style="font-size:18px;">
-                            <span style="font-family:roboto-thin,roboto,sans-serif;">This project is participating in the non-profit grant plan of libracamp.com.</span>
+                            <span style="font-family:roboto-thin,roboto,sans-serif;">{{ $t('libracampGrantPlanDesc') }}</span>
                           </span>
                         </span>
                       </h1>
                       <h1 class="font_0" style="font-size:18px; line-height:1.5em;">&nbsp;</h1>
                       <h1 class="font_0" style="font-size:18px; line-height:1.5em;">
                         <span style="color:#464646;">
                           <span style="font-size:18px;">
-                            <span style="font-family:roboto-thin,roboto,sans-serif;">Libracamp supports open source projects with 100 coding hours from our lead devs and $2,000. </span>
+                            <span style="font-family:roboto-thin,roboto,sans-serif;">{{ $t('libracampDesc') }}</span>
                           </span>
                         </span>
                       </h1>
                       <h1 class="font_0" style="font-size:18px; line-height:1.5em;">
                         <span style="color:#4A4A4A;">
                           <span style="font-size:18px;">
-                            <span style="font-family:roboto-thin,roboto,sans-serif;">Visit</span>
+                            <span style="font-family:roboto-thin,roboto,sans-serif;">{{ $t('visit') }}</span>
                           </span>
                         </span>
                         <span style="color:#0076D1;">
@@ -57,7 +57,7 @@
                         </span>
                         <span style="color:#4A4A4A;">
                           <span style="font-size:18px;">
-                            <span style="font-family:roboto-thin,roboto,sans-serif;">to learn more.</span>
+                            <span style="font-family:roboto-thin,roboto,sans-serif;">{{ $t('toLearnMore') }}</span>
                           </span>
                         </span>
                       </h1>

diff --git a/src/components/QRScanner.vue b/src/components/QRScanner.vue
@@ -18,13 +18,13 @@
             icon-left="pencil"
             @click="sendWithManualAddress"
           >
-            Send Manually
+            {{ $t('sendManually') }}
           </b-button>
           <b-button
             icon-left="arrow-left"
             @click="back"
           >
-            Back
+            {{ $t('back') }}
           </b-button>
       </div>
     </section>

diff --git a/src/components/Stats.vue b/src/components/Stats.vue
@@ -4,10 +4,10 @@
       <div class="hero-body">
         <div class="container">
           <h1 class="title">
-            {{ wallets ? Number(wallets).toLocaleString() : 'Loading...' }}
+            {{ wallets ? Number(wallets).toLocaleString() : $t('loading') }}
           </h1>
           <h2 class="subtitle">
-            Wallets
+            {{ $t('wallets') }}
           </h2>
         </div>
       </div>
@@ -16,10 +16,10 @@
       <div class="hero-body">
         <div class="container">
           <h1 class="title">
-            {{ transactions ? Number(transactions).toLocaleString() : 'Loading...' }}
+            {{ transactions ? Number(transactions).toLocaleString() : $t('loading') }}
           </h1>
           <h2 class="subtitle">
-            Transactions
+            {{ $t('transactions') }}
           </h2>
         </div>
       </div>