Browse Source

refactor: reduce the child list item size, modal size, add transition to icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5848/head
Pranav C 1 year ago
parent
commit
dbf9cbdb90
  1. 2
      packages/nc-gui/assets/style.scss
  2. 9
      packages/nc-gui/components/virtual-cell/components/ListChildItems.vue
  3. 5
      packages/nc-gui/components/virtual-cell/components/ListItems.vue

2
packages/nc-gui/assets/style.scss

@ -331,5 +331,5 @@ a {
.nc-icon-transition { .nc-icon-transition {
@apply transform transition-transform !hover:(scale-115) !active:(scale-100) @apply transform transition-transform !hover:(scale-115 text-shadow-sm) !active:(scale-100)
} }

9
packages/nc-gui/components/virtual-cell/components/ListChildItems.vue

@ -107,6 +107,7 @@ const onClick = (row: Row) => {
:footer="null" :footer="null"
title="Child list" title="Child list"
:body-style="{ padding: 0 }" :body-style="{ padding: 0 }"
width="400px"
wrap-class-name="nc-modal-child-list" wrap-class-name="nc-modal-child-list"
> >
<div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6"> <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
@ -143,7 +144,7 @@ const onClick = (row: Row) => {
<a-card <a-card
v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []" v-for="(row, i) of childrenList?.list ?? state?.[colTitle] ?? []"
:key="i" :key="i"
class="nc-nested-list-item !my-4 hover:(!bg-gray-200/50 shadow-md)" class="nc-nested-list-item !my-2 hover:(!bg-gray-200/50 shadow-md)"
@click="onClick(row)" @click="onClick(row)"
> >
<div class="flex items-center"> <div class="flex items-center">
@ -159,14 +160,14 @@ const onClick = (row: Row) => {
<div v-if="!readonly" class="flex gap-2"> <div v-if="!readonly" class="flex gap-2">
<component <component
:is="iconMap.linkRemove" :is="iconMap.linkRemove"
class="text-xs text-grey hover:(!text-red-500) cursor-pointer" class="!text-base text-grey hover:(!text-red-500) cursor-pointer nc-icon-transition"
data-testid="nc-child-list-icon-unlink" data-testid="nc-child-list-icon-unlink"
@click.stop="unlinkRow(row)" @click.stop="unlinkRow(row)"
/> />
<component <component
:is="iconMap.delete" :is="iconMap.delete"
v-if="!readonly && !isPublic" v-if="!readonly && !isPublic"
class="text-xs text-grey hover:(!text-red-500) cursor-pointer" class="!text-base text-grey hover:(!text-red-500) cursor-pointer nc-icon-transition"
data-testid="nc-child-list-icon-delete" data-testid="nc-child-list-icon-delete"
@click.stop="deleteRelatedRow(row, unlinkIfNewRow)" @click.stop="deleteRelatedRow(row, unlinkIfNewRow)"
/> />
@ -214,6 +215,6 @@ const onClick = (row: Row) => {
} }
:deep(.nc-nested-list-item .ant-card-body) { :deep(.nc-nested-list-item .ant-card-body) {
@apply !px-2 !py-1; @apply !px-1 !py-0;
} }
</style> </style>

5
packages/nc-gui/components/virtual-cell/components/ListItems.vue

@ -197,6 +197,7 @@ watch(vModel, (nextVal) => {
:title="$t('activity.linkRecord')" :title="$t('activity.linkRecord')"
:body-style="{ padding: 0 }" :body-style="{ padding: 0 }"
wrap-class-name="nc-modal-link-record" wrap-class-name="nc-modal-link-record"
width="400px"
> >
<div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6"> <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col py-6">
<div class="flex mb-4 items-center gap-2 px-12"> <div class="flex mb-4 items-center gap-2 px-12">
@ -225,7 +226,7 @@ watch(vModel, (nextVal) => {
v-for="(refRow, i) in childrenExcludedList?.list ?? []" v-for="(refRow, i) in childrenExcludedList?.list ?? []"
:key="i" :key="i"
:ref="selectedRowIndex === i ? activeRow : null" :ref="selectedRowIndex === i ? activeRow : null"
class="nc-nested-list-item !my-4 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group" class="nc-nested-list-item !my-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
:class="{ 'nc-selected-row': selectedRowIndex === i }" :class="{ 'nc-selected-row': selectedRowIndex === i }"
@click="linkRow(refRow)" @click="linkRow(refRow)"
> >
@ -284,6 +285,6 @@ watch(vModel, (nextVal) => {
} }
:deep(.nc-nested-list-item .ant-card-body) { :deep(.nc-nested-list-item .ant-card-body) {
@apply !px-2 !py-1; @apply !px-1 !py-0;
} }
</style> </style>

Loading…
Cancel
Save