From 2542e79f9ecda8a8b4d64156eacfafdc4fc3178a Mon Sep 17 00:00:00 2001 From: Pranav C <61551451+pranavxc@users.noreply.github.com> Date: Thu, 15 Jul 2021 18:31:47 +0530 Subject: [PATCH] feat: Add dropdown for language switch Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com> --- .../project/settings/appearance.vue | 2 +- packages/nc-gui/components/utils/language.vue | 47 + packages/nc-gui/layouts/default.vue | 907 ++++++------------ packages/nc-gui/mixins/device.js | 12 - packages/nc-gui/pages/index.vue | 2 +- packages/nc-gui/plugins/i18n.js | 10 +- packages/nc-gui/store/windows.js | 9 +- 7 files changed, 360 insertions(+), 629 deletions(-) create mode 100644 packages/nc-gui/components/utils/language.vue diff --git a/packages/nc-gui/components/project/settings/appearance.vue b/packages/nc-gui/components/project/settings/appearance.vue index 4818ae85ff..c541c40947 100644 --- a/packages/nc-gui/components/project/settings/appearance.vue +++ b/packages/nc-gui/components/project/settings/appearance.vue @@ -184,7 +184,7 @@ export default { get() { return this.$store.state.windows.language; }, set(val) { - this.$store.commit('windows/MutSetLanguage', val); + this.$store.commit('windows/MutLanguage', val); } }, showMetatable: { diff --git a/packages/nc-gui/components/utils/language.vue b/packages/nc-gui/components/utils/language.vue new file mode 100644 index 0000000000..a7e822e4ab --- /dev/null +++ b/packages/nc-gui/components/utils/language.vue @@ -0,0 +1,47 @@ + + + + + diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue index 44f55416ee..fbbef8c5aa 100644 --- a/packages/nc-gui/layouts/default.vue +++ b/packages/nc-gui/layouts/default.vue @@ -39,669 +39,381 @@ - - Loading mdi-spin mdi-loading - - - - - - - - - - - - - - - - - - - - -
-
- - mdi-folder-outline - - {{ $store.getters['project/GtrProjectName'] }} - - - Project name - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + --> + Loading mdi-spin mdi-loading + + + + + +
+
+ + mdi-folder-outline + + {{ $store.getters['project/GtrProjectName'] }} + + + Project name + +
+
- + - - - mdi-table -   - Data - + - - +
+ + mdi-account-supervisor-outline + Share + +
- - - + + + Change theme (^⇧M) + - - - - + + + + + {{ $vuetify.theme.dark ? 'Click for light theme' : 'Click for dark theme' }} + + + - - - - - - - + - + - mdi-timetable -   - Crons - - - + + mdi-table +   + Data + - - - - - - + + mdi-timetable +   + Crons + - - - - - - - - - - - - - - - - - - - - - - - - mdi-alpha-g-circle-outline - - - - - - - - - - - - - - mdi-code-json - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + mdi-alpha-g-circle-outline + - - - + - - - - - - + + + - - - - - mdi-cog   Settings - - - + + + - + + + + + + + + + mdi-account-plus-outline   Sign Up + + + + + mdi-login   Login + + + + + + + + + + + + + + + + + + @@ -836,9 +548,11 @@ import XBtn from "../components/global/xBtn"; import ChangeEnv from "../components/changeEnv"; import Discord from "@/components/discord"; import {copyTextToClipboard} from "@/helpers/xutils"; +import Language from "~/components/utils/language"; export default { components: { + Language, Discord, ChangeEnv, XBtn, @@ -904,42 +618,16 @@ export default { isGrpc: 'project/GtrProjectIsGrpc', role: 'users/GtrRole' }), - // previewAs: { - // get() { - // return this.$store.state.users.previewAs - // }, set(previewAs) { - // this.$store.commit('users/MutPreviewAs', previewAs); - // } - // }, user() { - // console.log(this.$store); return this.$store.getters['users/GtrUser']; }, - - paidUser() { - }, - - - project() { - }, - - userAuthIsEmail() { - - }, - - isThisMobile() { // just an example, could be one specific value if that's all you need return this.isHydrated ? this.$vuetify.breakpoint.smAndDown : false; }, - - drawer_status() { - // return this.$store.getters['users/GtrUser'] && this.drawer; - }, }, mounted() { this.selectedEnv = this.$store.getters['project/GtrActiveEnv']; this.loadProjectInfo(); - // this.checkInactiveState(); }, watch: { '$route.path': function (path, oldPath) { @@ -1373,6 +1061,7 @@ a { } + diff --git a/packages/nc-gui/mixins/device.js b/packages/nc-gui/mixins/device.js index 1f3860b7ec..26c6b23988 100644 --- a/packages/nc-gui/mixins/device.js +++ b/packages/nc-gui/mixins/device.js @@ -1,6 +1,4 @@ -import rolePermissions from "@/helpers/rolePermissions"; import {mapGetters} from "vuex"; -import browserLang from 'browser-lang'; export default { data() { @@ -17,16 +15,6 @@ export default { isLight() { return this.$vuetify && this.$vuetify.theme && this.$vuetify.theme.light; }, - language() { - - // const dummy = new Date(); - // const offset = -dummy.getTimezoneOffset(); - - return browserLang({ - languages: ["en", "ar", "nl", "fr", "de", "it", "ja", "ru", "es", "ca", "cs", "et", "lt", "no", "te", "ur", "zh-cn", "da", "tl", "el", "ms", "pl", "sr", "sv", "th", "bn", "zh-tw", "fi", "ko", "iw", "ml", "pt", "sk", "tg", "tr", "vi", "bg", "hr", "eo", "id", "lv", "mr", "ro", "sl", "ta", "uk", "kn", "hi"], - fallback: 'en', - }); - }, isThisMobile() { // just an example, could be one specific value if that's all you need return this.isHydrated ? this.$vuetify && this.$vuetify.breakpoint && this.$vuetify.breakpoint.smAndDown : false; }, diff --git a/packages/nc-gui/pages/index.vue b/packages/nc-gui/pages/index.vue index 508448112e..c89c3aaabd 100644 --- a/packages/nc-gui/pages/index.vue +++ b/packages/nc-gui/pages/index.vue @@ -437,7 +437,7 @@ export default { }, computed: { text() { - const text = this.lang.find(it => it.symbol === this.language); + const text = this.lang.find(it => it.symbol === this.$store.state.windows.language); return text ? text.text : 'default'; }, projectInfo() { diff --git a/packages/nc-gui/plugins/i18n.js b/packages/nc-gui/plugins/i18n.js index 34e7e89a4f..fe0b598578 100644 --- a/packages/nc-gui/plugins/i18n.js +++ b/packages/nc-gui/plugins/i18n.js @@ -11,7 +11,7 @@ export default ({app, store}) => { // This way we can use it globally in our components through this.$i18n app.i18n = new VueI18n({ // Set the initial locale - locale: "en", + locale: store.state.windows.language, // Set the fallback locale in case the current locale can't be found fallbackLocale: "en", @@ -20,14 +20,18 @@ export default ({app, store}) => { messages: { en: require("~/static/lang/en.json"), zh: require("~/static/lang/zh.json"), - ja: require("~/static/lang/ja.json"), + // ja: require("~/static/lang/ja.json"), fr: require("~/static/lang/fr.json") } }); store.watch( (state) => state.windows.language, - (language) => app.i18n.locale = language + (language) => { + if (app.i18n.availableLocales.includes(language)) { + app.i18n.locale = language + } + } ); }; /** diff --git a/packages/nc-gui/store/windows.js b/packages/nc-gui/store/windows.js index 5040a2a2c7..13803104ec 100644 --- a/packages/nc-gui/store/windows.js +++ b/packages/nc-gui/store/windows.js @@ -1,7 +1,7 @@ // import moment from 'moment'; import themes from "../helpers/themes"; +import browserLang from "browser-lang"; -// const {machineId} = require('electron').remote.require('./libs'); const defaultTheme = { "primary": "#0989ff", @@ -24,7 +24,10 @@ export const state = () => ({ isGaEnabled: true, isErrorReportingEnabled: true, customTheme: {}, - language: 'en', + language: browserLang({ + languages: ["en", "ar", "nl", "fr", "de", "it", "ja", "ru", "es", "ca", "cs", "et", "lt", "no", "te", "ur", "zh-cn", "da", "tl", "el", "ms", "pl", "sr", "sv", "th", "bn", "zh-tw", "fi", "ko", "iw", "ml", "pt", "sk", "tg", "tr", "vi", "bg", "hr", "eo", "id", "lv", "mr", "ro", "sl", "ta", "uk", "kn", "hi"], + fallback: 'en', + }), showTour: { home: true, dashboard: true @@ -79,7 +82,7 @@ export const mutations = { state.theme = themes[state.themeName]; }, MutSetCustomTheme(state, theme) { state.customTheme = theme; - }, MutSetLanguage(state, language) { + }, MutLanguage(state, language) { state.language = language; }, MutToggleTreeviewWindow(state, show) {