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

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

pull/7664/head
Ramesh Mane 9 months ago
parent
4eb7128fe7
commit
0327b6ec22
1 changed files with 330 additions and 317 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. 51
      packages/nc-gui/components/smartsheet/Form.vue

51
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save