mirror of
https://github.com/nocodb/nocodb.git
synced 2026-05-02 02:06:57 +00:00
Nc feat: header revamp (#9204)
* fix(nc-gui): update topbar breadcrumb divider * feat(nc-gui): custom list component setup * fix(nc-gui): update reload view data tooltip * feat(nc-gui): custom list component * feat(nc-gui): add table list menu * fix(nc-gui): small changes * fix(nc-gui): add bases list dropdown * fix(nc-gui): show chevron icon in mobile view * feat(nc-gui): add view list dropdown in topbar * fix(nc-gui): auto scroll selected list option on open dropdown * feat(nc-gui): add typedocs for each fun from custom list component * chore(nc-gui): add typedocs for new functions * fix(nc-gui): view search issue on default view * fix(nc-gui): reset selected option hover state on search input * fix(nc-gui): font weight issue * fix(nc-gui): show reload data topbar option * fix(nc-gui): change view action menu position * fix(nc-gui): font weight issue * feat(nc-gui): create new table/view from topbar * fix(nc-gui): update other page headers * fix(nc-gui): project view header * fix(nc-gui): update admin panel workspaces page header * fix(nc-gui): admin panel base/workspace user page header * fix(nc-gui): admin panel scroll issue * fix(nc-gui): update project home page * fix(nc-gui): table list scroll issue * chore(nc-gui): lint * fix(nc-gui): reset breadcrumb btn hover state on open dropdown * fix(nc-gui): review changes * fix(nc-gui): use slash icon instead of text * fix(nc-gui): pr review changes * fix(nc-gui): details tab height issue * fix(nc-gui): add user account pages breadcrumb * fix(nc-gui): hide rename view option * fix(nc-gui): disable scrollIntoView on base rename * fix(nc-gui): on rename view select text * fix(nc-gui): user menu overflow issue if sidebar baselist is scrollable * feat(nc-gui): use virtual scrolling for NcList component * fix(nc-gui): reduce chevron icon opacity * chore(nc-gui): lint * fix(nc-gui): ai review changes * fix(nc-gui): view rename input focus issue * fix(nc-gui): topbar width issue * fix(nc-gui): udpate toolbar height * fix(nc-gui): update chevron icon from breadcrumb * fix(nc-gui): update breadcrumb icon size * fix(nc-gui): add min width for breadcrumb * fix(nc-gui): add topbar bottom border * fix(nc-gui): details tab heigth and alignment issue * fix(nc-gui): hide basename and show only icon * fix(nc-gui): update NcList component * fix(nc-gui): update admin panel header * fix(nc-gui): add header in account settings pages * fix(nc-gui): add account pages header oss * fix(nc-gui): udpate max width * chore(nc-gui): lint * fix(nc-gui(: reduce topbar top padding * fix(nc-gui): typo error * fix(nc-gui): review changes * fix(nc-gui): review changes * fix(nc-gui): slash icon conflict * fix(nc-gui): review changes * fix(nc-gui): remove chevron icon & add list wrapper div to control height * fix(nc-gui): ncList keyboard navigation issue * chore(nc-gui): lint
This commit is contained in:
Ramesh Mane
@@ -17,7 +17,7 @@ const { sorts, sortDirection, loadSorts, handleGetSortedData, saveOrUpdate: save
|
||||
const isSuper = computed(() => orgRoles.value?.[OrgUserRoles.SUPER_ADMIN])
|
||||
|
||||
const orgStore = useOrg()
|
||||
const { orgId } = storeToRefs(orgStore)
|
||||
const { orgId, org } = storeToRefs(orgStore)
|
||||
|
||||
const isAdminPanel = inject(IsAdminPanelInj, ref(false))
|
||||
|
||||
@@ -255,129 +255,149 @@ const customRow = (record: Record<string, any>) => ({
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="nc-collaborator-table-container nc-access-settings-view flex flex-col"
|
||||
:class="{
|
||||
'px-6': isAdminPanel,
|
||||
'px-1': !isAdminPanel,
|
||||
'h-[calc(100vh_-_100px)]': !isAdminPanel,
|
||||
}"
|
||||
class="nc-collaborator-table-container pt-6 nc-access-settings-view h-[calc(100vh-8rem)] flex flex-col gap-6"
|
||||
>
|
||||
<div v-if="isAdminPanel" class="font-bold w-full text-2xl" data-rec="true">
|
||||
<div class="flex items-center gap-3">
|
||||
<div v-if="isAdminPanel">
|
||||
<div class="nc-breadcrumb px-2">
|
||||
<div class="nc-breadcrumb-item">
|
||||
{{ org.title }}
|
||||
</div>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
<NuxtLink
|
||||
:href="`/admin/${orgId}/bases`"
|
||||
class="!hover:(text-black underline-gray-600) flex items-center !text-black !underline-transparent ml-0.75 max-w-1/4"
|
||||
class="!hover:(text-gray-800 underline-gray-600) flex items-center !text-gray-700 !underline-transparent ml-0.75 max-w-1/4"
|
||||
>
|
||||
<component :is="iconMap.arrowLeft" class="text-3xl" />
|
||||
|
||||
{{ $t('objects.projects') }}
|
||||
</NuxtLink>
|
||||
|
||||
<span class="text-2xl"> / </span>
|
||||
<GeneralBaseIconColorPicker readonly />
|
||||
<span class="text-base">
|
||||
{{ currentBase?.title }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="w-full flex justify-between items-center max-w-350 gap-3">
|
||||
<a-input
|
||||
v-model:value="userSearchText"
|
||||
:placeholder="$t('title.searchMembers')"
|
||||
:disabled="isLoading"
|
||||
allow-clear
|
||||
class="nc-input-border-on-value !max-w-90 !h-8 !px-3 !py-1 !rounded-lg"
|
||||
>
|
||||
<template #prefix>
|
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<NcButton :disabled="isLoading" size="small" @click="isInviteModalVisible = true">
|
||||
<div class="flex items-center gap-1">
|
||||
<component :is="iconMap.plus" class="w-4 h-4" />
|
||||
{{ $t('activity.addMembers') }}
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
|
||||
<NcTable
|
||||
v-model:order-by="orderBy"
|
||||
:is-data-loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="sortedCollaborators"
|
||||
:bordered="false"
|
||||
:custom-row="customRow"
|
||||
class="flex-1 nc-collaborators-list max-w-350"
|
||||
>
|
||||
<template #emptyText>
|
||||
<a-empty :description="$t('title.noMembersFound')" />
|
||||
</template>
|
||||
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'select'">
|
||||
<NcCheckbox v-model:checked="selectAll" :disabled="!sortedCollaborators.length" />
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ column.title }}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'select'">
|
||||
<NcCheckbox v-model:checked="selected[record.id]" />
|
||||
</template>
|
||||
|
||||
<div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
|
||||
<GeneralUserIcon size="base" :email="record.email" class="flex-none" />
|
||||
<div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
|
||||
<div class="flex gap-3">
|
||||
<NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
|
||||
<template #title>
|
||||
{{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
|
||||
</template>
|
||||
{{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
<NcTooltip class="truncate max-w-full text-xs text-gray-600" show-on-truncate-only>
|
||||
<template #title>
|
||||
{{ record.email }}
|
||||
</template>
|
||||
{{ record.email }}
|
||||
</NcTooltip>
|
||||
<div class="nc-breadcrumb-item">
|
||||
{{ $t('objects.projects') }}
|
||||
</div>
|
||||
</NuxtLink>
|
||||
<GeneralIcon icon="ncSlash1" class="nc-breadcrumb-divider" />
|
||||
<div class="nc-breadcrumb-item active truncate capitalize">
|
||||
{{ currentBase?.title }}
|
||||
</div>
|
||||
<div v-if="column.key === 'role'">
|
||||
<template v-if="accessibleRoles.includes(record.roles)">
|
||||
<RolesSelector
|
||||
:role="record.roles"
|
||||
:roles="accessibleRoles"
|
||||
:inherit="
|
||||
isEeUI && record.workspace_roles && WorkspaceRolesToProjectRoles[record.workspace_roles]
|
||||
? WorkspaceRolesToProjectRoles[record.workspace_roles]
|
||||
: null
|
||||
"
|
||||
show-inherit
|
||||
:description="false"
|
||||
:on-role-change="(role) => updateCollaborator(record, role as ProjectRoles)"
|
||||
/>
|
||||
</div>
|
||||
<NcPageHeader>
|
||||
<template #icon>
|
||||
<div class="nc-page-header-icon flex justify-center items-center h-5 w-5">
|
||||
<GeneralBaseIconColorPicker readonly />
|
||||
</div>
|
||||
</template>
|
||||
<template #title>
|
||||
<span data-rec="true" class="capitalize">
|
||||
{{ currentBase?.title }}
|
||||
</span>
|
||||
</template>
|
||||
</NcPageHeader>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="h-full flex flex-col items-center gap-6 px-6 pt-6"
|
||||
:class="{
|
||||
'border-t-1 border-gray-200': isAdminPanel,
|
||||
}"
|
||||
>
|
||||
<div v-if="!isAdminPanel" class="w-full flex justify-between items-center max-w-350 gap-3">
|
||||
<a-input
|
||||
v-model:value="userSearchText"
|
||||
:placeholder="$t('title.searchMembers')"
|
||||
:disabled="isLoading"
|
||||
allow-clear
|
||||
class="nc-input-border-on-value !max-w-90 !h-8 !px-3 !py-1 !rounded-lg"
|
||||
>
|
||||
<template #prefix>
|
||||
<GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
|
||||
</template>
|
||||
</a-input>
|
||||
|
||||
<NcButton :disabled="isLoading" size="small" @click="isInviteModalVisible = true">
|
||||
<div class="flex items-center gap-1">
|
||||
<component :is="iconMap.plus" class="w-4 h-4" />
|
||||
{{ $t('activity.addMembers') }}
|
||||
</div>
|
||||
</NcButton>
|
||||
</div>
|
||||
|
||||
<NcTable
|
||||
v-model:order-by="orderBy"
|
||||
:is-data-loading="isLoading"
|
||||
:columns="columns"
|
||||
:data="sortedCollaborators"
|
||||
:bordered="false"
|
||||
:custom-row="customRow"
|
||||
class="flex-1 nc-collaborators-list max-w-350"
|
||||
>
|
||||
<template #emptyText>
|
||||
<a-empty :description="$t('title.noMembersFound')" />
|
||||
</template>
|
||||
|
||||
<template #headerCell="{ column }">
|
||||
<template v-if="column.key === 'select'">
|
||||
<NcCheckbox v-model:checked="selectAll" :disabled="!sortedCollaborators.length" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<RolesBadge :border="false" :role="record.roles" />
|
||||
{{ column.title }}
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="column.key === 'created_at'">
|
||||
<NcTooltip class="max-w-full">
|
||||
<template #title>
|
||||
{{ parseStringDateTime(record.created_at) }}
|
||||
</template>
|
||||
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'select'">
|
||||
<NcCheckbox v-model:checked="selected[record.id]" />
|
||||
</template>
|
||||
|
||||
<div v-if="column.key === 'email'" class="w-full flex gap-3 items-center users-email-grid">
|
||||
<GeneralUserIcon size="base" :email="record.email" class="flex-none" />
|
||||
<div class="flex flex-col flex-1 max-w-[calc(100%_-_44px)]">
|
||||
<div class="flex gap-3">
|
||||
<NcTooltip class="truncate max-w-full text-gray-800 capitalize font-semibold" show-on-truncate-only>
|
||||
<template #title>
|
||||
{{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
|
||||
</template>
|
||||
{{ record.display_name || record.email.slice(0, record.email.indexOf('@')) }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
<NcTooltip class="truncate max-w-full text-xs text-gray-600" show-on-truncate-only>
|
||||
<template #title>
|
||||
{{ record.email }}
|
||||
</template>
|
||||
{{ record.email }}
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="column.key === 'role'">
|
||||
<template v-if="accessibleRoles.includes(record.roles)">
|
||||
<RolesSelector
|
||||
:role="record.roles"
|
||||
:roles="accessibleRoles"
|
||||
:inherit="
|
||||
isEeUI && record.workspace_roles && WorkspaceRolesToProjectRoles[record.workspace_roles]
|
||||
? WorkspaceRolesToProjectRoles[record.workspace_roles]
|
||||
: null
|
||||
"
|
||||
show-inherit
|
||||
:description="false"
|
||||
:on-role-change="(role) => updateCollaborator(record, role as ProjectRoles)"
|
||||
/>
|
||||
</template>
|
||||
<span>
|
||||
{{ timeAgo(record.created_at) }}
|
||||
</span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</template>
|
||||
</NcTable>
|
||||
<template v-else>
|
||||
<RolesBadge :border="false" :role="record.roles" />
|
||||
</template>
|
||||
</div>
|
||||
<div v-if="column.key === 'created_at'">
|
||||
<NcTooltip class="max-w-full">
|
||||
<template #title>
|
||||
{{ parseStringDateTime(record.created_at) }}
|
||||
</template>
|
||||
<span>
|
||||
{{ timeAgo(record.created_at) }}
|
||||
</span>
|
||||
</NcTooltip>
|
||||
</div>
|
||||
</template>
|
||||
</NcTable>
|
||||
</div>
|
||||
|
||||
<LazyDlgInviteDlg v-model:model-value="isInviteModalVisible" :base-id="currentBase?.id" type="base" />
|
||||
</div>
|
||||
@@ -395,4 +415,10 @@ const customRow = (record: Record<string, any>) => ({
|
||||
:deep(.nc-collaborator-role-select .ant-select-selector) {
|
||||
@apply !rounded;
|
||||
}
|
||||
|
||||
.nc-page-header-icon {
|
||||
:deep(svg) {
|
||||
@apply h-4.5 w-4.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user