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

feat(nc-gui): new table ui update

pull/6496/head
reenphygeorge 1 year ago committed by sreehari jayaraj
parent
6b53b7b619
commit
0f0bd98f18
2 changed files with 106 additions and 75 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 45
      packages/nc-gui/components/project/AccessSettings.vue
  2. 110
      packages/nc-gui/components/workspace/CollaboratorsList.vue

45
packages/nc-gui/components/project/AccessSettings.vue
Unescape View File

@ -170,24 +170,25 @@ onMounted(async () => {
<div v-if="isSearching" class="nc-collaborators-list items-center justify-center"> <div v-if="isSearching" class="nc-collaborators-list items-center justify-center">
<GeneralLoader size="xlarge" /> <GeneralLoader size="xlarge" />
</div> </div>
<div <div
v-else-if="!collaborators?.length" v-else-if="!collaborators?.length"
class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36" class="nc-collaborators-list w-full h-full flex flex-col items-center justify-center mt-36"
> >
<!-- <Empty :description="$t('title.noMembersFound')" /> --> <Empty description="$t('title.noMembersFound')" />
</div> </div>
<div v-else class="nc-collaborators-list nc-scrollbar-md"> <div v-else class="nc-collaborators-list !mt-10 nc-scrollbar-md rounded-md">
<div class="nc-collaborators-list-header"> <div class="nc-collaborators-list-header bg-gray-50 rounded-t-md">
<div class="flex w-3/5">{{ $t('objects.users') }}</div> <div class="flex w-2/5 text-gray-600">{{ $t('objects.users') }}</div>
<div class="flex w-2/5">{{ $t('title.dateJoined') }}</div> <div class="flex w-2/5 text-gray-600">{{ $t('title.dateJoined') }}</div>
<div class="flex w-1/5">{{ $t('general.access') }}</div> <div class="flex w-2/5 text-gray-600">{{ $t('general.access') }}</div>
<div class="flex w-1/5"></div> <div class="flex w-2/5 text-gray-600">Added By</div>
<div class="flex w-1/5"></div> <div class="flex w-1/5 text-gray-600">Action</div>
</div> </div>
<div class="flex flex-col nc-scrollbar-md"> <div class="flex flex-col nc-scrollbar-md">
<div v-for="(collab, i) of collaborators" :key="i" class="relative w-full nc-collaborators nc-collaborators-list-row"> <div v-for="(collab, i) of collaborators" :key="i" class="relative w-full nc-collaborators nc-collaborators-list-row">
<div class="!py-0 w-3/5 email truncate"> <div class="!py-0 w-2/5 email truncate">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{ <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
collab?.email?.slice(0, 2) collab?.email?.slice(0, 2)
@ -202,7 +203,7 @@ onMounted(async () => {
<div class="text-gray-500 text-xs w-2/5 created-at truncate"> <div class="text-gray-500 text-xs w-2/5 created-at truncate">
{{ timeAgo(collab.created_at) }} {{ timeAgo(collab.created_at) }}
</div> </div>
<div class="w-1/5 roles"> <div class="w-2/5 roles">
<div class="nc-collaborator-role-select p-2"> <div class="nc-collaborator-role-select p-2">
<template v-if="accessibleRoles.includes(collab.roles)"> <template v-if="accessibleRoles.includes(collab.roles)">
<RolesSelector <RolesSelector
@ -222,8 +223,22 @@ onMounted(async () => {
</template> </template>
</div> </div>
</div> </div>
<div class="w-1/5"></div> <div class="w-2/5"></div>
<div class="w-1/5"></div> <div class="w-1/5 pl-5">
<NcDropdown v-if="collab.roles !== ProjectRoles.OWNER" :trigger="['click']">
<MdiDotsVertical
class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)"
/>
<template #overlay>
<NcMenu>
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeProjectUser(activeProjectId!, collab)">
<MaterialSymbolsDeleteOutlineRounded />
Remove user
</NcMenuItem>
</NcMenu>
</template>
</NcDropdown>
</div>
</div> </div>
<InfiniteLoading v-bind="$attrs" @infinite="loadListData"> <InfiniteLoading v-bind="$attrs" @infinite="loadListData">
<template #spinner> <template #spinner>
@ -247,17 +262,17 @@ onMounted(async () => {
} }
.nc-collaborators-list { .nc-collaborators-list {
@apply border-gray-100 mt-1 flex flex-col w-full; @apply border-2 shadow-sm border-gray-100 mt-1 flex flex-col w-full;
// todo: replace/remove 120px with proper value while updating invite ui // todo: replace/remove 120px with proper value while updating invite ui
height: calc(100vh - calc(var(--topbar-height) + 9rem + 120px)); height: calc(100vh - calc(var(--topbar-height) + 9rem + 120px));
} }
.nc-collaborators-list-header { .nc-collaborators-list-header {
@apply flex flex-row justify-between items-center min-h-13 border-b-1 border-gray-100 pl-4 text-gray-500; @apply flex flex-row justify-between items-center min-h-10 border-b-2 shadow-sm border-gray-100 pl-4;
} }
.nc-collaborators-list-row { .nc-collaborators-list-row {
@apply flex flex-row justify-between items-center min-h-16 border-b-1 border-gray-100 pl-4; @apply flex flex-row justify-between items-center min-h-16 border-b-2 shadow-sm border-gray-100 pl-4;
} }
.color-band { .color-band {

110
packages/nc-gui/components/workspace/CollaboratorsList.vue
Unescape View File

@ -56,51 +56,46 @@ onMounted(async () => {
<div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36"> <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
<Empty description="No members found" /> <Empty description="No members found" />
</div> </div>
<table v-else class="nc-collaborators-list-table !nc-scrollbar-md"> <div v-else class="nc-collaborators-list !mt-10 nc-scrollbar-md rounded-md">
<thead> <div class="nc-collaborators-list-header bg-gray-50 rounded-t-md">
<tr> <div class="flex w-2/5 text-gray-600">Users</div>
<th class="w-1/5">Users</th> <div class="flex w-2/5 text-gray-600">Date Joined</div>
<th class="w-1/5">Date Joined</th> <div class="flex w-2/5 text-gray-600">Access</div>
<th class="w-1/5">Access</th> <div class="flex w-2/5 text-gray-600">Added By</div>
<th class="w-1/5"></th> <div class="flex w-1/5 text-gray-600">Action</div>
<th class="w-1/5"></th> </div>
<th></th> <div class="flex flex-col nc-scrollbar-md">
</tr> <div v-for="(collab, i) of filterCollaborators" :key="i"
</thead> class="relative w-full nc-collaborators nc-collaborators-list-row">
<tbody> <div class="!py-0 w-2/5 email truncate">
<tr v-for="(collab, i) of filterCollaborators" :key="i" class="relative w-full nc-collaborators">
<td class="!py-0 w-1/5 email">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{ <span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
collab.email.slice(0, 2) collab.email.slice(0, 2)
}}</span> }}</span>
<span class="truncate">
{{ collab.email }} {{ collab.email }}
</span>
</div>
</div> </div>
</td> <div class="text-gray-500 text-xs w-2/5 created-at truncate">
<td class="text-gray-500 text-xs w-1/5 created-at">
{{ timeAgo(collab.created_at) }} {{ timeAgo(collab.created_at) }}
</td> </div>
<td class="w-1/5 roles"> <div class="w-2/5 roles">
<div class="nc-collaborator-role-select"> <div class="nc-collaborator-role-select">
<template v-if="accessibleRoles.includes(collab.roles)"> <template v-if="accessibleRoles.includes(collab.roles)">
<RolesSelector <RolesSelector :role="collab.roles" :roles="accessibleRoles" :description="false"
:role="collab.roles" :on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)" />
:roles="accessibleRoles"
:description="false"
:on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
/>
</template> </template>
<template v-else> <template v-else>
<RolesBadge class="!bg-white" :role="collab.roles" /> <RolesBadge class="!bg-white" :role="collab.roles" />
</template> </template>
</div> </div>
</td> </div>
<td class="w-1/5"> <div class="w-2/5"></div>
<div class="-left-2.5 top-5"> <div class="w-1/5 pl-5">
<NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']"> <NcDropdown v-if="collab.roles !== WorkspaceUserRoles.OWNER" :trigger="['click']">
<MdiDotsVertical <MdiDotsVertical
class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)" class="border-1 !text-gray-600 h-5.5 w-5.5 rounded outline-0 p-0.5 nc-workspace-menu transform transition-transform !text-gray-400 cursor-pointer hover:(!text-gray-500 bg-gray-100)" />
/>
<template #overlay> <template #overlay>
<NcMenu> <NcMenu>
<NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)"> <NcMenuItem class="!text-red-500 !hover:bg-red-50" @click="removeCollaborator(collab.id)">
@ -111,12 +106,9 @@ onMounted(async () => {
</template> </template>
</NcDropdown> </NcDropdown>
</div> </div>
</td> </div>
<td class="w-1/5 padding"></td> </div>
<td class="w-1/5 padding"></td> </div>
</tr>
</tbody>
</table>
</div> </div>
</template> </template>
@ -125,6 +117,32 @@ onMounted(async () => {
@apply text-[14px] pt-1 text-center; @apply text-[14px] pt-1 text-center;
} }
.nc-collaborators-list {
@apply border-2 shadow-sm border-gray-100 mt-1 flex flex-col w-full;
// todo: replace/remove 120px with proper value while updating invite ui
height: calc(100vh - calc(var(--topbar-height) + 9rem + 120px));
}
.nc-collaborators-list-header {
@apply flex flex-row justify-between items-center min-h-10 border-b-2 shadow-sm border-gray-100 pl-4;
}
.nc-collaborators-list-row {
@apply flex flex-row justify-between items-center min-h-16 border-b-2 shadow-sm border-gray-100 pl-4;
}
.color-band {
@apply w-6 h-6 left-0 top-[10px] rounded-full flex justify-center uppercase text-white font-weight-bold text-xs items-center;
}
:deep(.nc-collaborator-role-select .ant-select-selector) {
@apply !rounded;
}
:deep(.ant-select-selection-item) {
@apply mt-0.75;
}
.nc-collaborators-list-table { .nc-collaborators-list-table {
@apply min-w-[700px] !w-full border-gray-100 mt-1; @apply min-w-[700px] !w-full border-gray-100 mt-1;
@ -154,26 +172,21 @@ onMounted(async () => {
} }
} }
.color-band {
@apply w-6 h-6 left-0 top-[10px] rounded-full flex justify-center uppercase text-white font-weight-bold text-xs items-center;
}
:deep(.nc-collaborator-role-select .ant-select-selector) {
@apply !rounded;
}
table { table {
display: block; display: block;
width: 100%; width: 100%;
} }
thead { thead {
display: block; display: block;
width: 100%; width: 100%;
} }
tr { tr {
display: block; display: block;
width: 100%; width: 100%;
} }
tbody { tbody {
display: block; display: block;
width: 100%; width: 100%;
@ -183,32 +196,35 @@ tbody {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: #f6f6f600 !important; background: #f6f6f600 !important;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: #f6f6f600; background: #f6f6f600;
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background: #f6f6f600; background: #f6f6f600;
} }
} }
tbody { tbody {
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 4px; width: 4px;
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: #f6f6f600 !important; background: #f6f6f600 !important;
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: rgb(215, 215, 215); background: rgb(215, 215, 215);
} }
&::-webkit-scrollbar-thumb:hover { &::-webkit-scrollbar-thumb:hover {
background: rgb(203, 203, 203); background: rgb(203, 203, 203);
} }
} }
:deep(.ant-select-selection-item) {
@apply mt-0.75;
}
</style> </style>

Write Preview
Loading…
Cancel
Save