completed basic i18n with english and mandarin menu translations

Author: briancaffey

quasar/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "axios": "^0.18.1",
+    "emoji-mart-vue": "^2.6.6",
     "js-cookie": "^2.2.0",
     "quasar": "^1.0.0",
     "vue-i18n": "^8.0.0",

quasar/src/boot/components.js

@@ -4,9 +4,11 @@ import LeftMenuLink from "components/LeftMenuLink.vue";
 import MainHeader from "layouts/primary/MainHeader.vue";
 import MainLeftDrawer from "layouts/primary/MainLeftDrawer.vue";
 import MainCarousel from "components/MainCarousel.vue";
+import { Emoji } from "emoji-mart-vue";
 
 // leave the export, even if you don't use it
 export default async ({ Vue }) => {
+  Vue.component("Emoji", Emoji);
   Vue.component("BasePage", BasePage);
   Vue.component("DarkMode", DarkMode);
   Vue.component("LeftMenuLink", LeftMenuLink);

quasar/src/i18n/cn-cn/index.js

@@ -1,13 +1,5 @@
-// This is just an example,
-// so you can safely delete all default props below
+import leftDrawer from "./leftDrawer";
 
 export default {
-  leftDrawer: {
-    home: {
-      main: "目录",
-      sub: "从此开始"
-    }
-  },
-  failed: "你好",
-  success: "bu hao"
+  ...leftDrawer
 };

quasar/src/i18n/cn-cn/leftDrawer/index.js

@@ -0,0 +1,46 @@
+const leftDrawer = {
+  leftDrawer: {
+    home: {
+      main: "首页",
+      sub: "从这里开始"
+    },
+    about: {
+      main: "关于",
+      sub: "关于这个APP"
+    },
+    protected: {
+      main: "保护",
+      sub: "受保护的Vue页面"
+    },
+    toDo: {
+      main: "To-Do",
+      sub: "To-Do应用程序"
+    },
+    services: {
+      main: "服务",
+      sub: "监控，管理，元数据"
+    },
+    examples: {
+      main: "例子",
+      sub: "REST, Websockets, 等",
+      websockets: {
+        main: "Websockets",
+        sub: "如何使用Websockets"
+      }
+    },
+    tests: {
+      main: "测试",
+      sub: "系统测试",
+      redis: {
+        main: "Redis",
+        sub: "redis测试"
+      }
+    },
+    environment: {
+      main: "环境",
+      sub: "环境变量"
+    }
+  }
+};
+
+export default leftDrawer;

quasar/src/i18n/en-us/index.js

@@ -1,13 +1,7 @@
-// This is just an example,
-// so you can safely delete all default props below
+import leftDrawer from "./leftDrawer";
 
 export default {
-  leftDrawer: {
-    home: {
-      main: "Home",
-      sub: "Start here"
-    }
-  },
+  ...leftDrawer,
   failed: "Hello",
   success: "Action was successful"
 };

quasar/src/i18n/en-us/leftDrawer/index.js

@@ -0,0 +1,46 @@
+const leftDrawer = {
+  leftDrawer: {
+    home: {
+      main: "Home",
+      sub: "Start here"
+    },
+    about: {
+      main: "About",
+      sub: "About this site"
+    },
+    protected: {
+      main: "Protected",
+      sub: "This page is private"
+    },
+    toDo: {
+      main: "To-Do",
+      sub: "Site To-Do List"
+    },
+    services: {
+      main: "Services",
+      sub: "Monitoring, admin, metadata"
+    },
+    examples: {
+      main: "Examples",
+      sub: "REST, Websockets, tasks",
+      websockets: {
+        main: "Websockets",
+        sub: "How to use websockets"
+      }
+    },
+    tests: {
+      main: "Tests",
+      sub: "System Checks",
+      redis: {
+        main: "Redis",
+        sub: "Test redis connection"
+      }
+    },
+    environment: {
+      main: "Environment",
+      sub: "Environment Variables"
+    }
+  }
+};
+
+export default leftDrawer;

quasar/src/layouts/primary/MainHeader.vue

@@ -14,7 +14,19 @@
 
       <q-toolbar-title>Verbose Equals True</q-toolbar-title>
 
-      <q-select v-model="lang" :options="langs" />
+      <span class="lang">
+        <emoji :native="false" height="100%" :sheetSize="64" :emoji="lang.emoji" :size="28" />
+      </span>
+
+      <q-select
+        dark
+        dense
+        color="white"
+        v-model="lang"
+        :options="langs"
+      />
+
+
       <q-btn
         id="login"
         :ripple="false"
@@ -46,21 +58,32 @@ import AuthModal from "components/AuthModal.vue";
 export default {
   data() {
     return {
-      lang: this.$i18n.locale,
+      showing: false,
+      lang: {
+        label: "US English",
+        value: "en-us",
+        emoji: ":flag-us:"
+      },
       langs: [
         {
-          label: "Chinese",
-          value: "cn-cn"
+          label: "US English",
+          value: "en-us",
+          emoji: ":flag-us:"
         },
         {
-          label: "US English",
-          value: "en-us"
-        }
+          label: "Chinese",
+          value: "cn-cn",
+          emoji: ":flag-cn:"
+        },
       ]
     };
   },
   components: { AuthModal },
   methods: {
+    setLang(lang){
+      console.log(lang);
+      this.lang = lang
+    },
     logout() {
       this.$store.dispatch("AUTH_LOGOUT").then(() => this.$router.push("/"));
       this.$router.go();
@@ -70,11 +93,12 @@ export default {
     }
   },
   created() {
-    this.$i18n.locale = "cn-cn";
+    this.$i18n.locale = 'en-us';
   },
   watch: {
     lang(lang) {
-      this.$i18n.locale = lang;
+      console.log(lang);
+      this.$i18n.locale = lang.value;
       // import(`quasar/i18n/${lang}`).then(language => {
       //   this.$q.lang.set(language.default)
       // })
@@ -83,4 +107,12 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.lang {
+  margin-right: 20px;
+  cursor: pointer;
+}
+.q-select {
+  margin-right: 20px;
+}
+</style>

quasar/src/layouts/primary/MainLeftDrawer.vue

@@ -12,72 +12,72 @@
           :label="$t('leftDrawer.home.main')"
           to="/"
           icon="home"
-          caption="Start Here"
+          :caption="$t('leftDrawer.home.sub')"
         />
 
         <left-menu-link
-          label="About"
+          :label="$t('leftDrawer.about.main')"
           to="/about"
           icon="info"
-          caption="About this site"
+          :caption="$t('leftDrawer.about.sub')"
         />
 
         <left-menu-link
-          label="Protected"
+          :label="$t('leftDrawer.protected.main')"
           to="/protected"
           icon="lock"
-          caption="This page is private"
+          :caption="$t('leftDrawer.protected.sub')"
         />
 
         <left-menu-link
-          label="To-Do"
+          :label="$t('leftDrawer.toDo.main')"
           to="/to-do"
           icon="check"
-          caption="Site To-Do List"
+          :caption="$t('leftDrawer.toDo.sub')"
         />
 
         <left-menu-link
           v-if="$store.getters.isAuthenticated"
-          label="Services"
+          :label="$t('leftDrawer.services.main')"
           to="/services"
           icon="insert_chart_outlined"
-          caption="Monitoring, admin, metadata"
+          :caption="$t('leftDrawer.services.sub')"
         />
         <q-expansion-item
           :content-inset-level="0.5"
           v-if="$store.getters.isAuthenticated"
           expand-separator
           icon="perm_identity"
-          label="Examples"
-          caption="REST, Websockets, "
+          :label="$t('leftDrawer.examples.main')"
+          :caption="$t('leftDrawer.tests.sub')"
         >
           <left-menu-link
-            label="Services"
+            :label="$t('leftDrawer.examples.websockets.main')"
             to="/examples/websockets"
             icon="offline_bolt"
-            caption="How to use websockets"
+            :caption="$t('leftDrawer.examples.websockets.sub')"
           />
         </q-expansion-item>
         <q-expansion-item
           :content-inset-level="0.5"
           v-if="$store.getters.isAuthenticated"
           expand-separator
           icon="check_circle"
-          label="Tests"
-          caption="Debug Tests"
+          :label="$t('leftDrawer.tests.main')"
+          :caption="$t('leftDrawer.tests.main')"
         >
           <left-menu-link
-            label="Redis"
+            :label="$t('leftDrawer.tests.redis.main')"
             to="/examples/redis"
             icon="offline_bolt"
-            caption="Test redis connection"
+            :caption="$t('leftDrawer.tests.redis.sub')"
           />
         </q-expansion-item>
         <left-menu-link
-          label="Environment Variables"
+          :label="$t('leftDrawer.environment.main')"
           to="/debug/environment-variables"
           icon="offline_bolt"
-          caption="Displays Environment Variables for Debug Purposes"
+          :caption="$t('leftDrawer.environment.main')"
         />
       </q-list>
     </q-drawer>

quasar/src/pages/Environment.vue

@@ -1,8 +1,6 @@
 <template>
   <base-page>
     <h4>Environment Variables</h4>
-
-    {{ $t("failed") }}
     <div v-for="(value, key) in env" :key="key">
       <q-chip>{{ key }}</q-chip
       ><q-chip text-color="white" color="teal">{{ value }}</q-chip>