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

fix(nc-gui): remove rich text from form title and field label

pull/7741/head
Ramesh Mane 7 months ago
parent
51e60aa06c
commit
42d935f861
3 changed files with 119 additions and 116 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. 142
      packages/nc-gui/components/smartsheet/Form.vue
  2. 45
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
  3. 48
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

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

@ -879,27 +879,32 @@ useEventListener(
]" ]"
@click.stop="onFormItemClick({ title: 'nc-form-heading' })" @click.stop="onFormItemClick({ title: 'nc-form-heading' })"
> >
<LazyCellRichText <a-form-item v-if="isEditable" class="!my-0">
v-if="isEditable && !isLocked" <a-textarea
v-model:value="formViewData.heading" v-model:value="formViewData.heading"
:placeholder="$t('msg.info.formTitle')" class="nc-form-focus-element !p-0 !m-0 w-full !font-bold !text-2xl !border-0 !rounded-none !text-gray-900"
class="nc-form-focus-element font-bold text-2xl text-gray-900" :style="{
is-form-field 'borderRightWidth': '0px !important',
:autofocus="activeRow === 'nc-form-heading'" 'height': '70px',
:is-tab-pressed="isTabPressed" 'max-height': '250px',
data-testid="nc-form-heading" 'resize': 'vertical',
data-title="nc-form-heading" }"
@update:value="updateView" auto-size
/> size="large"
<LazyCellRichText hide-details
v-else :disabled="isLocked"
:value="formViewData.heading" placeholder="Form Title"
placeholder="Form Title" :bordered="false"
class="font-bold text-2xl text-gray-900" data-testid="nc-form-heading"
is-form-field data-title="nc-form-heading"
read-only @blur="updateView"
sync-value-change @keydown.enter="updateView"
/> />
</a-form-item>
<div v-else class="font-bold text-2xl text-gray-900">
{{ formViewData.heading }}
</div>
</div> </div>
<!-- form description --> <!-- form description -->
@ -990,26 +995,7 @@ useEventListener(
<div v-if="activeRow !== element.title"> <div v-if="activeRow !== element.title">
<div class="text-sm font-semibold text-gray-800"> <div class="text-sm font-semibold text-gray-800">
<span data-testid="nc-form-input-label"> <span data-testid="nc-form-input-label">
<LazyCellRichText {{ element.label || element.title }}
v-if="element.label"
:value="element.label"
is-form-field
read-only
sync-value-change
class="nc-form-help-text text-gray-500 text-sm mt-2"
data-testid="nc-form-help-text"
@update:value="updateColMeta(element)"
/>
<LazyCellRichText
v-else
:value="element.title"
is-form-field
read-only
sync-value-change
class="nc-form-help-text text-gray-500 text-sm mt-2"
data-testid="nc-form-help-text"
@update:value="updateColMeta(element)"
/>
</span> </span>
<span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]" <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]"
>&nbsp;*</span >&nbsp;*</span
@ -1077,15 +1063,17 @@ useEventListener(
<div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''"> <div class="nc-form-field-body" :class="activeRow === element.title ? 'p-4 lg:p-6' : ''">
<template v-if="activeRow === element.title"> <template v-if="activeRow === element.title">
<a-form-item class="my-0 !mb-2"> <a-form-item class="my-0 !mb-2">
<LazyCellRichText <a-textarea
ref="focusLabel"
v-model:value="element.label" v-model:value="element.label"
:placeholder="$t('msg.info.formInput')" :rows="1"
autofocus auto-size
is-form-field hide-details
:is-tab-pressed="isTabPressed"
class="form-meta-input nc-form-input-label" class="form-meta-input nc-form-input-label"
data-testid="nc-form-input-label" data-testid="nc-form-input-label"
@update:value="updateColMeta(element)" :placeholder="$t('msg.info.formInput')"
@keydown.enter.prevent
@change="updateColMeta(element)"
/> />
</a-form-item> </a-form-item>
@ -1184,9 +1172,14 @@ useEventListener(
<div>Layout</div> <div>Layout</div>
<a-radio-group <a-radio-group
v-model:value="element.meta.isList" :value="!!element.meta.isList"
class="nc-form-field-layout !mt-2" class="nc-form-field-layout !mt-2"
@change="updateColMeta(element)" @update:value="
(value) => {
element.meta.isList = value
updateColMeta(element)
}
"
> >
<a-radio :value="false">{{ $t('general.dropdown') }}</a-radio> <a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
<a-radio :value="true">{{ $t('general.list') }}</a-radio> <a-radio :value="true">{{ $t('general.list') }}</a-radio>
@ -1407,17 +1400,7 @@ useEventListener(
<template #title> <template #title>
{{ field.label }} {{ field.label }}
</template> </template>
<span data-testid="nc-field-label"> <span data-testid="nc-field-title ">{{ field.label?.trim() }}</span>
<LazyCellRichText
:value="field.label"
is-form-field
read-only
sync-value-change
render-as-text
class="text-xs font-normal text-gray-700"
data-testid="nc-form-help-text"
/>
</span>
</NcTooltip> </NcTooltip>
<span>)</span> <span>)</span>
</div> </div>
@ -1519,15 +1502,22 @@ useEventListener(
<div class="text-gray-800 mb-2"> <div class="text-gray-800 mb-2">
{{ $t('msg.info.formDisplayMessage') }} {{ $t('msg.info.formDisplayMessage') }}
</div> </div>
<a-textarea <a-form-item class="!my-0">
v-model:value="formViewData.success_msg" <LazyCellRichText
:rows="3" v-if="!isLocked && isEditable"
hide-details v-model:value="formViewData.success_msg"
class="nc-form-after-submit-msg !rounded-lg !px-3 !py-1" class="nc-form-after-submit-msg"
data-testid="nc-form-after-submit-msg" :is-form-field="true"
:disabled="isLocked || !isEditable" data-testid="nc-form-after-submit-msg"
@change="updateView" @update:value="updateView" />
/> <LazyCellRichText
v-else
:value="formViewData.success_msg"
class="nc-form-after-submit-msg"
is-form-field
read-only
data-testid="nc-form-after-submit-msg"
/></a-form-item>
</div> </div>
<!-- Other options --> <!-- Other options -->
@ -1645,10 +1635,8 @@ useEventListener(
} }
} }
.form-meta-input { .nc-form-input-label {
&::placeholder { @apply !px-4 !py-2 font-semibold text-gray-800 !rounded-lg !text-sm;
@apply !text-gray-500;
}
} }
.nc-form-help-text, .nc-form-help-text,
@ -1747,4 +1735,12 @@ useEventListener(
@apply pt-1 text-gray-700; @apply pt-1 text-gray-700;
} }
} }
.nc-form-after-submit-msg {
.nc-textarea-rich-editor {
@apply pl-1 pr-2 pt-2 pb-1 !rounded-lg !text-sm border-1 border-gray-200 focus-within:border-brand-500;
.ProseMirror {
min-height: 5rem;
}
}
}
</style> </style>

45
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
Unescape View File

@ -91,13 +91,10 @@ const onDecode = async (scannedCodeValue: string) => {
> >
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<div class="mb-4"> <div class="mb-4">
<LazyCellRichText <h1 class="text-2xl font-bold text-gray-900 mb-4">
:value="sharedFormView.heading" {{ sharedFormView.heading }}
class="text-2xl font-bold text-gray-900 !h-auto mb-4 -ml-1" </h1>
is-form-field
read-only
sync-value-change
/>
<div v-if="sharedFormView.subheading"> <div v-if="sharedFormView.subheading">
<LazyCellRichText <LazyCellRichText
:value="sharedFormView.subheading" :value="sharedFormView.subheading"
@ -115,11 +112,23 @@ const onDecode = async (scannedCodeValue: string) => {
<div class="flex justify-center"> <div class="flex justify-center">
<div v-if="sharedFormView" class="w-full lg:w-[95%]"> <div v-if="sharedFormView" class="w-full lg:w-[95%]">
<a-alert <a-alert
class="!my-4 !py-4 text-center !rounded-lg"
type="success" type="success"
class="!my-4 text-center !rounded-lg" data-testid="nc-survey-form__success-msg"
outlined outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'" >
/> <template #message>
<LazyCellRichText
v-if="sharedFormView?.success_msg?.trim()"
:value="sharedFormView?.success_msg"
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
<span v-else> Successfully submitted form data </span>
</template>
</a-alert>
<p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4"> <p v-if="sharedFormView.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
{{ $t('msg.newFormWillBeLoaded', { seconds: secondsRemain }) }} {{ $t('msg.newFormWillBeLoaded', { seconds: secondsRemain }) }}
@ -127,8 +136,8 @@ const onDecode = async (scannedCodeValue: string) => {
<div v-if="sharedFormView.submit_another_form" class="text-center"> <div v-if="sharedFormView.submit_another_form" class="text-center">
<NcButton type="primary" size="medium" @click="submitted = false"> <NcButton type="primary" size="medium" @click="submitted = false">
{{ $t('activity.submitAnotherForm') }}</NcButton {{ $t('activity.submitAnotherForm') }}
> </NcButton>
</div> </div>
</div> </div>
</div> </div>
@ -160,15 +169,9 @@ const onDecode = async (scannedCodeValue: string) => {
<div class="flex flex-col gap-3 md:gap-6"> <div class="flex flex-col gap-3 md:gap-6">
<div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2"> <div v-for="(field, index) in formColumns" :key="index" class="flex flex-col gap-2">
<div class="nc-form-column-label text-sm font-semibold text-gray-800"> <div class="nc-form-column-label text-sm font-semibold text-gray-800">
<div> <span>
<LazyCellRichText {{ field.label || field.title }}
:value="field.label || field.title" </span>
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span> <span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div> </div>
<div v-if="field?.description" class="nc-form-column-description text-gray-500 text-sm"> <div v-if="field?.description" class="nc-form-column-description text-gray-500 text-sm">

48
packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue
Unescape View File

@ -242,15 +242,10 @@ onMounted(() => {
class="w-full max-w-[max(33%,600px)] mx-auto flex flex-col justify-end" class="w-full max-w-[max(33%,600px)] mx-auto flex flex-col justify-end"
> >
<div class="px-4 md:px-0 flex flex-col justify-end"> <div class="px-4 md:px-0 flex flex-col justify-end">
<LazyCellRichText <h1 class="text-2xl font-bold text-gray-900 self-center text-center my-4" data-testid="nc-survey-form__heading">
:value="sharedFormView.heading" {{ sharedFormView.heading }}
class="text-2xl font-bold text-gray-900 !h-auto mb-4 -ml-1" </h1>
is-form-field <div v-if="sharedFormView.subheading?.trim()" class="w-full text-center">
read-only
sync-value-change
data-testid="nc-survey-form__heading"
/>
<div v-if="sharedFormView.subheading?.trim()" class="w-full">
<LazyCellRichText <LazyCellRichText
:value="sharedFormView.subheading" :value="sharedFormView.subheading"
class="font-medium text-base text-gray-500 dark:text-slate-300 !h-auto mb-4 -ml-1" class="font-medium text-base text-gray-500 dark:text-slate-300 !h-auto mb-4 -ml-1"
@ -272,15 +267,9 @@ onMounted(() => {
> >
<div v-if="field && !submitted" class="flex flex-col gap-2"> <div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="nc-form-column-label text-sm font-semibold text-gray-800" data-testid="nc-form-column-label"> <div class="nc-form-column-label text-sm font-semibold text-gray-800" data-testid="nc-form-column-label">
<div> <span>
<LazyCellRichText {{ field.label || field.title }}
:value="field.label || field.title" </span>
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span> <span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div> </div>
<div <div
@ -387,13 +376,28 @@ onMounted(() => {
<Transition name="slide-left"> <Transition name="slide-left">
<div v-if="submitted" class="flex flex-col justify-center items-center text-center"> <div v-if="submitted" class="flex flex-col justify-center items-center text-center">
<a-alert <a-alert
type="success"
class="!my-4 !py-4 text-center !rounded-lg" class="!my-4 !py-4 text-center !rounded-lg"
type="success"
data-testid="nc-survey-form__success-msg" data-testid="nc-survey-form__success-msg"
outlined outlined
:message="sharedFormView?.success_msg || $t('msg.info.thankYou')" >
:description="sharedFormView?.success_msg ? undefined : $t('msg.info.submittedFormData')" <template #message>
/> <LazyCellRichText
v-if="sharedFormView?.success_msg?.trim()"
:value="sharedFormView?.success_msg"
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
<span v-else>
{{ $t('msg.info.thankYou') }}
</span>
</template>
<template #description v-if="!sharedFormView?.success_msg?.trim()">
{{ $t('msg.info.submittedFormData') }}
</template>
</a-alert>
<div v-if="sharedFormView" class="mt-3"> <div v-if="sharedFormView" class="mt-3">
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4"> <p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">

Write Preview
Loading…
Cancel
Save