Browse Source

fix(nc-gui): oss shared form ui changes

pull/7729/head
Ramesh Mane 8 months ago
parent
commit
7d1cfcd5e6
  1. 8
      packages/nc-gui/components/smartsheet/Form.vue
  2. 4
      packages/nc-gui/lang/en.json
  3. 40
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index.vue
  4. 5
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/index.vue
  5. 28
      packages/nc-gui/pages/index/[typeOrId]/form/[viewId]/index/survey.vue

8
packages/nc-gui/components/smartsheet/Form.vue

@ -1122,18 +1122,20 @@ useEventListener(
class="nc-form-field-layout !mt-2"
@change="updateColMeta(element)"
>
<a-radio :value="false">Dropdown</a-radio>
<a-radio :value="true">List</a-radio>
<a-radio :value="false">{{ $t('general.dropdown') }}</a-radio>
<a-radio :value="true">{{ $t('general.list') }}</a-radio>
</a-radio-group>
</div>
<!-- Todo: Show on conditions,... -->
<div class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
<!-- eslint-disable vue/no-constant-condition -->
<div v-if="false" class="flex items-start gap-3 px-3 py-2 border-1 border-gray-200 rounded-lg">
<a-switch v-e="['a:form-view:field:show-on-condition']" size="small" />
<div>
<div class="font-medium text-gray-800">{{ $t('labels.showOnConditions') }}</div>
<div class="text-gray-500">{{ $t('labels.showFieldOnConditionsMet') }}</div>
</div>
</div>
<!-- Limit options -->
<div v-if="isSelectTypeCol(element.uidt)" class="px-3 py-2 border-1 border-gray-200 rounded-lg">
<div class="flex items-start gap-3">

4
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",

40
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 {

5
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
/>

28
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;

Loading…
Cancel
Save