Browse Source

fix: Increased min height and added scroll for long text in expanded form and fixed heigt issue in gallery and form view

pull/7243/head
Muhammed Mustafa 11 months ago
parent
commit
7f16743a98
  1. 5
      packages/nc-gui/components/cell/RichText.vue
  2. 10
      packages/nc-gui/components/cell/TextArea.vue

5
packages/nc-gui/components/cell/RichText.vue

@ -19,6 +19,8 @@ const props = defineProps<{
const emits = defineEmits(['update:value']) const emits = defineEmits(['update:value'])
const isExpandedFormOpen = inject(IsExpandedFormOpenInj, ref(false))!
const turndownService = new TurndownService({}) const turndownService = new TurndownService({})
turndownService.addRule('lineBreak', { turndownService.addRule('lineBreak', {
@ -171,7 +173,8 @@ watch(editorDom, () => {
class="flex flex-col nc-textarea-rich-editor w-full" class="flex flex-col nc-textarea-rich-editor w-full"
:class="{ :class="{
'ml-1 mt-2.5 flex-grow': props.fullMode, 'ml-1 mt-2.5 flex-grow': props.fullMode,
'nc-scrollbar-md': !props.fullMode && !props.readonly, 'nc-scrollbar-md': (!props.fullMode && !props.readonly) || isExpandedFormOpen,
'flex-grow': isExpandedFormOpen,
}" }"
/> />
</div> </div>

10
packages/nc-gui/components/cell/TextArea.vue

@ -58,6 +58,8 @@ const isDragging = ref(false)
const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLTextAreaElement)?.focus() const focus: VNodeRef = (el) => !isExpandedFormOpen.value && !isEditColumn.value && (el as HTMLTextAreaElement)?.focus()
const height = computed(() => { const height = computed(() => {
if (isExpandedFormOpen.value) return 36 * 4
if (!rowHeight.value || rowHeight.value === 1) return 36 if (!rowHeight.value || rowHeight.value === 1) return 36
return rowHeight.value * 36 return rowHeight.value * 36
@ -169,7 +171,7 @@ watch(editEnabled, () => {
<template> <template>
<NcDropdown <NcDropdown
v-model:visible="isVisible" v-model:visible="isVisible"
class="overflow-visible" class="overflow-hidden"
:trigger="[]" :trigger="[]"
placement="bottomLeft" placement="bottomLeft"
:overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined" :overlay-class-name="isVisible ? 'nc-textarea-dropdown-active' : undefined"
@ -177,8 +179,8 @@ watch(editEnabled, () => {
<div <div
class="flex flex-row pt-0.5 w-full rich-wrapper" class="flex flex-row pt-0.5 w-full rich-wrapper"
:class="{ :class="{
'min-h-10': rowHeight !== 1, 'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
'min-h-6.5': rowHeight === 1, 'min-h-6.5': rowHeight === 1 && !isExpandedFormOpen,
'h-full': isForm, 'h-full': isForm,
}" }"
> >
@ -198,7 +200,7 @@ watch(editEnabled, () => {
:ref="focus" :ref="focus"
v-model="vModel" v-model="vModel"
rows="4" rows="4"
class="h-full w-full outline-none border-none" class="h-full w-full outline-none border-none nc-scrollbar-md"
:class="{ :class="{
'p-2': editEnabled, 'p-2': editEnabled,
'py-1 h-full': isForm, 'py-1 h-full': isForm,

Loading…
Cancel
Save