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
Split 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>
</div>
<span>{{ $t('msg.apiTokenCreate') }}</span>
<div class="w-full mt-5 overflow-hidden rounded-md h-[calc(100%-18.5rem)] border-1">
<div class="flex w-full pl-5 bg-gray-50">
<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 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 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 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
</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 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">
<a-input
:ref="selectInputOnMount"
@ -218,15 +224,15 @@ const handleCancel = () => {
</div>
</div>
</div>
<div v-if="showNewTokenModal && !tokens.length" class="h-118 justify-center flex items-center">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
<div v-if="!tokens.length && !showNewTokenModal" class="justify-center flex items-center border-1">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
</div>
<div
v-for="el of tokens"
:key="el.id"
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">
<GeneralTruncateText placement="top" length="20">
@ -242,34 +248,32 @@ const handleCancel = () => {
<GeneralTruncateText v-if="el.token === selectedToken.id && selectedToken.isShow" placement="top" length="29">
{{ el.token }}
</GeneralTruncateText>
<span v-else>**************************************</span>
<span v-else>************************************</span>
</span>
<!-- 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">
<NcTooltip placement="top">
<template #title>{{ $t('labels.showOrHide') }}</template>
<component
:is="iconMap.eye"
class="nc-toggle-token-visibility hover::cursor-pointer"
@click="hideOrShowToken(el.token as string)"
/>
</NcTooltip>
<NcTooltip placement="top" class="h-4">
<template #title>{{ $t('general.copy') }}</template>
<component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
</NcTooltip>
<NcTooltip placement="top" class="mb-0.5">
<template #title>{{ $t('general.delete') }}</template>
<component
:is="iconMap.delete"
data-testid="nc-token-row-action-icon"
class="nc-delete-icon hover::cursor-pointer"
@click="triggerDeleteModal(el.token as string, el.description as string)"
/>
</NcTooltip>
</div>
</span>
<div class="flex justify-end items-center gap-3 pr-5 text-gray-500 font-medium text-3.5 w-2/9">
<NcTooltip placement="top">
<template #title>{{ $t('labels.showOrHide') }}</template>
<component
:is="iconMap.eye"
class="nc-toggle-token-visibility hover::cursor-pointer w-h-4 mb-[1.8px]"
@click="hideOrShowToken(el.token as string)"
/>
</NcTooltip>
<NcTooltip placement="top" class="h-4">
<template #title>{{ $t('general.copy') }}</template>
<component :is="iconMap.copy" class="hover::cursor-pointer w-4 h-4" @click="copyToken(el.token)" />
</NcTooltip>
<NcTooltip placement="top" class="mb-0.5">
<template #title>{{ $t('general.delete') }}</template>
<component
:is="iconMap.delete"
data-testid="nc-token-row-action-icon"
class="nc-delete-icon hover::cursor-pointer w-4 h-4"
@click="triggerDeleteModal(el.token as string, el.description as string)"
/>
</NcTooltip>
</div>
</div>
</div>
</div>
@ -304,8 +308,9 @@ const handleCancel = () => {
</GeneralDeleteModal>
</div>
</template>
<style lang="scss" scoped>
<style>
.token:last-child {
@apply border-b-1;
@apply rounded-b-md;
}
</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">
<a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" />
</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
v-for="el of users"
:key="el.id"
@ -195,12 +195,14 @@ const openDeleteModal = (user: UserType) => {
'py-4': el.roles?.includes('super'),
}"
>
<span class="text-3.5 text-start w-1/3 pl-5">
{{ el.email }}
<span class="text-3.5 text-start w-1/3 pl-5 flex items-center">
<GeneralTruncateText length="29">
{{ el.email }}
</GeneralTruncateText>
</span>
<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>
<a-select
<NcSelect
v-else
v-model:value="el.roles"
class="w-55 nc-user-roles"
@ -228,9 +230,9 @@ const openDeleteModal = (user: UserType) => {
{{ $t('msg.info.roles.orgViewer') }}
</span>
</a-select-option>
</a-select>
</NcSelect>
</span>
<span class="w-1/3 pl-43">
<span class="w-1/3 pl-43 flex items-center">
<div
class="flex items-center gap-2"
:class="{
@ -238,23 +240,26 @@ const openDeleteModal = (user: UserType) => {
}"
>
<NcDropdown :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)"
/>
<NcButton size="xsmall" type="ghost">
<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>
<NcMenu>
<template v-if="!el.roles?.includes('super')">
<!-- Resend invite Email -->
<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>
</NcMenuItem>
<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>
</NcMenuItem>
<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>
</NcMenuItem>
</template>

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

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

Write Preview
Loading…
Cancel
Save