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

fix: scrollbar behavior

pull/6601/head
sreehari jayaraj 11 months ago
parent
945da00cd2
commit
f3ef73cf50
3 changed files with 58 additions and 47 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. 75
      packages/nc-gui/components/account/Token.vue
  2. 29
      packages/nc-gui/components/account/UserList.vue
  3. 1
      packages/nc-gui/lang/en.json

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

@ -185,16 +185,22 @@ const handleCancel = () => {
</NcTooltip> </NcTooltip>
</div> </div>
<span>{{ $t('msg.apiTokenCreate') }}</span> <span>{{ $t('msg.apiTokenCreate') }}</span>
<div class="w-full mt-5 overflow-hidden rounded-md h-[calc(100%-18.5rem)] border-1"> <div class="w-full mt-5 !overflow-hidden rounded-md h-[calc(100%-17.5rem)]">
<div class="flex w-full pl-5 bg-gray-50"> <div class="flex w-full pl-5 bg-gray-50 border-1 border-b-0">
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span> <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
<span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span> <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
</div> </div>
<div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)]"> <div class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)] border-b-1">
<div v-if="showNewTokenModal"> <div v-if="showNewTokenModal">
<div class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-t-1"> <div
class="flex gap-5 px-3 py-3.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-1"
:class="{
'border-b-1': !tokens.length,
'border-b-0': tokens.length,
}"
>
<div class="flex flex-col w-full"> <div class="flex flex-col w-full">
<a-input <a-input
:ref="selectInputOnMount" :ref="selectInputOnMount"
@ -218,15 +224,15 @@ const handleCancel = () => {
</div> </div>
</div> </div>
</div> </div>
<div v-if="showNewTokenModal && !tokens.length" class="h-118 justify-center flex items-center"> <div v-if="!tokens.length && !showNewTokenModal" class="justify-center flex items-center border-1">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" /> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
</div> </div>
<div <div
v-for="el of tokens" v-for="el of tokens"
:key="el.id" :key="el.id"
data-testid="nc-token-list" data-testid="nc-token-list"
class="flex border-t-1 pl-5 py-3 justify-between token" class="flex border-1 pl-5 py-3 justify-between token"
> >
<span class="text-black font-bold text-3.5 text-start w-2/9"> <span class="text-black font-bold text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="20"> <GeneralTruncateText placement="top" length="20">
@ -242,34 +248,32 @@ const handleCancel = () => {
<GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29"> <GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
{{ el.token }} {{ el.token }}
</GeneralTruncateText> </GeneralTruncateText>
<span v-else>**************************************</span> <span v-else>************************************</span>
</span> </span>
<!-- ACTIONS --> <!-- ACTIONS -->
<span class="text-gray-500 font-medium text-3.5 w-2/9"> <div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
<div class="flex justify-end items-center gap-3 pr-5"> <NcTooltip placement="top">
<NcTooltip placement="top"> <template #title>{{ $t('labels.showOrHide') }}</template>
<template #title>{{ $t('labels.showOrHide') }}</template> <component
<component :is="iconMap.eye"
:is="iconMap.eye" class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
class="nc-toggle-token-visibility hover::cursor-pointer" @click="hideOrShowToken(el.token as string)"
@click="hideOrShowToken(el.token as string)" />
/> </NcTooltip>
</NcTooltip> <NcTooltip placement="top" class="h-4">
<NcTooltip placement="top" class="h-4"> <template #title>{{ $t('general.copy') }}</template>
<template #title>{{ $t('general.copy') }}</template> <component :is="iconMap.copy" class="hover::cursor-pointer w-4 h-4" @click="copyToken(el.token)" />
<component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" /> </NcTooltip>
</NcTooltip> <NcTooltip placement="top" class="mb-0.5">
<NcTooltip placement="top" class="mb-0.5"> <template #title>{{ $t('general.delete') }}</template>
<template #title>{{ $t('general.delete') }}</template> <component
<component :is="iconMap.delete"
:is="iconMap.delete" data-testid="nc-token-row-action-icon"
data-testid="nc-token-row-action-icon" class="nc-delete-icon hover::cursor-pointer w-4 h-4"
class="nc-delete-icon hover::cursor-pointer" @click="triggerDeleteModal(el.token as string, el.description as string)"
@click="triggerDeleteModal(el.token as string, el.description as string)" />
/> </NcTooltip>
</NcTooltip> </div>
</div>
</span>
</div> </div>
</div> </div>
</div> </div>
@ -304,8 +308,9 @@ const handleCancel = () => {
</GeneralDeleteModal> </GeneralDeleteModal>
</div> </div>
</template> </template>
<style lang="scss" scoped>
<style>
.token:last-child { .token:last-child {
@apply border-b-1; @apply rounded-b-md;
} }
</style> </style>

29
packages/nc-gui/components/account/UserList.vue
Unescape View File

@ -185,7 +185,7 @@ const openDeleteModal = (user: UserType) => {
<div v-else-if="!users.length" class="flex items-center justify-center text-center h-full"> <div v-else-if="!users.length" class="flex items-center justify-center text-center h-full">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
</div> </div>
<section v-else class="tbody h-[calc(100%-3.3rem)] nc-scrollbar-md border-t-0"> <section v-else class="tbody h-[calc(100%-3rem)] nc-scrollbar-md border-t-0 !overflow-auto">
<div <div
v-for="el of users" v-for="el of users"
:key="el.id" :key="el.id"
@ -195,12 +195,14 @@ const openDeleteModal = (user: UserType) => {
'py-4': el.roles?.includes('super'), 'py-4': el.roles?.includes('super'),
}" }"
> >
<span class="text-3.5 text-start w-1/3 pl-5"> <span class="text-3.5 text-start w-1/3 pl-5 flex items-center">
{{ el.email }} <GeneralTruncateText length="29">
{{ el.email }}
</GeneralTruncateText>
</span> </span>
<span class="text-3.5 text-start w-1/3 pl-18"> <span class="text-3.5 text-start w-1/3 pl-18">
<div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div> <div v-if="el?.roles?.includes('super')" class="font-weight-bold">{{ $t('labels.superAdmin') }}</div>
<a-select <NcSelect
v-else v-else
v-model:value="el.roles" v-model:value="el.roles"
class="w-55 nc-user-roles" class="w-55 nc-user-roles"
@ -228,9 +230,9 @@ const openDeleteModal = (user: UserType) => {
{{ $t('msg.info.roles.orgViewer') }} {{ $t('msg.info.roles.orgViewer') }}
</span> </span>
</a-select-option> </a-select-option>
</a-select> </NcSelect>
</span> </span>
<span class="w-1/3 pl-43"> <span class="w-1/3 pl-43 flex items-center">
<div <div
class="flex items-center gap-2" class="flex items-center gap-2"
:class="{ :class="{
@ -238,23 +240,26 @@ const openDeleteModal = (user: UserType) => {
}" }"
> >
<NcDropdown :trigger="['click']"> <NcDropdown :trigger="['click']">
<MdiDotsVertical <NcButton size="xsmall" type="ghost">
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)" <MdiDotsVertical
/> class="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)"
/>
</NcButton>
<template #overlay> <template #overlay>
<NcMenu> <NcMenu>
<template v-if="!el.roles?.includes('super')"> <template v-if="!el.roles?.includes('super')">
<!-- Resend invite Email --> <!-- Resend invite Email -->
<NcMenuItem @click="resendInvite(el)"> <NcMenuItem @click="resendInvite(el)">
<component :is="iconMap.email" class="flex text-gray-500" /> <component :is="iconMap.email" class="flex text-gray-600" />
<div>{{ $t('activity.resendInvite') }}</div> <div>{{ $t('activity.resendInvite') }}</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem @click="copyInviteUrl(el)"> <NcMenuItem @click="copyInviteUrl(el)">
<component :is="iconMap.copy" class="flex text-gray-500" /> <component :is="iconMap.copy" class="flex text-gray-600" />
<div>{{ $t('activity.copyInviteURL') }}</div> <div>{{ $t('activity.copyInviteURL') }}</div>
</NcMenuItem> </NcMenuItem>
<NcMenuItem @click="copyPasswordResetUrl(el)"> <NcMenuItem @click="copyPasswordResetUrl(el)">
<component :is="iconMap.copy" class="flex text-gray-500" /> <component :is="iconMap.copy" class="flex text-gray-600" />
<div>{{ $t('activity.copyPasswordResetURL') }}</div> <div>{{ $t('activity.copyPasswordResetURL') }}</div>
</NcMenuItem> </NcMenuItem>
</template> </template>

1
packages/nc-gui/lang/en.json
Unescape View File

@ -388,6 +388,7 @@
} }
}, },
"labels": { "labels": {
"noToken": "No Token",
"tokenLimit": "Only one token per user is allowed", "tokenLimit": "Only one token per user is allowed",
"duplicateAttachment": "File with name {filename} already attached", "duplicateAttachment": "File with name {filename} already attached",
"toAddress": "To Address", "toAddress": "To Address",

Write Preview
Loading…
Cancel
Save