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

fix: refactor css

pull/6496/head
sreehari jayaraj 1 year ago
parent
df3e73d3ae
commit
2ae6d204f1
3 changed files with 39 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 15
      packages/nc-gui/components/account/Token.vue
  2. 24
      packages/nc-gui/components/project/AccessSettings.vue
  3. 20
      packages/nc-gui/components/workspace/CollaboratorsList.vue

15
packages/nc-gui/components/account/Token.vue
Unescape View File

@ -181,7 +181,7 @@ const handleCancel = () => {
</NcButton>
</div>
<span>{{ $t('msg.apiTokenCreate') }}</span>
<div class="w-[780px] mt-5 border-1 rounded-md h-[530px] overflow-y-scroll">
<div class="w-full mt-5 border-1 rounded-md min-h-133 overflow-y-scroll">
<div>
<div class="flex w-full pl-5 bg-gray-50 border-b-1">
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
@ -226,7 +226,12 @@ const handleCancel = () => {
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
</div>
<div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
<div
v-for="el of tokens"
:key="el.id"
data-testid="nc-token-list"
class="flex border-b-1 pl-5 py-3 justify-between token"
>
<span class="text-black font-bold text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="20">
{{ el.description }}
@ -304,3 +309,9 @@ const handleCancel = () => {
</GeneralDeleteModal>
</div>
</template>
<style scoped lang="scss">
.token:nth-child(10) {
border-bottom: none;
}
</style>

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

@ -170,11 +170,11 @@ onMounted(async () => {
<Empty description="$t('title.noMembersFound')" />
</div>
<div v-else class="nc-collaborators-list mt-6 h-full">
<div class="flex flex-col rounded-lg overflow-hidden border-1 w-250 max-h-[calc(100%-8rem)]">
<div class="flex flex-col rounded-lg overflow-hidden border-1 max-w-350 max-h-[calc(100%-8rem)]">
<div class="flex flex-row bg-gray-50 min-h-12 items-center">
<div class="text-gray-700 users">{{ $t('objects.users') }}</div>
<div class="text-gray-700 data-joined">{{ $t('title.dateJoined') }}</div>
<div class="text-gray-700 access">{{ $t('general.access') }}</div>
<div class="text-gray-700 users-email-grid">{{ $t('objects.users') }}</div>
<div class="text-gray-700 date-joined-grid">{{ $t('title.dateJoined') }}</div>
<div class="text-gray-700 user-access-grid">{{ $t('general.access') }}</div>
</div>
<div class="flex flex-col nc-scrollbar-md">
@ -183,14 +183,14 @@ onMounted(async () => {
:key="i"
class="user-row flex flex-row border-b-1 py-1 min-h-14 items-center"
>
<div class="flex gap-3 items-center users">
<div class="flex gap-3 items-center users-email-grid">
<GeneralUserIcon size="base" :name="collab.email" :email="collab.email" />
<span class="truncate">
{{ collab.email }}
</span>
</div>
<div class="data-joined">{{ timeAgo(collab.created_at) }}</div>
<div class="access">
<div class="date-joined-grid">{{ timeAgo(collab.created_at) }}</div>
<div class="user-access-grid">
<template v-if="accessibleRoles.includes(collab.roles)">
<RolesSelector
:role="collab.roles"
@ -223,7 +223,6 @@ onMounted(async () => {
</template>
</InfiniteLoading>
</div>
<!-- </div> -->
</template>
</div>
</template>
@ -241,19 +240,22 @@ onMounted(async () => {
@apply mt-0.75;
}
.users {
.users-email-grid {
@apply flex-grow ml-4 w-1/2;
}
.data-joined {
.date-joined-grid {
@apply flex items-start;
width: calc(50% - 10rem);
}
.access {
.user-access-grid {
@apply w-40;
}
.user-row {
@apply w-full;
}
.user-row:last-child {
@apply border-b-0;
}

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

@ -61,12 +61,14 @@ onMounted(async () => {
<div class="flex w-2/5 text-gray-600">Users</div>
<div class="flex w-2/5 text-gray-600">Date Joined</div>
<div class="flex w-2/5 text-gray-600">Access</div>
<!-- <div class="flex w-2/5 text-gray-600">Added By</div> -->
<div class="flex w-2/5 text-gray-600">Action</div>
</div>
<div class="flex flex-col nc-scrollbar-md">
<div v-for="(collab, i) of filterCollaborators" :key="i"
class="relative w-full nc-collaborators nc-collaborators-list-row">
<div
v-for="(collab, i) of filterCollaborators"
:key="i"
class="relative w-full nc-collaborators nc-collaborators-list-row"
>
<div class="!py-0 w-2/5 email truncate">
<div class="flex items-center gap-2">
<span class="color-band" :style="{ backgroundColor: stringToColour(collab.email) }">{{
@ -83,19 +85,23 @@ onMounted(async () => {
<div class="w-2/5 roles">
<div class="nc-collaborator-role-select">
<template v-if="accessibleRoles.includes(collab.roles)">
<RolesSelector :role="collab.roles" :roles="accessibleRoles" :description="false"
:on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)" />
<RolesSelector
:role="collab.roles"
:roles="accessibleRoles"
:description="false"
:on-role-change="(role: WorkspaceUserRoles) => updateCollaborator(collab, role)"
/>
</template>
<template v-else>
<RolesBadge class="!bg-white" :role="collab.roles" />
</template>
</div>
</div>
<!-- <div class="w-2/5"></div> -->
<div class="w-2/5 pl-5">
<NcDropdown v-if="collab.roles !== WorkspaceUserRoles.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)" />
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="removeCollaborator(collab.id)">

Write Preview
Loading…
Cancel
Save