Browse Source

refacotr(nc-gui): make whole lang btn clickable

pull/3602/head
braks 2 years ago
parent
commit
f7d326fcbc
  1. 6
      packages/nc-gui/components/general/language/Menu.vue
  2. 6
      packages/nc-gui/components/general/language/index.vue
  3. 6
      packages/nc-gui/layouts/base.vue
  4. 2
      packages/nc-gui/nuxt.config.ts

6
packages/nc-gui/components/general/language/Menu.vue

@ -38,6 +38,12 @@ async function changeLanguage(lang: string) {
onMounted(() => { onMounted(() => {
applyDirection() applyDirection()
}) })
defineExpose({
languages,
currentLang,
changeLanguage,
})
</script> </script>
<template> <template>

6
packages/nc-gui/components/general/language/index.vue

@ -1,6 +1,8 @@
<template> <template>
<a-dropdown class="select-none color-transition" :trigger="['click']"> <a-dropdown class="select-none color-transition cursor-pointer" :trigger="['click']">
<MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" /> <div v-bind="$attrs" class="flex items-center justify-center">
<MaterialSymbolsTranslate class="md:text-xl nc-menu-translate" />
</div>
<template #overlay> <template #overlay>
<a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded"> <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">

6
packages/nc-gui/layouts/base.vue

@ -103,9 +103,7 @@ hooks.hook('page:finish', () => {
<template #title> Switch language</template> <template #title> Switch language</template>
<Transition name="layout"> <Transition name="layout">
<div v-if="!signedIn" class="nc-lang-btn"> <GeneralLanguage v-if="!signedIn" class="nc-lang-btn" />
<GeneralLanguage />
</div>
</Transition> </Transition>
</a-tooltip> </a-tooltip>
@ -116,7 +114,7 @@ hooks.hook('page:finish', () => {
</a-layout> </a-layout>
</template> </template>
<style lang="scss" scoped> <style lang="scss">
.nc-lang-btn { .nc-lang-btn {
@apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent); @apply color-transition flex items-center justify-center fixed bottom-10 right-10 z-99 w-12 h-12 rounded-full shadow-md shadow-gray-500 p-2 !bg-primary text-white active:(ring ring-accent) hover:(ring ring-accent);

2
packages/nc-gui/nuxt.config.ts

@ -101,6 +101,7 @@ export default defineNuxtConfig({
}, },
}, },
}, },
experimental: { experimental: {
reactivityTransform: true, reactivityTransform: true,
}, },
@ -108,6 +109,7 @@ export default defineNuxtConfig({
image: { image: {
dir: 'assets/', dir: 'assets/',
}, },
autoImports: { autoImports: {
dirs: ['./context', './utils', './lib'], dirs: ['./context', './utils', './lib'],
imports: [{ name: 'useI18n', from: 'vue-i18n' }], imports: [{ name: 'useI18n', from: 'vue-i18n' }],

Loading…
Cancel
Save