From aa87e3c2efe1e788ec0b611162ebe01eea50e35f Mon Sep 17 00:00:00 2001 From: braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 19 Aug 2022 10:33:54 +0200 Subject: [PATCH 1/3] chore(gui-v2): fix menu style spacings and colorings --- packages/nc-gui-v2/assets/style-v2.scss | 23 ++- .../components/dashboard/TreeView.vue | 171 ++++++++++++------ .../components/general/MiniSidebar.vue | 8 - .../components/general/PreviewAs.vue | 10 +- .../components/general/language/Menu.vue | 55 +++--- .../components/general/language/index.vue | 22 +-- packages/nc-gui-v2/layouts/base.vue | 20 -- packages/nc-gui-v2/layouts/shared-view.vue | 10 - .../pages/[projectType]/[projectId]/index.vue | 67 +++---- .../[projectType]/[projectId]/index/index.vue | 18 -- 10 files changed, 201 insertions(+), 203 deletions(-) diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss index 786e47c17b..2ff1b5e33b 100644 --- a/packages/nc-gui-v2/assets/style-v2.scss +++ b/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; } diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue index 56726c523c..82d0d95619 100644 --- a/packages/nc-gui-v2/components/dashboard/TreeView.vue +++ b/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>(() => - tables?.value?.reduce((acc: Record, table: TableType) => { - acc[table.id as string] = table +let key = $ref(0) + +const menuRef = $ref() + +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, table) => { + acc[table.id!] = table + return acc }, {}), ) -let key = $ref(0) - -const menuRef = $ref() +const filteredTables = $computed(() => + tables.value?.filter((table) => !filterQuery || table.title.toLowerCase().includes(filterQuery.toLowerCase())), +) let sortable: Sortable @@ -104,37 +125,44 @@ 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() {
-
+
{{ $t('objects.tables') }}
-
+ +
+ {{ $t('tooltip.addTable') }} + + - - diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue index d86bde1fdf..5ffb93ea82 100644 --- a/packages/nc-gui-v2/layouts/base.vue +++ b/packages/nc-gui-v2/layouts/base.vue @@ -108,26 +108,6 @@ const logout = () => { diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue index fd0dcd94c1..e22603198c 100644 --- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue +++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue @@ -196,7 +196,7 @@ definePageMeta({
- + Copy Project Info
@@ -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)" > - + Swagger: Rest APIs
- + Copy Auth Token
@@ -231,7 +231,7 @@ definePageMeta({ class="nc-project-menu-item group" @click="toggleDialog(true, 'teamAndAuth')" > - + Team & Settings
@@ -241,7 +241,7 @@ definePageMeta({