diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue index ea12580908..dd4c5280b8 100644 --- a/packages/nc-gui/components/smartsheet/Form.vue +++ b/packages/nc-gui/components/smartsheet/Form.vue @@ -1122,18 +1122,20 @@ useEventListener( class="nc-form-field-layout !mt-2" @change="updateColMeta(element)" > - Dropdown - List + {{ $t('general.dropdown') }} + {{ $t('general.list') }} -
+ +
{{ $t('labels.showOnConditions') }}
{{ $t('labels.showFieldOnConditionsMet') }}
+
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json index 35646e423a..0056249390 100644 --- a/packages/nc-gui/lang/en.json +++ b/packages/nc-gui/lang/en.json @@ -195,7 +195,9 @@ "restore": "Restore", "replace": "Replace", "banner": "Banner", - "logo": "Logo" + "logo": "Logo", + "dropdown":"Dropdown", + "list":"List" }, "objects": { "day": "Day", diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue index 13a91b6536..32f8ba8ba7 100644 --- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue +++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue @@ -66,8 +66,16 @@ p { } .nc-form-view { + .nc-data-cell { + @apply !border-none rounded-none; + + &:focus-within { + @apply !border-none; + } + } + .nc-cell { - @apply bg-white dark:bg-slate-500; + @apply bg-white dark:bg-slate-500 appearance-none; &.nc-cell-checkbox { @apply color-transition !border-0; @@ -89,7 +97,18 @@ p { @apply bg-white dark:bg-slate-500; &.nc-input { - @apply w-full rounded p-2 min-h-[40px] flex items-center; + @apply w-full; + + &:not(.layout-list) { + @apply rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500; + + & > div { + @apply !bg-transparent; + } + } + &.layout-list { + @apply h-auto !pl-0 !py-1 !bg-transparent !dark:bg-none; + } .duration-cell-wrapper { @apply w-full; @@ -105,8 +124,7 @@ p { input, textarea, - &.nc-virtual-cell, - > div { + &.nc-virtual-cell { @apply bg-white dark:(bg-slate-500 text-white); .ant-btn { @@ -117,6 +135,18 @@ p { @apply dark:(bg-slate-700 text-white); } } + &:not(.layout-list) > div { + @apply bg-white dark:(bg-slate-500 text-white); + } + &.layout-list > div { + .ant-btn { + @apply dark:(bg-slate-300); + } + + .chip { + @apply dark:(bg-slate-700 text-white); + } + } &.nc-cell-longtext { @apply p-0 h-auto; @@ -132,7 +162,7 @@ p { } } &:not(.nc-cell-longtext) { - @apply px-2 py-2; + @apply p-2; } textarea { diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue index 57f239400d..6b36f969d1 100644 --- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue +++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue @@ -176,7 +176,10 @@ const onDecode = async (scannedCodeValue: string) => { v-model="formState[field.title]" class="nc-input truncate" :data-testid="`nc-form-input-cell-${field.label || field.title}`" - :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`" + :class="[ + `nc-form-input-${field.title?.replaceAll(' ', '')}`, + { 'layout-list': parseProp(field?.meta)?.isList }, + ]" :column="field" edit-enabled /> diff --git a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue index cc3e0f27a5..f749801aa9 100644 --- a/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue +++ b/packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue @@ -292,6 +292,7 @@ onMounted(() => { v-else v-model="formState[field.title]" class="nc-input h-auto" + :class="parseProp(field?.meta)?.isList ? 'layout-list' : ''" :data-testid="`nc-survey-form__input-${field.title.replaceAll(' ', '')}`" :column="field" edit-enabled @@ -481,33 +482,6 @@ onMounted(() => { @apply flex items-center justify-center gap-2 text-left; } - .nc-input { - @apply appearance-none w-full !bg-white !rounded-lg border-solid border-1 border-gray-200 focus-within:border-brand-500; - &.nc-cell-rating, - &.nc-cell-geodata { - @apply !py-1; - } - - :deep(input) { - @apply !px-1; - } - &.nc-cell-longtext { - @apply p-0 h-auto overflow-hidden; - } - &:not(.nc-cell-longtext) { - @apply px-2 py-2; - :deep(textarea) { - @apply !p-2; - } - } - - &.nc-cell-checkbox { - > * { - @apply justify-center flex items-center; - } - } - } - .nc-form-data-cell.nc-data-cell { @apply !border-none rounded-none;