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

refactor(nc-gui): form view styles

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
a91c980ba3
commit
de519ccfff
4 changed files with 71 additions and 74 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. 103
      packages/nc-gui/components/smartsheet/Form.vue
  2. 10
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  3. 4
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  4. 28
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

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

@ -555,6 +555,7 @@ watch(view, (nextView) => {
/> />
</a-form-item> </a-form-item>
</div> </div>
<div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div> <div v-else class="px-4 ml-3 w-full text-bold text-md">{{ formViewData.subheading || '---' }}</div>
<Draggable <Draggable
@ -575,7 +576,7 @@ watch(view, (nextView) => {
:class="[ :class="[
`nc-form-drag-${element.title.replaceAll(' ', '')}`, `nc-form-drag-${element.title.replaceAll(' ', '')}`,
{ {
'border-1': activeRow === element.title, 'bg-primary bg-opacity-5 ring-0.5 ring-accent ring-opacity-100': activeRow === element.title,
}, },
]" ]"
@click="activeRow = element.title" @click="activeRow = element.title"
@ -584,62 +585,53 @@ watch(view, (nextView) => {
v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)" v-if="isUIAllowed('editFormView') && !isRequired(element, element.required)"
class="absolute flex top-2 right-2" class="absolute flex top-2 right-2"
> >
<mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" /> <MdiEyeOffOutline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
</div> </div>
<template v-if="activeRow === element.title"> <div v-if="activeRow === element.title" class="flex flex-col gap-3 mb-3">
<div class="flex"> <div class="flex gap-2 items-center">
<div <span
class="flex flex-1 opacity-0 align-center gap-2" class="text-gray-500 mr-2 nc-form-input-required"
:class="{ 'opacity-100': activeRow === element.title }" @click="
() => {
element.required = !element.required
updateColMeta(element)
}
"
> >
<div class="items-center flex"> {{ $t('general.required') }}
<span </span>
class="text-xs text-gray-500 mr-2 nc-form-input-required"
@click=" <a-switch
() => { v-model:checked="element.required"
element.required = !element.required v-e="['a:form-view:field:mark-required']"
updateColMeta(element) size="small"
} @change="updateColMeta(element)"
" />
>
{{ $t('general.required') }}
</span>
<a-switch
v-model:checked="element.required"
v-e="['a:form-view:field:mark-required']"
size="small"
class="ml-2"
@change="updateColMeta(element)"
/>
</div>
</div>
</div> </div>
<div class="my-3"> <a-form-item class="my-0 w-1/2 !mb-1">
<a-form-item class="my-0 w-1/2 !mb-1"> <a-input
<a-input v-model:value="element.label"
v-model:value="element.label" type="text"
size="small" class="form-meta-input nc-form-input-label"
class="form-meta-input !bg-[#dbdbdb] nc-form-input-label" :placeholder="$t('msg.info.formInput')"
:placeholder="$t('msg.info.formInput')" @change="updateColMeta(element)"
@change="updateColMeta(element)" >
> </a-input>
</a-input> </a-form-item>
</a-form-item>
<a-form-item class="mt-2 mb-0 w-1/2 !mb-1">
<a-form-item class="mt-2 mb-0 w-1/2 !mb-1"> <a-input
<a-input v-model:value="element.description"
v-model:value="element.description" type="text"
size="small" class="form-meta-input text-sm nc-form-input-help-text"
class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text" :placeholder="$t('msg.info.formHelpText')"
:placeholder="$t('msg.info.formHelpText')" @change="updateColMeta(element)"
@change="updateColMeta(element)" />
/> </a-form-item>
</a-form-item> </div>
</div>
</template>
<div> <div>
<LazySmartsheetHeaderVirtualCell <LazySmartsheetHeaderVirtualCell
v-if="isVirtualCol(element)" v-if="isVirtualCol(element)"
@ -647,6 +639,7 @@ watch(view, (nextView) => {
:required="isRequired(element, element.required)" :required="isRequired(element, element.required)"
:hide-menu="true" :hide-menu="true"
/> />
<LazySmartsheetHeaderCell <LazySmartsheetHeaderCell
v-else v-else
:column="{ ...element, title: element.label || element.title }" :column="{ ...element, title: element.label || element.title }"
@ -658,6 +651,7 @@ watch(view, (nextView) => {
<a-form-item <a-form-item
v-if="isVirtualCol(element)" v-if="isVirtualCol(element)"
:name="element.title" :name="element.title"
class="!mb-0"
:rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]" :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
> >
<LazySmartsheetVirtualCell <LazySmartsheetVirtualCell
@ -673,6 +667,7 @@ watch(view, (nextView) => {
<a-form-item <a-form-item
v-else v-else
:name="element.title" :name="element.title"
class="!mb-0"
:rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]" :rules="[{ required: isRequired(element, element.required), message: `${element.title} is required` }]"
> >
<LazySmartsheetCell <LazySmartsheetCell
@ -685,7 +680,7 @@ watch(view, (nextView) => {
/> />
</a-form-item> </a-form-item>
<span class="text-gray-500 text-xs -mt-1 block">{{ element.description }}</span> <div class="text-gray-500 text-xs">{{ element.description }}</div>
</div> </div>
</template> </template>
@ -700,7 +695,7 @@ watch(view, (nextView) => {
</Draggable> </Draggable>
<div class="justify-center flex mt-6"> <div class="justify-center flex mt-6">
<button type="submit" class="scaling-btn nc-form-submit" @click="submitForm"> <button type="submit" class="uppercase scaling-btn nc-form-submit" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
</div> </div>

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

@ -27,15 +27,13 @@ const shouldRedirect = (to: string) => {
if (sharedViewMeta.value.surveyMode) { if (sharedViewMeta.value.surveyMode) {
if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`) if (!to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}/survey`)
} else { } else {
navigateTo(`/nc/form/${route.params.viewId}`) if (to.includes('survey')) navigateTo(`/nc/form/${route.params.viewId}`)
} }
} }
shouldRedirect(route.name as string) shouldRedirect(route.name as string)
router.afterEach((to) => { router.afterEach((to) => shouldRedirect(to.name as string))
shouldRedirect(to.name as string)
})
</script> </script>
<template> <template>
@ -82,8 +80,8 @@ p {
> div { > div {
@apply bg-white dark:(bg-slate-500 text-white); @apply bg-white dark:(bg-slate-500 text-white);
.nc-icon { .ant-btn {
@apply dark:text-slate-900; @apply dark:(bg-slate-300);
} }
.chip { .chip {

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

@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template> <template>
<div <div
class="color-transition bg-white dark:bg-slate-700 relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(rounded-lg border-1 border-gray-200 shadow-xl) mt-12" class="color-transition relative flex flex-col justify-center gap-2 w-full max-w-[max(33%,600px)] m-auto py-4 pb-8 px-16 md:(bg-white dark:bg-slate-700 rounded-lg border-1 border-gray-200 shadow-xl) mt-12"
> >
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
@ -109,7 +109,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
</div> </div>
<div class="text-center mt-4"> <div class="text-center mt-4">
<button type="submit" class="scaling-btn prose-sm" @click="submitForm"> <button type="submit" class="uppercase scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }} {{ $t('general.submit') }}
</button> </button>
</div> </div>

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

@ -133,23 +133,25 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</script> </script>
<template> <template>
<div ref="el" class="w-full min-h-2/3 grid grid-rows-2"> <div ref="el" class="w-full grid grid-rows-2">
<template v-if="sharedFormView"> <template v-if="sharedFormView">
<div class="max-w-[max(33%,600px)] m-auto flex flex-col justify-end"> <div class="max-w-[max(33%,600px)] mx-auto">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1> <div class="h-33vh flex flex-col justify-end">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4"> <h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }} {{ sharedFormView.subheading }}
</h2> </h2>
</div>
</div> </div>
</template> </template>
<div class="h-1/2 w-full flex items-center px-4 md:px-0"> <div class="h-full w-full flex items-center px-4 md:px-0">
<Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in"> <Transition :name="`slide-${transitionName}`" :duration="1000" mode="out-in">
<div <div
ref="el" ref="el"
:key="field.title" :key="field.title"
class="color-transition flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto" class="color-transition h-full flex flex-col justify-center 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="flex nc-form-column-label"> <div class="flex nc-form-column-label">
@ -190,7 +192,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
{{ error.$message }} {{ error.$message }}
</div> </div>
{{ field.description }} <div class="block">
{{ field.description }}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -233,9 +237,9 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</div> </div>
</div> </div>
<div class="mt-12 select-none text-center text-gray-500 dark:text-slate-200"> <div class="flex-1" />
{{ index + 1 }} / {{ formColumns?.length }}
</div> <div class="select-none text-center text-gray-500 dark:text-slate-200">{{ index + 1 }} / {{ formColumns?.length }}</div>
<Transition name="layout"> <Transition name="layout">
<div v-if="submitted" class="flex flex-col justify-center text-center"> <div v-if="submitted" class="flex flex-col justify-center text-center">

Write Preview
Loading…
Cancel
Save