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

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">
<div class="mb-4">
<LazyCellRichText
:value="sharedFormView.heading"
class="text-2xl font-bold text-gray-900 !h-auto mb-4 -ml-1"
is-form-field
read-only
sync-value-change
/>
<h1 class="text-2xl font-bold text-gray-900 mb-4">
{{ sharedFormView.heading }}
</h1>
<div v-if="sharedFormView.subheading">
<LazyCellRichText
:value="sharedFormView.subheading"
@ -115,11 +112,23 @@ const onDecode = async (scannedCodeValue: string) => {
<div class="flex justify-center">
<div v-if="sharedFormView" class="w-full lg:w-[95%]">
<a-alert
class="!my-4 !py-4 text-center !rounded-lg"
type="success"
class="!my-4 text-center !rounded-lg"
data-testid="nc-survey-form__success-msg"
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">
{{ $t('msg.newFormWillBeLoaded', { seconds: secondsRemain }) }}
@ -127,8 +136,8 @@ const onDecode = async (scannedCodeValue: string) => {
<div v-if="sharedFormView.submit_another_form" class="text-center">
<NcButton type="primary" size="medium" @click="submitted = false">
{{ $t('activity.submitAnotherForm') }}</NcButton
>
{{ $t('activity.submitAnotherForm') }}
</NcButton>
</div>
</div>
</div>
@ -160,15 +169,9 @@ const onDecode = async (scannedCodeValue: string) => {
<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 class="nc-form-column-label text-sm font-semibold text-gray-800">
<div>
<LazyCellRichText
:value="field.label || field.title"
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
<span>
{{ field.label || field.title }}
</span>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div>
<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"
>
<div class="px-4 md:px-0 flex flex-col justify-end">
<LazyCellRichText
:value="sharedFormView.heading"
class="text-2xl font-bold text-gray-900 !h-auto mb-4 -ml-1"
is-form-field
read-only
sync-value-change
data-testid="nc-survey-form__heading"
/>
<div v-if="sharedFormView.subheading?.trim()" class="w-full">
<h1 class="text-2xl font-bold text-gray-900 self-center text-center my-4" data-testid="nc-survey-form__heading">
{{ sharedFormView.heading }}
</h1>
<div v-if="sharedFormView.subheading?.trim()" class="w-full text-center">
<LazyCellRichText
:value="sharedFormView.subheading"
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 class="nc-form-column-label text-sm font-semibold text-gray-800" data-testid="nc-form-column-label">
<div>
<LazyCellRichText
:value="field.label || field.title"
class="!h-auto -ml-1"
is-form-field
read-only
sync-value-change
/>
</div>
<span>
{{ field.label || field.title }}
</span>
<span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div>
<div
@ -387,13 +376,28 @@ onMounted(() => {
<Transition name="slide-left">
<div v-if="submitted" class="flex flex-col justify-center items-center text-center">
<a-alert
type="success"
class="!my-4 !py-4 text-center !rounded-lg"
type="success"
data-testid="nc-survey-form__success-msg"
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">
<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