Browse Source

Merge pull request #7824 from nocodb/nc-fix/long-text-field-ui-changes

Nc fix(nc-gui): long text field UI changes
pull/7830/head
Raju Udava 8 months ago committed by GitHub
parent
commit
446a1f9869
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 10
      packages/nc-gui/components/cell/RichText.vue
  2. 20
      packages/nc-gui/components/cell/TextArea.vue
  3. 9
      packages/nc-gui/components/nc/ErrorBoundary.vue
  4. 2
      packages/nc-gui/nuxt.config.ts

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

@ -9,7 +9,7 @@ import Underline from '@tiptap/extension-underline'
import Placeholder from '@tiptap/extension-placeholder'
import { TaskItem } from '@/helpers/dbTiptapExtensions/task-item'
import { Link } from '@/helpers/dbTiptapExtensions/links'
import { IsExpandedFormOpenInj, IsFormInj, ReadonlyInj, RowHeightInj } from '#imports'
import { IsExpandedFormOpenInj, IsFormInj, IsGridInj, ReadonlyInj, RowHeightInj } from '#imports'
const props = defineProps<{
value?: string | null
@ -33,6 +33,8 @@ const readOnlyCell = inject(ReadonlyInj, ref(false))
const isForm = inject(IsFormInj, ref(false))
const isGrid = inject(IsGridInj, ref(false))
const isFocused = ref(false)
const turndownService = new TurndownService({})
@ -222,6 +224,7 @@ useEventListener(
'nc-rich-text-embed flex flex-col pl-1 w-full': !fullMode,
'readonly': readOnly,
'nc-form-rich-text-field !p-0': isFormField,
'nc-rich-text-grid': isGrid,
}"
:tabindex="readOnlyCell || isFormField ? -1 : 0"
>
@ -285,11 +288,12 @@ useEventListener(
.ProseMirror {
@apply !border-transparent max-h-full;
}
&:not(.nc-form-rich-text-field) {
&:not(.nc-form-rich-text-field):not(.nc-rich-text-grid) {
.ProseMirror {
min-height: 8rem;
}
}
&.nc-form-rich-text-field {
.ProseMirror {
padding: 0;
@ -346,7 +350,7 @@ useEventListener(
pointer-events: none;
}
.ProseMirror {
@apply flex-grow pt-1 border-1 border-gray-200 rounded-lg;
@apply flex-grow pt-1.5 border-1 border-gray-200 rounded-lg;
> * {
@apply ml-1;

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

@ -203,7 +203,7 @@ watch(inputWrapperRef, () => {
<template>
<div>
<div
class="flex flex-row pt-0.5 w-full long-text-wrapper"
class="flex flex-row w-full long-text-wrapper"
:class="{
'min-h-10': rowHeight !== 1 || isExpandedFormOpen,
'min-h-9': rowHeight === 1 && !isExpandedFormOpen,
@ -213,6 +213,10 @@ watch(inputWrapperRef, () => {
<div
v-if="isRichMode"
class="w-full cursor-pointer nc-readonly-rich-text-wrapper"
:class="{
'nc-readonly-rich-text-grid ': !isExpandedFormOpen && !isForm,
'nc-readonly-rich-text-sort-height': rowHeight === 1 && !isExpandedFormOpen && !isForm,
}"
:style="{
maxHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
minHeight: isForm ? undefined : isExpandedFormOpen ? `${height}px` : `${25 * (rowHeight || 1)}px`,
@ -256,10 +260,9 @@ watch(inputWrapperRef, () => {
v-else-if="rowHeight"
:value="vModel"
:lines="rowHeight"
class="mr-7 nc-text-area-clamped-text"
class="nc-text-area-clamped-text my-auto"
:style="{
'word-break': 'break-word',
'white-space': 'pre-line',
'max-height': `${25 * (rowHeight || 1)}px`,
}"
@click="onTextClick"
@ -350,6 +353,17 @@ textarea:focus {
.nc-longtext-scrollbar {
@apply scrollbar-thin scrollbar-thumb-gray-200 hover:scrollbar-thumb-gray-300 scrollbar-track-transparent;
}
.nc-readonly-rich-text-wrapper {
&.nc-readonly-rich-text-grid {
:deep(.ProseMirror) {
@apply !pt-0;
}
&.nc-readonly-rich-text-sort-height {
@apply mt-2;
}
}
}
</style>
<style lang="scss">

9
packages/nc-gui/components/nc/ErrorBoundary.vue

@ -66,7 +66,14 @@ export default {
<template>
<slot :key="key"></slot>
<slot name="error">
<NcModal v-if="error" v-model:visible="errModal" :class="{ active: errModal }" :centered="true" :closable="false" :footer="null">
<NcModal
v-if="error"
v-model:visible="errModal"
:class="{ active: errModal }"
:centered="true"
:closable="false"
:footer="null"
>
<div class="w-full flex flex-col gap-1">
<h2 class="text-xl font-semibold">Oops! Something unexpected happened :/</h2>

2
packages/nc-gui/nuxt.config.ts

@ -234,4 +234,4 @@ export default defineNuxtConfig({
{ name: 'storeToRefs', from: 'pinia' },
],
},
})
})

Loading…
Cancel
Save