Browse Source

fix(nc-gui): text overflow and field drag css

pull/7664/head
Ramesh Mane 9 months ago
parent
commit
0327b6ec22
  1. 51
      packages/nc-gui/components/smartsheet/Form.vue

51
packages/nc-gui/components/smartsheet/Form.vue

@ -454,9 +454,10 @@ const onFormItemClick = (element: any) => {
<div v-else class="h-full w-full flex" data-testid="nc-form-wrapper">
<div
v-if="formViewData"
class="flex-1 h-full overflow-y-auto nc-form-scrollbar p-6 bg-gray-50"
class="flex-1 h-full overflow-auto nc-form-scrollbar p-6 bg-gray-50"
:style="{background:(formViewData?.meta as Record<string,any>).theme_color}"
>
<div :class="isEditable ? 'min-w-[616px] overflow-x-auto nc-form-scrollbar' : ''">
<div class="h-[160px] bg-primary bg-opacity-75 border-gray-200 rounded-3xl">
<!-- for future implementation of cover image -->
<LazyNuxtImg
@ -553,7 +554,9 @@ const onFormItemClick = (element: any) => {
:list="visibleColumns"
item-key="fk_column_id"
draggable=".item"
handle=".nc-form-field-drag-handler"
group="form-inputs"
ghost-class="nc-form-field-ghost"
class="h-full px-4 lg:px-6"
:move="onMoveCallback"
:disabled="isLocked"
@ -563,22 +566,26 @@ const onFormItemClick = (element: any) => {
>
<template #item="{ element, index }">
<div
class="nc-editable item cursor-pointer relative bg-white"
class="nc-editable item cursor-pointer relative bg-white my-1"
:class="[
`nc-form-drag-${element.title.replaceAll(' ', '')}`,
{
'rounded-2xl overflow-hidden border-2': editEnabled,
},
{
'border-transparent hover:(bg-gray-50) p-4 lg:p-6': activeRow !== element.title,
'nc-form-field-drag-handler border-transparent hover:(bg-gray-50) p-4 lg:p-6':
activeRow !== element.title,
},
{
'border-brand-500 my-1': activeRow === element.title,
'border-brand-500': activeRow === element.title,
},
{
'!hover:bg-white !ring-0 !cursor-auto': isLocked,
},
]"
:style="{
transition: 'height 1s ease-in',
}"
data-testid="nc-form-fields"
@click="onFormItemClick(element)"
>
@ -596,19 +603,22 @@ const onFormItemClick = (element: any) => {
</div>
<!-- Field Header -->
<div v-if="activeRow === element.title" class="flex gap-3 items-center px-3 py-2 bg-gray-50">
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600" />
<div class="flex-1 flex items-center">
<div v-if="activeRow === element.title" class="w-full flex gap-3 items-center px-3 py-2 bg-gray-50">
<component
:is="iconMap.drag"
class="nc-form-field-drag-handler flex-none cursor-move !h-4 !w-4 text-gray-600"
/>
<div class="flex-1 flex items-center max-w-[calc(100%_-_152px)]">
<SmartsheetHeaderVirtualCellIcon v-if="element && isVirtualCol(element)" :column-meta="element" />
<SmartsheetHeaderCellIcon v-else :column-meta="element" />
<NcTooltip class="truncate flex-1" show-on-truncate-only>
<NcTooltip class="truncate" show-on-truncate-only>
<template #title> {{ element.label || element.title }} </template>
<span data-testid="nc-form-field-title">
{{ element.label || element.title }}
</span>
<span v-if="element.required" class="text-red-500">&nbsp;*</span>
</NcTooltip>
<span v-if="element.required" class="text-red-500">&nbsp;*</span>
</div>
<div class="flex gap-2 items-center">
<span
@ -798,9 +808,10 @@ const onFormItemClick = (element: any) => {
</div>
</a-card>
</div>
</div>
<div v-if="isEditable" class="h-full w-full max-w-[384px] nc-form-left-drawer border-l border-gray-200">
<Splitpanes horizontal class="w-full nc-form-right-splitpane">
<Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4 !min-h-200px">
<Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-4 flex flex-col space-y-4 !min-h-200px">
<div class="flex flex-wrap justify-between items-center gap-2">
<div class="flex gap-3">
<div class="text-base font-bold text-gray-900">
@ -883,7 +894,7 @@ const onFormItemClick = (element: any) => {
<Draggable
v-model="localColumns"
item-key="id"
class=""
ghost-class="nc-form-field-ghost"
:style="{ height: 'calc(100% - 64px)' }"
@change="onMove($event)"
>
@ -891,27 +902,26 @@ const onFormItemClick = (element: any) => {
<div
v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
:key="field.id"
class="p-2 flex flex-row items-center border-b-1 last:border-none border-gray-200 hover:bg-gray-50"
class="w-full p-2 flex flex-row items-center border-b-1 last:border-none border-gray-200 hover:bg-gray-50"
:data-testid="`nc-form-field-item-${field.title}`"
>
<component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
<div
class="flex-1 flex items-center justify-between cursor-pointer"
class="flex-1 flex items-center justify-between space-x-2 cursor-pointer max-w-[calc(100%_-_20px)]"
@click="showOrHideColumn(field, !field.show, true)"
>
<div class="flex-1 flex items-center">
<div class="flex-1 flex items-center max-w-[calc(100%_-_40px)]">
<SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
<SmartsheetHeaderCellIcon v-else :column-meta="field" />
<NcTooltip class="truncate flex-1 ml-1" show-on-truncate-only>
<template #title> {{ field.title }} </template>
<NcTooltip class="truncate ml-1" show-on-truncate-only>
<template #title> {{ field.label || field.title }} </template>
<span data-testid="nc-field-title">
{{ field.title }}
{{ field.label || field.title }}
</span>
<span v-if="field.required" class="text-red-500">&nbsp;*</span>
</NcTooltip>
<span v-if="field.required" class="text-red-500">&nbsp;*</span>
</div>
<NcSwitch :checked="!!field.show" :disabled="field.required" />
</div>
</div>
@ -1131,4 +1141,7 @@ const onFormItemClick = (element: any) => {
:deep(.nc-form-field-body .nc-cell) {
@apply my-0;
}
.nc-form-field-ghost {
@apply bg-gray-50;
}
</style>

Loading…
Cancel
Save