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

fix(nc-gui): Fixed styling issues with token and user list

pull/6601/head
Muhammed Mustafa 11 months ago
parent
f3ef73cf50
commit
9f1791daab
2 changed files with 119 additions and 102 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. 189
      packages/nc-gui/components/account/Token.vue
  2. 32
      packages/nc-gui/components/account/UserList.vue

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

@ -162,8 +162,8 @@ const handleCancel = () => {
<template> <template>
<div class="h-full pt-2"> <div class="h-full pt-2">
<div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list"> <div class="max-w-202 mx-auto px-4 h-full" data-testid="nc-token-list">
<div class="py-2 flex gap-4 items-center justify-between"> <div class="py-2 flex gap-4 items-baseline justify-between">
<h6 class="text-2xl my-4 text-left font-bold">{{ $t('title.apiTokens') }}</h6> <h6 class="text-2xl text-left font-bold">{{ $t('title.apiTokens') }}</h6>
<NcTooltip :disabled="!(isEeUI && tokens.length)"> <NcTooltip :disabled="!(isEeUI && tokens.length)">
<template #title>{{ $t('labels.tokenLimit') }}</template> <template #title>{{ $t('labels.tokenLimit') }}</template>
<NcButton <NcButton
@ -185,98 +185,113 @@ 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%-17.5rem)]"> <div class="mt-5 h-[calc(100%-13rem)]">
<div class="flex w-full pl-5 bg-gray-50 border-1 border-b-0"> <div class="h-full w-full !overflow-hidden rounded-md">
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span> <div class="flex w-full pl-5 bg-gray-50 border-1 rounded-t-md">
<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">{{ $t('title.tokenName') }}</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-2/9 text-start">{{ $t('title.creator') }}</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 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
</div> <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 class="nc-scrollbar-md !overflow-y-auto h-[calc(100%-3rem)] border-b-1"> </div>
<div v-if="showNewTokenModal"> <div class="nc-scrollbar-md !overflow-y-auto flex flex-col h-[calc(100%-5rem)]">
<div v-if="showNewTokenModal">
<div
class="flex gap-5 px-3 py-2.5 text-gray-500 font-medium text-3.5 w-full nc-token-generate border-b-1 border-l-1 border-r-1"
:class="{
'rounded-b-md': !tokens.length,
}"
>
<div class="flex w-full">
<a-input
:ref="selectInputOnMount"
v-model:value="selectedTokenData.description"
:default-value="defaultTokenName"
type="text"
class="!rounded-lg !py-1"
placeholder="Token Name"
data-testid="nc-token-input"
@press-enter="generateToken"
/>
<span v-if="!isValidTokenName" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
</div>
<div class="flex gap-2 justify-start">
<NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
{{ $t('general.cancel') }}
</NcButton>
<NcButton
type="primary"
size="sm"
:is-loading="isLoading"
data-testid="nc-token-save-btn"
@click="generateToken"
>
{{ $t('general.save') }}
</NcButton>
</div>
</div>
</div>
<div <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" v-if="!tokens.length && !showNewTokenModal"
:class="{ class="border-l-1 border-r-1 border-b-1 rounded-b-md justify-center flex items-center"
'border-b-1': !tokens.length,
'border-b-0': tokens.length,
}"
> >
<div class="flex flex-col w-full"> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noToken')" />
<a-input
:ref="selectInputOnMount"
v-model:value="selectedTokenData.description"
:default-value="defaultTokenName"
type="text"
class="!rounded-lg !py-1"
placeholder="Token Name"
data-testid="nc-token-input"
@press-enter="generateToken"
/>
<span v-if="!isValidTokenName" class="text-red-500 text-xs font-light mt-1.5 ml-1">{{ errorMessage }} </span>
</div>
<div class="flex gap-2 justify-start">
<NcButton v-if="!isLoading" type="secondary" size="small" @click="handleCancel">
{{ $t('general.cancel') }}
</NcButton>
<NcButton type="primary" size="sm" :is-loading="isLoading" data-testid="nc-token-save-btn" @click="generateToken">
{{ $t('general.save') }}
</NcButton>
</div>
</div> </div>
</div>
<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 <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-1 pl-5 py-3 justify-between token" class="flex pl-5 py-3 justify-between token items-center border-l-1 border-r-1 border-b-1"
> >
<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">
{{ el.description }} {{ el.description }}
</GeneralTruncateText> </GeneralTruncateText>
</span> </span>
<span class="text-gray-500 font-medium text-3.5 text-start w-2/9"> <span class="text-gray-500 font-medium text-3.5 text-start w-2/9">
<GeneralTruncateText placement="top" length="20"> <GeneralTruncateText placement="top" length="20">
{{ el.created_by }} {{ el.created_by }}
</GeneralTruncateText> </GeneralTruncateText>
</span> </span>
<span class="text-gray-500 font-medium text-3.5 text-start w-3/9"> <span class="text-gray-500 font-medium text-3.5 text-start w-3/9">
<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 -->
<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 text-gray-500 font-medium text-3.5 w-2/9">
<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 w-h-4 mb-[1.8px]"
@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
</NcTooltip> :is="iconMap.copy"
<NcTooltip placement="top" class="mb-0.5"> class="hover::cursor-pointer w-4 h-4 text-gray-600 mt-0.25"
<template #title>{{ $t('general.delete') }}</template> @click="copyToken(el.token)"
<component />
:is="iconMap.delete" </NcTooltip>
data-testid="nc-token-row-action-icon" <NcTooltip placement="top" class="mb-0.5">
class="nc-delete-icon hover::cursor-pointer w-4 h-4" <template #title>{{ $t('general.delete') }}</template>
@click="triggerDeleteModal(el.token as string, el.description as string)" <component
/> :is="iconMap.delete"
</NcTooltip> 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> </div>
</div> </div>
</div> </div>
<div v-if="pagination.total > 10" class="flex items-center justify-center mt-5"> <div v-if="pagination.total > 10" class="flex items-center justify-center mt-5">
<a-pagination <a-pagination
v-model:current="currentPage" v-model:current="currentPage"
@ -311,6 +326,6 @@ const handleCancel = () => {
<style> <style>
.token:last-child { .token:last-child {
@apply rounded-b-md; @apply border-b-1 rounded-b-md;
} }
</style> </style>

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

@ -155,7 +155,7 @@ const openDeleteModal = (user: UserType) => {
<template> <template>
<div data-testid="nc-super-user-list" class="h-full"> <div data-testid="nc-super-user-list" class="h-full">
<div class="max-w-195 mx-auto h-full"> <div class="max-w-195 mx-auto h-full">
<div class="text-2xl text-left font-weight-bold">{{ $t('title.userManagement') }}</div> <div class="text-2xl text-left font-weight-bold mb-4">{{ $t('title.userManagement') }}</div>
<div class="py-2 flex gap-4 items-center justify-between"> <div class="py-2 flex gap-4 items-center justify-between">
<a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()"> <a-input v-model:value="searchText" class="!max-w-90 !rounded-md" placeholder="Search members" @change="loadUsers()">
<template #prefix> <template #prefix>
@ -172,11 +172,13 @@ const openDeleteModal = (user: UserType) => {
</NcButton> </NcButton>
</div> </div>
</div> </div>
<div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5 border-1"> <div class="w-full rounded-md max-w-250 h-[calc(100%-12rem)] rounded-md overflow-hidden mt-5">
<div class="flex w-full bg-gray-50 border-b-1"> <div class="flex w-full bg-gray-50 border-1 rounded-t-md">
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-10">{{ $t('labels.email') }}</span> <div class="py-3.5 text-gray-500 font-medium text-3.5 w-2/3 text-start pl-6">{{ $t('labels.email') }}</div>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start pl-20">{{ $t('objects.role') }}</span> <div class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-start">{{ $t('objects.role') }}</div>
<span class="py-3.5 text-gray-500 font-medium text-3.5 w-1/3 text-end pl-42">{{ $t('labels.action') }}</span> <div class="flex py-3.5 text-gray-500 font-medium text-3.5 w-28 justify-end mr-4">
{{ $t('labels.action') }}
</div>
</div> </div>
<div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]"> <div v-if="isLoading" class="flex items-center justify-center text-center h-[513px]">
<GeneralLoader size="xlarge" /> <GeneralLoader size="xlarge" />
@ -185,22 +187,22 @@ 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%-3rem)] nc-scrollbar-md border-t-0 !overflow-auto"> <section v-else class="tbody h-[calc(100%-4rem)] 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"
data-testid="nc-token-list" data-testid="nc-token-list"
class="flex py-3 justify-around px-5 border-b-1" class="user flex py-3 justify-around px-1 border-b-1 border-l-1 border-r-1"
:class="{ :class="{
'py-4': el.roles?.includes('super'), 'py-4': el.roles?.includes('super'),
}" }"
> >
<span class="text-3.5 text-start w-1/3 pl-5 flex items-center"> <div class="text-3.5 text-start w-2/3 pl-5 flex items-center">
<GeneralTruncateText length="29"> <GeneralTruncateText length="29">
{{ el.email }} {{ el.email }}
</GeneralTruncateText> </GeneralTruncateText>
</span> </div>
<span class="text-3.5 text-start w-1/3 pl-18"> <div class="text-3.5 text-start w-1/3">
<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>
<NcSelect <NcSelect
v-else v-else
@ -231,8 +233,8 @@ const openDeleteModal = (user: UserType) => {
</span> </span>
</a-select-option> </a-select-option>
</NcSelect> </NcSelect>
</span> </div>
<span class="w-1/3 pl-43 flex items-center"> <span class="w-26 flex items-center justify-end mr-4">
<div <div
class="flex items-center gap-2" class="flex items-center gap-2"
:class="{ :class="{
@ -306,7 +308,7 @@ const openDeleteModal = (user: UserType) => {
</template> </template>
<style scoped> <style scoped>
.tbody div:nth-child(10) { .user:last-child {
border-bottom: none; @apply rounded-b-md;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save