github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

refactor: include language and user in project menu 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3236/head
Pranav C 2 years ago
parent
be425311eb
commit
dbc1665c96
5 changed files with 99 additions and 50 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      packages/nc-gui-v2/components.d.ts
  2. 4
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  3. 33
      packages/nc-gui-v2/components/general/Language.vue
  4. 23
      packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
  5. 88
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

1
packages/nc-gui-v2/components.d.ts vendored
Unescape View File

@ -87,6 +87,7 @@ declare module '@vue/runtime-core' {
MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
MdiAccount: typeof import('~icons/mdi/account')['default']
MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']

4
packages/nc-gui-v2/components/dashboard/TreeView.vue
Unescape View File

@ -370,9 +370,9 @@ function openAirtableImportDialog() {
</template>
</a-dropdown>
<a-divider class="mt-0 mb-2" />
<a-divider class="mt-0 mb-0" />
<div class="items-center flex justify-center mb-1">
<div class="items-center flex justify-center p-2">
<!--
Todo : move the component
<GithubStarButton />

33
packages/nc-gui-v2/components/general/Language.vue
Unescape View File

@ -2,6 +2,8 @@
import { Language } from '~/lib'
import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
const { subMenu } = defineProps<{ subMenu?: boolean }>()
const { $e } = useNuxtApp()
const { lang: currentLang } = useGlobal()
@ -37,7 +39,36 @@ onMounted(() => {
</script>
<template>
<a-dropdown class="select-none color-transition" :trigger="['click']">
<template v-if="subMenu">
<a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
<a-menu-item
v-for="lang of languages"
:key="lang"
:class="lang === locale ? '!bg-primary/10 text-primary' : ''"
class="group"
:value="lang"
@click="changeLanguage(lang)"
>
<div
:class="lang === locale ? '!font-semibold !text-primary' : ''"
class="nc-project-menu-item capitalize group-hover:text-pink-500"
>
{{ Language[lang] || lang }}
</div>
</a-menu-item>
<a-menu-item>
<a
href="https://docs.nocodb.com/engineering/translation/#how-to-contribute--for-community-members"
target="_blank"
class="caption py-2 text-primary underline hover:opacity-75"
>
{{ $t('activity.translate') }}
</a>
</a-menu-item>
</a-menu>
</template>
<a-dropdown v-else class="select-none color-transition" :trigger="['click']">
<MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
<template #overlay>

23
packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
Unescape View File

@ -102,29 +102,6 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
class="relative shadow-md h-full"
theme="light"
>
<a-tooltip :mouse-enter-delay="1" placement="left">
<template #title> Toggle sidebar </template>
<Transition name="glow">
<div
v-show="sidebarCollapsed || isHovered"
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
>
<MaterialSymbolsChevronRightRounded
v-if="isOpen"
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
@click="isOpen = false"
/>
<MaterialSymbolsChevronLeftRounded
v-else
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
@click="isOpen = true"
/>
</div>
</Transition>
</a-tooltip>
<Toolbar
v-if="isOpen"
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)]"

88
packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
Unescape View File

@ -19,7 +19,7 @@ import { TabType } from '~/composables'
const route = useRoute()
const { appInfo, token } = useGlobal()
const { appInfo, token, signOut, signedIn, user } = useGlobal()
const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
@ -42,6 +42,13 @@ const openDialogKey = ref<string>()
const dropdownOpen = ref(false)
const email = computed(() => user.value?.email ?? '---')
const logout = () => {
signOut()
navigateTo('/signin')
}
/** Sidebar ref */
const sidebar = ref()
@ -234,6 +241,44 @@ definePageMeta({
<a-menu-divider />
<template v-if="signedIn && !isSharedBase">
<a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
<template #title>
<div class="nc-project-menu-item group">
<MdiAccount class="group-hover:text-pink-500 nc-project-preview" />
Account
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded">
<a-menu-item key="0" class="!rounded-t">
<nuxt-link v-t="['c:navbar:user:email']" class="nc-project-menu-item group no-underline" to="/user">
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
<span class="prose">{{ email }}</span>
</nuxt-link>
</a-menu-item>
<a-menu-item key="1" class="!rounded-b">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
<span class="prose">
{{ $t('general.signOut') }}
</span>
</div>
</a-menu-item>
</a-menu>
</a-sub-menu>
</template>
<a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']">
<template #title>
<div class="nc-project-menu-item group">
@ -252,6 +297,23 @@ definePageMeta({
<GeneralPreviewAs />
</a-sub-menu>
<a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
<template #title>
<div class="nc-project-menu-item group">
<MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
Language
<div class="flex-1" />
<MaterialSymbolsChevronRightRounded
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
/>
</div>
</template>
<template #expandIcon></template>
<GeneralLanguage sub-menu />
</a-sub-menu>
</a-menu-item-group>
</a-menu>
</template>
@ -265,29 +327,6 @@ definePageMeta({
</div>
</div>
<a-tooltip :mouse-enter-delay="1" placement="right">
<template #title> Toggle table list </template>
<Transition name="glow">
<div
v-show="!isOpen || isHovered"
class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
>
<MaterialSymbolsChevronLeftRounded
v-if="isOpen"
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
@click="toggle(false)"
/>
<MaterialSymbolsChevronRightRounded
v-else
class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
@click="toggle(true)"
/>
</div>
</Transition>
</a-tooltip>
<DashboardTreeView v-show="isOpen" />
</a-layout-sider>
</template>
@ -324,6 +363,7 @@ definePageMeta({
@apply !border-r-0;
}
}
&:hover .nc-sidebar-left-toggle-icon {
@apply opacity-100;
}

Write Preview
Loading…
Cancel
Save