Language selection

Also, update RTL settings based on language (see "language_is_rtl" key in language file(s), defaults to false). Issue #147.

src/App.vue

@@ -11,13 +11,11 @@ import config from "./assets/config";
 
 export default {
   name: "App",
+  beforeMount() {
+    // Set language
+    this.$i18n.locale = this.$store.state.language || "en";
+  },
   mounted() {
-    // Set RTL mode if flag given in config. TODO: this should be based on language, not a global setting.
-    //
-    if (config.rtl) {
-      this.$vuetify.rtl = true;
-      document.documentElement.setAttribute("dir", "rtl");
-    }
     if (
       window.location.protocol == "http" &&
       !window.location.hostname.endsWith(".onion")
@@ -63,6 +61,20 @@ export default {
     },
   },
   watch: {
+    "$i18n.locale": {
+      handler(val) {
+        // Locale changed, check file if RTL
+        var isRTL = this.$i18n.messages[val].language_is_rtl || false;
+        if (isRTL) {
+          this.$vuetify.rtl = true;
+          document.documentElement.setAttribute("dir", "rtl");
+        } else {
+          this.$vuetify.rtl = false;
+          document.documentElement.removeAttribute("dir");
+        }
+      },
+      immediate: true,
+    },
     title(title) {
       document.title = title;
     },

src/assets/translations/en.json

@@ -1,4 +1,5 @@
 {
+  "language_display_name": "English",
   "Keanu Weblite": "Keanu Weblite",
   "menu": {
     "start_private_chat": "Private chat with this user",
@@ -113,6 +114,7 @@
     "set_password": "Set password",
     "change_name": "Change name",
     "change_password": "Change password",
+    "select_language": "Language",
     "password_old": "Old password",
     "password_new": "New password",
     "password_repeat": "Repeat new password",

src/assets/translations/es.json

@@ -1,4 +1,5 @@
 {
+    "language_display_name": "Español",
     "room_info": {
         "identity": "Has iniciado sesión como {displayName}.",
         "my_profile": "Mi perfil",
@@ -183,4 +184,4 @@
         "view_details": "Ver detalles",
         "this_room": "Este grupo"
     }
-}
+}

src/assets/translations/ug.json

@@ -1,4 +1,5 @@
 {
+    "language_is_rtl": true,
     "menu": {
         "ok": "تامام",
         "download": "چۈشۈرۈش",
@@ -6,4 +7,4 @@
         "edit": "تەھرىر"
     },
     "Keanu Weblite": "Keanu Weblite"
-}
+}

src/components/Profile.vue

@@ -62,6 +62,11 @@
         :icon="'edit'"
         :text="$t('profile.change_name')"
       />
+      <ActionRow
+        @click="showSelectLanguageDialog = true"
+        :icon="'language'"
+        :text="$t('profile.select_language')"
+      />
     </v-container>
 
     <!-- edit password dialog -->
@@ -138,10 +143,16 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
+
+    <SelectLanguageDialog
+      v-model="showSelectLanguageDialog"
+      v-on:close="showSelectLanguageDialog = false"
+    />
   </div>
 </template>
 
 <script>
+import SelectLanguageDialog from "./SelectLanguageDialog.vue";
 import dataUriToBuffer from "data-uri-to-buffer";
 import ActionRow from "./ActionRow.vue";
 import ImageResize from "image-resize";
@@ -153,11 +164,13 @@ export default {
   name: "Profile",
   components: {
     ActionRow,
+    SelectLanguageDialog,
   },
   data() {
     return {
       showEditPasswordDialog: false,
       showEditDisplaynameDialog: false,
+      showSelectLanguageDialog: false,
       editValue: null,
       password: null,
       newPassword1: null,

src/components/SelectLanguageDialog.vue

@@ -0,0 +1,58 @@
+<template>
+  <v-dialog
+    class="ma-0 pa-0"
+    width="80%"
+    v-bind="{ ...$props, ...$attrs }"
+    v-on="$listeners"
+  >
+    <v-card class="dialog-card">
+      <v-card-title class="dialog-title"
+        ><h3>{{ $t("profile.select_language") }}</h3></v-card-title
+      >
+      <v-card-text>
+        <v-select
+          v-model="$i18n.locale"
+          :items="languages"
+          menu-props="auto"
+          :label="$t('profile.select_language')"
+          v-on:change="$store.commit('setLanguage', $i18n.locale)"
+          hide-details
+          prepend-icon="language"
+          single-line
+        ></v-select>
+      </v-card-text>
+      <v-card-actions>
+        <v-btn
+          color="black"
+          depressed
+          block
+          class="filled-button"
+          @click="$emit('close')"
+          >{{ $t("menu.ok") }}</v-btn
+        >
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      languages: [],
+    };
+  },
+  mounted() {
+    for (const locale of Object.keys(this.$i18n.messages)) {
+      this.languages.push({
+        text: this.$i18n.messages[locale].language_display_name || locale,
+        value: locale,
+      });
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/store/index.js

@@ -37,6 +37,7 @@ const vuexPersistLocalStorage = new VuexPersist({
     reducer: state => {
         if (state.useLocalStorage) {
             return {
+                language: state.language,
                 currentRoomId: state.currentRoomId,
             };
         } else {
@@ -51,6 +52,7 @@ const vuexPersistSessionStorage = new VuexPersist({
     reducer: state => {
         if (!state.useLocalStorage) {
             return {
+                language: state.language,
                 currentRoomId: state.currentRoomId,
             };
         } else {
@@ -62,7 +64,7 @@ const vuexPersistSessionStorage = new VuexPersist({
 const defaultUseSessionStorage = (sessionStorage.getItem('user') != null);
 
 export default new Vuex.Store({
-    state: { currentRoomId: null, auth: null, tempuser: null, useLocalStorage: !defaultUseSessionStorage },
+    state: { language: 'en', currentRoomId: null, auth: null, tempuser: null, useLocalStorage: !defaultUseSessionStorage },
     mutations: {
         loginSuccess(state, user) {
             state.auth.status.loggedIn = true;
@@ -76,6 +78,9 @@ export default new Vuex.Store({
             state.auth.status.loggedIn = false;
             state.auth.user = null;
         },
+        setLanguage(state, locale) {
+            state.language = locale;
+        },
         setCurrentRoomId(state, roomId) {
             state.currentRoomId = roomId;
         },