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 @@
+
+
+
+
+
+ mdi-translate
+
+
+
+
+
+ {{ lan }}
+
+
+
+
+
+
+
+
+
+
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'] }}
-
-
-
- mdi-information-outline
-
-
- Project name
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- mdi-account-supervisor-outline
- Share
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- mdi-format-color-fill
-
-
- Change theme (^⇧M)
-
-
-
-
-
- {{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
-
-
-
- {{ $vuetify.theme.dark ? 'Click for light theme' : 'Click for dark theme' }}
-
-
-
+
-
-
+
-
-
-
-
-
+ mdi-calendar-month
+
-
-
+
+ mdi-twitter
+
+ <!– –>
+ <!– –>
+ <!– href="https://discord.gg/5RgZmkW"–>
+
+ mdi-discord
+
+ <!– –>
+ <!– –>
+ <!– –>
+
-
-
-
-
-
-
+ -->
+ Loading mdi-spin mdi-loading
+
+
+
+
+
+
+
+
+ mdi-folder-outline
+
+ {{ $store.getters['project/GtrProjectName'] }}
+
+
+
+ mdi-information-outline
+
+
+ Project name
+
+
+
-
+
-
-
- mdi-table
-
- Data
-
+
-
-
+
+
+ mdi-account-supervisor-outline
+ Share
+
+
-
-
-
+
+
+
+ mdi-format-color-fill
+
+
+ Change theme (^⇧M)
+
-
-
-
-
+
+
+
+ {{ $vuetify.theme.dark ? 'mdi-weather-sunny' : 'mdi-weather-night' }}
+
+
+
+ {{ $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-code-json
+
-
-
+
-
-
-
-
-
-
-
-
+
-
-
+
-
-
-
-
-
-
-
- mdi-bat
-
-
-
- {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
-
-
-
-
-
-
-
+
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
-
-
+
-
+
+
-
+
+
+
+
+
-
+
+ mdi-bat
+
+
+
+ {{ $vuetify.theme.dark ? 'It does come in Black (^⇧B)' : 'Does it come in Black ? (^⇧B)' }}
+
+
+
+
- {{ roleIcon[role] }}
- mdi-account-circle
- arrow_drop_down
-
+
+
-
-
-
-
- mdi-cog Settings
-
-
-
+
+
+
-
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
-
- mdi-console
-
- {{ isDocker ? 'Docker Console' : 'API Generator' }}
+
+
+
+
+
+
-
- -->
+
+
-
-
+
+
+
-
- mdi-console
-
- Copy auth token
+ {{ roleIcon[role] }}
+ mdi-account-circle
+ arrow_drop_down
+
-
-
-
-
-
+
+
-
- {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
-
-
- {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}
+
+
+
+
+
-
-
+
+
+
+
-
-
+
+
- info Copy Project info
-
-
-
-
+
+ mdi-console
+
+ Copy auth token
- mdi-logout Sign Out
-
-
-
-
-
-
+
+
+
+
+
-
-
-
- mdi-account
- arrow_drop_down
-
+
+ {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
+
+
+ {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}
-
-
-
+
+
+
+
- mdi-account-plus-outline Sign Up
+
+
+ mdi-cog
+
+ Themes
+
-
+
+
+
- mdi-login Login
+
+ info Copy Project info
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ mdi-logout Sign Out
+
+
+
+
+
+
+
+
+
+
+ mdi-account
+ arrow_drop_down
+
+
+
+
+
+
+ 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) {