Browse Source

Merge pull request #3243 from nocodb/chore/menu-styles

chore(gui-v2): fix menu style spacings and colorings
pull/3246/head
Pranav C 2 years ago committed by GitHub
parent
commit
8728a713ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 23
      packages/nc-gui-v2/assets/style-v2.scss
  2. 182
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  3. 8
      packages/nc-gui-v2/components/general/MiniSidebar.vue
  4. 10
      packages/nc-gui-v2/components/general/PreviewAs.vue
  5. 55
      packages/nc-gui-v2/components/general/language/Menu.vue
  6. 22
      packages/nc-gui-v2/components/general/language/index.vue
  7. 20
      packages/nc-gui-v2/layouts/base.vue
  8. 10
      packages/nc-gui-v2/layouts/shared-view.vue
  9. 68
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
  10. 19
      packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue

23
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{ .ant-dropdown-menu-submenu {
@apply flex items-center; @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 { .ant-dropdown-menu-item-group-list {
@apply !mx-0; @apply !mx-0;
@ -231,10 +245,11 @@ h1, h2, h3, h4, h5, h6, p, label, button, textarea, select {
@apply m-0; @apply m-0;
} }
.ant-dropdown-menu-item { .ant-dropdown-menu-item, .ant-menu-item {
@apply !py-0 active:(ring ring-pink-500); @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; @apply !py-0;
} }

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

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

8
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> </style>

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

@ -77,11 +77,13 @@ watch(previewAs, () => window.location.reload())
<template v-else> <template v-else>
<template v-for="role of roleList" :key="role.title"> <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"> <div class="nc-project-menu-item group">
<component :is="roleIcon[role.title]" class="group-hover:text-pink-500" /> <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> </div>
</a-menu-item> </a-menu-item>
</template> </template>
@ -91,7 +93,9 @@ watch(previewAs, () => window.location.reload())
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<MdiClose class="group-hover:text-pink-500" /> <MdiClose class="group-hover:text-pink-500" />
<!-- Reset Preview --> <!-- 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> </div>
</a-menu-item> </a-menu-item>
</template> </template>

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

@ -1,52 +1,61 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Language } from '~/lib' import { Language } from '~/lib'
import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports' import { onMounted, useGlobal, useI18n, useNuxtApp } from '#imports'
const { $e } = useNuxtApp() const { $e } = useNuxtApp()
const { lang: currentLang } = useGlobal() const { lang: currentLang } = useGlobal()
const { availableLocales = ['en'], locale } = useI18n() const { availableLocales = ['en'], locale } = useI18n()
const languages = $computed(() => availableLocales.sort()) const languages = $computed(() => availableLocales.sort())
const isRtlLang = $computed(() => ['fa'].includes(currentLang.value)) const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
function applyDirection() { function applyDirection() {
const targetDirection = isRtlLang ? 'rtl' : 'ltr' const targetDirection = isRtlLang ? 'rtl' : 'ltr'
const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr' const oppositeDirection = targetDirection === 'ltr' ? 'rtl' : 'ltr'
document.body.classList.remove(oppositeDirection) document.body.classList.remove(oppositeDirection)
document.body.classList.add(targetDirection) document.body.classList.add(targetDirection)
document.body.style.direction = targetDirection document.body.style.direction = targetDirection
} }
function changeLanguage(lang: string) { function changeLanguage(lang: string) {
currentLang.value = lang currentLang.value = lang
locale.value = lang locale.value = lang
applyDirection() applyDirection()
$e('c:navbar:lang', { lang }) $e('c:navbar:lang', { lang })
} }
onMounted(() => { onMounted(() => {
applyDirection() applyDirection()
}) })
</script> </script>
<template> <template>
<a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded"> <a-menu-item
<a-menu-item v-for="lang of languages"
v-for="lang of languages" :key="lang"
:key="lang" :class="lang === locale ? '!bg-primary/10 text-primary' : ''"
:class="lang === locale ? '!bg-primary/10 text-primary' : ''" class="group"
class="group" :value="lang"
:value="lang" @click="changeLanguage(lang)"
@click="changeLanguage(lang)" >
<div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize">
{{ Language[lang] || lang }}
</div>
</a-menu-item>
<a-menu-item class="mt-1">
<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"
> >
<div :class="lang === locale ? '!font-semibold !text-primary' : ''" class="nc-project-menu-item capitalize"> {{ $t('activity.translate') }}
{{ Language[lang] || lang }} </a>
</div> </a-menu-item>
</a-menu-item>
<a-menu-item class="mt-1">
<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> </template>

22
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" /> <MaterialSymbolsTranslate v-bind="$attrs" class="md:text-xl cursor-pointer nc-menu-translate" />
<template #overlay> <template #overlay>
<GeneralLanguageMenu /> <a-menu class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0 rounded">
<GeneralLanguageMenu />
</a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
</template> </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>

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

@ -108,26 +108,6 @@ const logout = () => {
</template> </template>
<style lang="scss" scoped> <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 { .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); @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);

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

@ -40,13 +40,3 @@ export default {
</a-layout> </a-layout>
</a-layout> </a-layout>
</template> </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>

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

@ -196,7 +196,7 @@ definePageMeta({
<a-menu-item key="copy"> <a-menu-item key="copy">
<div class="nc-project-menu-item group" @click.stop="copyProjectInfo"> <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 Copy Project Info
</div> </div>
</a-menu-item> </a-menu-item>
@ -210,14 +210,14 @@ definePageMeta({
class="nc-project-menu-item group" class="nc-project-menu-item group"
@click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)" @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 Swagger: Rest APIs
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item key="copy"> <a-menu-item key="copy">
<div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken"> <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 Copy Auth Token
</div> </div>
</a-menu-item> </a-menu-item>
@ -231,17 +231,17 @@ definePageMeta({
class="nc-project-menu-item group" class="nc-project-menu-item group"
@click="toggleDialog(true, 'teamAndAuth')" @click="toggleDialog(true, 'teamAndAuth')"
> >
<MdiCog class="group-hover:text-pink-500 nc-team-settings" /> <MdiCog class="group-hover:text-pink-500" />
Team & Settings Team & Settings
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-divider /> <a-menu-divider />
<a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as" v-t="['c:navdraw:preview-as']"> <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
<template #title> <template #title>
<div class="nc-project-menu-item group"> <div v-t="['c:navdraw:preview-as']" 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 Preview Project As
<div class="flex-1" /> <div class="flex-1" />
@ -257,7 +257,7 @@ definePageMeta({
<GeneralPreviewAs /> <GeneralPreviewAs />
</a-sub-menu> </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">
<template #title> <template #title>
<div class="nc-project-menu-item group"> <div class="nc-project-menu-item group">
<MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" /> <MaterialSymbolsTranslate class="group-hover:text-pink-500 nc-language" />
@ -278,7 +278,7 @@ definePageMeta({
<a-sub-menu v-if="isUIAllowed('previewAs')" key="account"> <a-sub-menu v-if="isUIAllowed('previewAs')" key="account">
<template #title> <template #title>
<div class="nc-project-menu-item group"> <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 Account
<div class="flex-1" /> <div class="flex-1" />
@ -290,31 +290,30 @@ definePageMeta({
<template #expandIcon></template> <template #expandIcon></template>
<a-menu class="!py-0 dark:(!bg-gray-800) leading-8 !rounded"> <a-menu-item key="0" class="!rounded-t">
<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">
<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;
<MdiAt class="mt-1 group-hover:text-pink-500" />&nbsp;
<span class="prose-sm">{{ email }}</span>
<span class="prose">{{ email }}</span> </nuxt-link>
</nuxt-link> </a-menu-item>
</a-menu-item>
<a-menu-item key="1" class="!rounded-b">
<a-menu-item key="1" class="!rounded-b"> <div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<div v-t="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout"> <MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
<MdiLogout class="group-hover:(!text-pink-500)" />&nbsp;
<span class="prose-sm">
<span class="prose"> {{ $t('general.signOut') }}
{{ $t('general.signOut') }} </span>
</span> </div>
</div> </a-menu-item>
</a-menu-item>
</a-menu>
</a-sub-menu> </a-sub-menu>
</template> </template>
</a-menu-item-group> </a-menu-item-group>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
<div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2"> <div class="nc-sidebar-left-toggle-icon hover:after:bg-primary/75 group nc-sidebar-add-row flex align-center px-2">
<MdiBackburger <MdiBackburger
class="cursor-pointer transform transition-transform duration-500" class="cursor-pointer transform transition-transform duration-500"
@ -337,18 +336,6 @@ definePageMeta({
</template> </template>
<style lang="scss" scoped> <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) { :global(#nc-sidebar-left .ant-layout-sider-collapsed) {
@apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden; @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
} }
@ -356,6 +343,7 @@ definePageMeta({
.nc-left-sidebar { .nc-left-sidebar {
.nc-sidebar-left-toggle-icon { .nc-sidebar-left-toggle-icon {
@apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100; @apply opacity-0 transition-opactity duration-200 transition-color text-white/80 hover:text-white/100;
.nc-left-sidebar { .nc-left-sidebar {
@apply !border-r-0; @apply !border-r-0;
} }

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

@ -75,6 +75,7 @@ const { isOpen, toggle } = useSidebar()
:deep(.nc-root-tabs) { :deep(.nc-root-tabs) {
& > .ant-tabs-nav { & > .ant-tabs-nav {
@apply !mb-0 before:(!border-b-0); @apply !mb-0 before:(!border-b-0);
.ant-tabs-extra-content { .ant-tabs-extra-content {
@apply !bg-white/0; @apply !bg-white/0;
} }
@ -106,24 +107,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) { :deep(.ant-menu-item-selected) {
@apply text-inherit !bg-inherit; @apply text-inherit !bg-inherit;
} }

Loading…
Cancel
Save