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

fix(nc-gui): update font weight and size of form subheading, field title, helper text

pull/7664/head
Ramesh Mane 9 months ago
parent
5537cde5b9
commit
e9699eaad3
3 changed files with 17 additions and 17 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. 22
      packages/nc-gui/components/smartsheet/Form.vue
  2. 6
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
  3. 6
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

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

@ -509,7 +509,7 @@ useEventListener(
{{ formViewData.heading }} {{ formViewData.heading }}
</h1> </h1>
<h2 v-if="formViewData.subheading" class="font-bold text-base text-gray-500 mb-4"> <h2 v-if="formViewData.subheading" class="font-medium text-base text-gray-500 mb-4">
{{ formViewData.subheading }} {{ formViewData.subheading }}
</h2> </h2>
</div> </div>
@ -645,7 +645,7 @@ useEventListener(
<a-form-item v-if="isEditable" class="w-full !my-0"> <a-form-item v-if="isEditable" class="w-full !my-0">
<a-textarea <a-textarea
v-model:value="formViewData.subheading" v-model:value="formViewData.subheading"
class="nc-form-focus-element w-full !p-0 !m-0 !border-0 !rounded-none font-bold !text-gray-500" class="nc-form-focus-element w-full !px-0 !m-0 !border-0 !rounded-none font-medium text-base !text-gray-500"
:style="{ :style="{
borderRightWidth: '0px !important', borderRightWidth: '0px !important',
resize: 'vertical', resize: 'vertical',
@ -663,7 +663,7 @@ useEventListener(
/> />
</a-form-item> </a-form-item>
<div v-else class="font-bold text-base text-gray-500"> <div v-else class="font-medium text-base text-gray-500">
{{ formViewData.subheading || '---' }} {{ formViewData.subheading || '---' }}
</div> </div>
</div> </div>
@ -715,11 +715,11 @@ useEventListener(
@click.stop="onFormItemClick(element)" @click.stop="onFormItemClick(element)"
> >
<div v-if="activeRow !== element.title"> <div v-if="activeRow !== element.title">
<div> <div class="text-sm font-semibold text-gray-800">
<span data-testid="nc-form-input-label"> <span data-testid="nc-form-input-label">
{{ element.label || element.title }} {{ element.label || element.title }}
</span> </span>
<span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(element, element.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div> </div>
<div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text"> <div class="nc-form-help-text text-gray-500 text-sm mt-2" data-testid="nc-form-help-text">
@ -737,15 +737,15 @@ useEventListener(
<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" show-on-truncate-only> <NcTooltip class="truncate max-w-3/5" show-on-truncate-only>
<template #title> {{ element.label || element.title }} </template> <template #title> {{ element.title }} </template>
<span data-testid="nc-form-input-label"> <span data-testid="nc-form-input-label">
{{ element.label || element.title }} {{ element.title }}
</span> </span>
</NcTooltip> </NcTooltip>
<span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(element, element.required)" class="text-red-500">&nbsp;*</span>
</div> </div>
<a-form-item class="my-0 !mb-2"> <a-form-item class="!my-0">
<div class="flex gap-2 items-center"> <div class="flex gap-2 items-center">
<span <span
class="nc-form-input-required text-gray-500 mr-2" class="nc-form-input-required text-gray-500 mr-2"
@ -1259,10 +1259,10 @@ useEventListener(
} }
.nc-form-input-label { .nc-form-input-label {
@apply !px-4 !py-2; @apply !px-4 !py-2 text-gray-800;
} }
.nc-form-input-help-text { .nc-form-input-help-text {
@apply !px-4 !py-1; @apply !px-4 !py-1 text-gray-700;
} }
.nc-form-help-text, .nc-form-help-text,

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

@ -95,7 +95,7 @@ const onDecode = async (scannedCodeValue: string) => {
{{ sharedFormView.heading }} {{ sharedFormView.heading }}
</h1> </h1>
<h2 v-if="sharedFormView.subheading" class="text-base font-bold text-gray-500 dark:text-slate-300 mb-4"> <h2 v-if="sharedFormView.subheading" class="font-medium text-base text-gray-500 dark:text-slate-300 mb-4">
{{ sharedFormView.subheading }} {{ sharedFormView.subheading }}
</h2> </h2>
</div> </div>
@ -150,11 +150,11 @@ const onDecode = async (scannedCodeValue: string) => {
<div class="nc-form h-full"> <div class="nc-form h-full">
<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"> <div class="nc-form-column-label text-sm font-semibold text-gray-800">
<span> <span>
{{ field.label || field.title }} {{ field.label || field.title }}
</span> </span>
<span v-if="isRequired(field, field.required)" class="text-red-500">&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">
{{ field?.description }} {{ field?.description }}

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

@ -248,7 +248,7 @@ onMounted(() => {
<h2 <h2
v-if="sharedFormView.subheading && sharedFormView.subheading !== ''" v-if="sharedFormView.subheading && sharedFormView.subheading !== ''"
class="text-base font-bold text-gray-500 dark:text-gray-300 self-center mb-4" class="font-medium text-base text-gray-500 dark:text-gray-300 self-center mb-4"
data-testid="nc-survey-form__sub-heading" data-testid="nc-survey-form__sub-heading"
> >
{{ sharedFormView?.subheading }} {{ sharedFormView?.subheading }}
@ -264,11 +264,11 @@ onMounted(() => {
class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto" class="color-transition h-full flex flex-col mt-6 gap-4 w-full max-w-[max(33%,600px)] m-auto"
> >
<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" 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">
<span> <span>
{{ field.label || field.title }} {{ field.label || field.title }}
</span> </span>
<span v-if="isRequired(field, field.required)" class="text-red-500">&nbsp;*</span> <span v-if="isRequired(field, field.required)" class="text-red-500 text-base leading-[18px]">&nbsp;*</span>
</div> </div>
<div <div
v-if="field?.description" v-if="field?.description"

Write Preview
Loading…
Cancel
Save