Browse Source

Merge pull request #3099 from nocodb/refactor/language-switcher

pull/3108/head
Braks 2 years ago committed by GitHub
parent
commit
d4ba4059be
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 51
      packages/nc-gui-v2/components/general/Language.vue
  2. 5
      packages/nc-gui-v2/nuxt.config.ts

51
packages/nc-gui-v2/components/general/Language.vue

@ -1,28 +1,33 @@
<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
import { Language } from '~/lib'
import { useNuxtApp } from '#imports'
import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
const { $e, $state } = useNuxtApp()
const { $e } = useNuxtApp()
const { lang: currentLang } = useGlobal()
const { availableLocales = ['en'], locale } = useI18n()
const languages = $computed(() => availableLocales.sort())
const isRtlLang = $computed(() => ['fa'].includes($state.lang.value))
const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
function applyDirection() {
const targetDirection = isRtlLang ? 'rtl' : 'ltr'
const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
document.body.classList.remove(oppositeDirection)
document.body.classList.add(targetDirection)
document.body.style.direction = targetDirection
}
function changeLanguage(lang: string) {
$state.lang.value = lang
currentLang.value = lang
locale.value = lang
applyDirection()
$e('c:navbar:lang', { lang })
}
@ -32,13 +37,12 @@ onMounted(() => {
</script>
<template>
<v-menu class="select-none">
<template #activator="{ props }">
<MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" @click="props.onClick" />
</template>
<a-dropdown class="select-none" :trigger="['click']">
<MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
<v-list class="scrollbar min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
<v-list-item
<template #overlay>
<a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 dark:(!bg-gray-800 !text-white)">
<a-menu-item
v-for="lang of languages"
:key="lang"
:class="lang === locale ? '!bg-primary/10 text-primary dark:(!bg-gray-700 !text-secondary)' : ''"
@ -46,17 +50,15 @@ onMounted(() => {
:value="lang"
@click="changeLanguage(lang)"
>
<v-list-item-subtitle
:class="lang === locale ? '!font-semibold' : ''"
<div
:class="lang === locale ? '!font-semibold !text-primary' : ''"
class="capitalize md:(!leading-8) group-hover:(text-primary font-semibold) dark:(group-hover:text-secondary)"
>
{{ Language[lang] || lang }}
</v-list-item-subtitle>
</v-list-item>
<v-divider />
</div>
</a-menu-item>
<v-list-item>
<a-menu-item>
<a
href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
target="_blank"
@ -64,13 +66,8 @@ onMounted(() => {
>
{{ $t('activity.translate') }}
</a>
</v-list-item>
</v-list>
</v-menu>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<style scoped>
.scrollbar {
@apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-primary scrollbar-track-white dark:(!scrollbar-track-gray-900);
}
</style>

5
packages/nc-gui-v2/nuxt.config.ts

@ -106,4 +106,9 @@ export default defineNuxtConfig({
image: {
dir: 'assets/',
},
autoImports: {
dirs: ['./context', './utils', './lib'],
imports: [{ name: 'useI18n', from: 'vue-i18n' }],
},
})

Loading…
Cancel
Save