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;