chore(gui-v2): fix menu style spacings and colorings

packages/nc-gui-v2/assets/style-v2.scss

@@ -213,11 +213,25 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   }
 }
 
-.ant-tabs-dropdown-menu-title-content{
-  @apply flex items-center;
+.ant-dropdown-menu-submenu {
+  @apply !py-0;
+
+  .ant-dropdown-menu, .ant-menu {
+    @apply m-0 p-0;
   }
 
+  .ant-menu-item {
+    @apply !m-0 !px-2;
+  }
+}
 
+.ant-dropdown-menu-submenu-popup {
+  @apply scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !shadow !rounded;
+}
+
+.ant-tabs-dropdown-menu-title-content {
+  @apply flex items-center;
+}
 
 .ant-dropdown-menu-item-group-list {
   @apply !mx-0;
@@ -231,10 +245,11 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
   @apply m-0;
 }
 
-.ant-dropdown-menu-item {
+.ant-dropdown-menu-item, .ant-menu-item {
   @apply !py-0 active:(ring ring-pink-500);
 }
 
-.ant-dropdown-menu-title-conten{
+.ant-dropdown-menu-title-content,
+.ant-menu-title-content {
   @apply !py-0;
 }

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -2,11 +2,23 @@
 import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
+import {
+  computed,
+  inject,
+  reactive,
+  ref,
+  useDialog,
+  useNuxtApp,
+  useProject,
+  useTable,
+  useTabs,
+  useUIPermission,
+  watchEffect,
+} from '#imports'
 import DlgAirtableImport from '~/components/dlg/AirtableImport.vue'
 import DlgQuickImport from '~/components/dlg/QuickImport.vue'
 import DlgTableCreate from '~/components/dlg/TableCreate.vue'
+import DlgTableRename from '~/components/dlg/TableRename.vue'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
@@ -27,16 +39,25 @@ const { isUIAllowed } = useUIPermission()
 
 const isLocked = inject('TreeViewIsLockedInj')
 
-const tablesById = $computed<Record<string, TableType>>(() =>
-  tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
-    acc[table.id as string] = table
+let key = $ref(0)
+
+const menuRef = $ref<HTMLLIElement>()
+
+const filterQuery = $ref('')
+
+const activeTable = computed(() => ([TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null))
+
+const tablesById = $computed(() =>
+  tables.value?.reduce((acc: Record<string, TableType>, table) => {
+    acc[table.id!] = table
+
     return acc
   }, {}),
 )
 
-let key = $ref(0)
-
-const menuRef = $ref<HTMLLIElement>()
+const filteredTables = $computed(() =>
+  tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())),
+)
 
 let sortable: Sortable
 
@@ -104,38 +125,45 @@ const icon = (table: TableType) => {
   }
 }
 
-const filterQuery = $ref('')
-const filteredTables = $computed(() => {
-  return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
-})
-
 const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
+
 const setMenuContext = (type: 'table' | 'main', value?: any) => {
   contextMenuTarget.type = type
   contextMenuTarget.value = value
+
   $e('c:table:create:navdraw:right-click')
 }
 
-const renameTableDlg = ref(false)
-const renameTableMeta = ref()
-const showRenameTableDlg = (table: TableType, rightClick = false) => {
-  $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
-  renameTableMeta.value = table
-  renameTableDlg.value = true
-}
 const reloadTables = async () => {
   $e('a:table:refresh:navdraw')
+
   await loadTables()
 }
+
 const addTableTab = (table: TableType) => {
   $e('a:table:open')
+
   addTab({ title: table.title, id: table.id, type: table.type as any })
 }
 
-const activeTable = computed(() => {
-  return [TabType.TABLE, TabType.VIEW].includes(activeTab.value?.type) ? activeTab.value.title : null
+function openRenameTableDialog(table: TableType, rightClick = false) {
+  $e(rightClick ? 'c:table:rename:navdraw:right-click' : 'c:table:rename:navdraw:options')
+
+  const isOpen = ref(true)
+
+  const { close } = useDialog(DlgTableRename, {
+    'modelValue': isOpen,
+    'tableMeta': table,
+    'onUpdate:modelValue': closeDialog,
   })
 
+  function closeDialog() {
+    isOpen.value = false
+
+    close(1000)
+  }
+}
+
 function openQuickImportDialog(type: string) {
   $e(`a:actions:import-${type}`)
 
@@ -195,30 +223,29 @@ function openTableCreateDialog() {
       <div
         class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-column scrollbar-thin-dull"
         :class="{ 'mb-[20px]': isSharedBase }"
-        style="direction: rtl"
-      >
-        <div
-          style="direction: ltr"
-          class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
-          @contextmenu="setMenuContext('main')"
       >
+        <div class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
           <span class="flex-grow text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
             {{ $t('objects.tables') }}
 
             <template v-if="tables?.length"> ({{ tables.length }}) </template>
           </span>
         </div>
-        <div style="direction: ltr" class="flex-1">
+
+        <div class="flex-1">
           <div
             class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
             @click="openTableCreateDialog"
           >
             <MdiPlus />
+
             <span class="text-gray-500 group-hover:(text-primary/100) flex-1">{{ $t('tooltip.addTable') }}</span>
+
             <a-dropdown :trigger="['click']" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100" />
+
               <template #overlay>
-                <a-menu class="nc-add-project-menu !py-0 ml-6 rounded text-sm">
+                <a-menu class="!py-0 rounded text-sm">
                   <a-menu-item-group title="QUICK IMPORT FROM" class="!px-0 !mx-0">
                     <a-menu-item
                       v-if="isUIAllowed('airtableImport')"
@@ -321,23 +348,22 @@ function openTableCreateDialog() {
                     <MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
 
                     <template #overlay>
-                      <a-menu class="cursor-pointer">
+                      <a-menu class="!py-0 rounded text-sm">
                         <a-menu-item
                           v-if="isUIAllowed('table-rename')"
                           v-t="['c:table:rename']"
-                          class="!text-xs"
-                          @click="showRenameTableDlg(table)"
-                          ><div>{{ $t('general.rename') }}</div></a-menu-item
+                          @click="openRenameTableDialog(table)"
                         >
+                          <div class="nc-project-menu-item">
+                            {{ $t('general.rename') }}
+                          </div>
+                        </a-menu-item>
 
-                        <a-menu-item
-                          v-if="isUIAllowed('table-delete')"
-                          v-t="['c:table:delete']"
-                          class="!text-xs"
-                          @click="deleteTable(table)"
-                        >
-                          {{ $t('general.delete') }}</a-menu-item
-                        >
+                        <a-menu-item v-if="isUIAllowed('table-delete')" v-t="['c:table:delete']" @click="deleteTable(table)">
+                          <div class="nc-project-menu-item">
+                            {{ $t('general.delete') }}
+                          </div>
+                        </a-menu-item>
                       </a-menu>
                     </template>
                   </a-dropdown>
@@ -350,35 +376,43 @@ function openTableCreateDialog() {
             <div class="flex flex-col align-center">
               <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
-              <a-button type="primary" @click.stop="openTableCreateDialog">{{ $t('tooltip.addTable') }}</a-button>
+              <a-button type="primary" @click.stop="openTableCreateDialog">
+                {{ $t('tooltip.addTable') }}
+              </a-button>
             </div>
           </a-card>
         </div>
       </div>
 
       <template v-if="!isLocked" #overlay>
-        <a-menu class="cursor-pointer">
+        <a-menu class="!py-0 rounded text-sm">
           <template v-if="contextMenuTarget.type === 'table'">
             <a-menu-item
               v-if="isUIAllowed('table-rename')"
               v-t="['c:table:rename']"
-              class="!text-xs"
-              @click="showRenameTableDlg(contextMenuTarget.value)"
+              @click="openRenameTableDialog(contextMenuTarget.value)"
             >
+              <div class="nc-project-menu-item">
                 {{ $t('general.rename') }}
+              </div>
             </a-menu-item>
+
             <a-menu-item
               v-if="isUIAllowed('table-delete')"
               v-t="['c:table:delete']"
-              class="!text-xs"
               @click="deleteTable(contextMenuTarget.value)"
             >
+              <div class="nc-project-menu-item">
                 {{ $t('general.delete') }}
+              </div>
             </a-menu-item>
           </template>
+
           <template v-else>
-            <a-menu-item v-t="['c:table:reload']" class="!text-xs" @click="reloadTables">
+            <a-menu-item v-t="['c:table:reload']" @click="reloadTables">
+              <div class="nc-project-menu-item">
                 {{ $t('general.reload') }}
+              </div>
             </a-menu-item>
           </template>
         </a-menu>
@@ -388,15 +422,8 @@ function openTableCreateDialog() {
     <a-divider class="mt-0 mb-0" />
 
     <div class="items-center flex justify-center p-2">
-      <!--
-     Todo : move the component
-     <GithubStarButton />
-     -->
-
       <GeneralShareBaseButton class="!mr-0" />
     </div>
-
-    <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
 </template>
 
@@ -472,4 +499,28 @@ function openTableCreateDialog() {
     @apply pr-6 !border-0;
   }
 }
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply !mx-0;
+}
+
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+
+:deep(.ant-dropdown-menu-item) {
+  @apply !py-0 active:(ring ring-pink-500);
+}
+
+:deep(.ant-dropdown-menu-title-content) {
+  @apply !p-0;
+}
 </style>

packages/nc-gui-v2/components/general/MiniSidebar.vue

@@ -129,12 +129,4 @@ const logout = () => {
     }
   }
 }
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
 </style>

packages/nc-gui-v2/components/general/PreviewAs.vue

@@ -77,11 +77,13 @@ watch(previewAs, () => window.location.reload())
 
   <template v-else>
     <template v-for="role of roleList" :key="role.title">
-      <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
+      <a-menu-item @click="previewAs = role.title">
         <div class="nc-project-menu-item group">
           <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
 
-          <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
+          <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">
+            {{ role.title }}
+          </span>
         </div>
       </a-menu-item>
     </template>
@@ -91,7 +93,9 @@ watch(previewAs, () => window.location.reload())
         <div class="nc-project-menu-item group">
           <MdiClose class="group-hover:text-pink-500" />
           <!-- Reset Preview -->
-          <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
+          <span class="text-capitalize text-xs whitespace-nowrap">
+            {{ $t('activity.resetReview') }}
+          </span>
         </div>
       </a-menu-item>
     </template>

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

@@ -1,31 +1,41 @@
 <script lang="ts" setup>
 import { Language } from '~/lib'
 import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
+
 const { $e } = useNuxtApp()
+
 const { lang: currentLang } = useGlobal()
+
 const { availableLocales = ['en'], locale } = useI18n()
+
 const languages = $computed(() => availableLocales.sort())
+
 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) {
   currentLang.value = lang
   locale.value = lang
+
   applyDirection()
+
   $e('c:navbar:lang', { lang })
 }
+
 onMounted(() => {
   applyDirection()
 })
 </script>
 
 <template>
-  <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"
@@ -48,5 +58,4 @@ onMounted(() => {
       {{ $t('activity.translate') }}
     </a>
   </a-menu-item>
-  </a-menu>
 </template>

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

@@ -3,25 +3,9 @@
     <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
 
     <template #overlay>
+      <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
         <GeneralLanguageMenu />
+      </a-menu>
     </template>
   </a-dropdown>
 </template>
-
-<style scoped>
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-</style>

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

@@ -108,26 +108,6 @@ const logout = () => {
 </template>
 
 <style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply !mx-0;
-}
-
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-
 .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-pink-500) hover:(ring ring-pink-500);
 

packages/nc-gui-v2/layouts/shared-view.vue

@@ -40,13 +40,3 @@ export default {
     </a-layout>
   </a-layout>
 </template>
-
-<style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-</style>

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -196,7 +196,7 @@ definePageMeta({
 
                   <a-menu-item key="copy">
                     <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
-                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      <MdiContentCopy class="group-hover:text-pink-500" />
                       Copy Project Info
                     </div>
                   </a-menu-item>
@@ -210,14 +210,14 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
-                      <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
+                      <MdiApi class="group-hover:text-pink-500" />
                       Swagger: Rest APIs
                     </div>
                   </a-menu-item>
 
                   <a-menu-item key="copy">
                     <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
-                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500 nc-copy-project-info" />
+                      <MdiScriptTextKeyOutline class="group-hover:text-pink-500" />
                       Copy Auth Token
                     </div>
                   </a-menu-item>
@@ -231,7 +231,7 @@ definePageMeta({
                       class="nc-project-menu-item group"
                       @click="toggleDialog(true, 'teamAndAuth')"
                     >
-                      <MdiCog class="group-hover:text-pink-500 nc-team-settings" />
+                      <MdiCog class="group-hover:text-pink-500" />
                       Team & Settings
                     </div>
                   </a-menu-item>
@@ -241,7 +241,7 @@ definePageMeta({
                   <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">
-                        <MdiFileEyeOutline class="group-hover:text-pink-500 nc-project-preview" />
+                        <MdiFileEyeOutline class="group-hover:text-pink-500" />
                         Preview Project As
 
                         <div class="flex-1" />
@@ -257,7 +257,10 @@ definePageMeta({
                     <GeneralPreviewAs />
                   </a-sub-menu>
 
-                  <a-sub-menu v-if="isUIAllowed('previewAs')" key="language">
+                  <a-sub-menu
+                    key="language"
+                    class="lang-menu scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded-b"
+                  >
                     <template #title>
                       <div class="nc-project-menu-item group">
                         <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
@@ -278,7 +281,7 @@ definePageMeta({
                     <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" />
+                          <MdiAccount class="group-hover:text-pink-500" />
                           Account
                           <div class="flex-1" />
 
@@ -290,12 +293,11 @@ definePageMeta({
 
                       <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>
+                          <span class="prose-sm">{{ email }}</span>
                         </nuxt-link>
                       </a-menu-item>
 
@@ -303,18 +305,18 @@ definePageMeta({
                         <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">
+                          <span class="prose-sm">
                             {{ $t('general.signOut') }}
                           </span>
                         </div>
                       </a-menu-item>
-                      </a-menu>
                     </a-sub-menu>
                   </template>
                 </a-menu-item-group>
               </a-menu>
             </template>
           </a-dropdown>
+
           <div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2">
             <MdiBackburger
               class="cursor-pointer transform transition-transform duration-500"
@@ -337,18 +339,6 @@ definePageMeta({
 </template>
 
 <style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-
-:deep(.ant-dropdown-menu-item) {
-  @apply !py-0 active:(ring ring-pink-500);
-}
-
 :global(#nc-sidebar-left .ant-layout-sider-collapsed) {
   @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
 }
@@ -356,6 +346,7 @@ definePageMeta({
 .nc-left-sidebar {
   .nc-sidebar-left-toggle-icon {
     @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
+
     .nc-left-sidebar {
       @apply !border-r-0;
     }

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

@@ -106,24 +106,6 @@ const { isOpen, toggle } = useSidebar()
   }
 }
 
-.nc-add-project-menu {
-  :deep(.ant-dropdown-menu-item-group-list) {
-    @apply !mx-0;
-  }
-
-  :deep(.ant-dropdown-menu-item-group-title) {
-    @apply border-b-1;
-  }
-
-  :deep(.ant-dropdown-menu-item-group-list) {
-    @apply m-0;
-  }
-
-  :deep(.ant-dropdown-menu-item) {
-    @apply !py-0 active:(ring ring-pink-500);
-  }
-}
-
 :deep(.ant-menu-item-selected) {
   @apply text-inherit !bg-inherit;
 }