Browse Source

feat(nc-gui): add min heights to prevent title from jumping

pull/3669/head
braks 2 years ago committed by Raju Udava
parent
commit
9c9d363630
  1. 2
      packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue
  2. 2
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
  3. 210
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

2
packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@ -31,7 +31,7 @@ const onClick = () => {
<template>
<div
class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px] pt-12"
class="overflow-y-auto overflow-x-hidden flex flex-wrap color-transition nc-form-view relative md:bg-primary bg-opacity-10 dark:(bg-slate-900) h-full min-h-[600px]"
>
<NuxtPage />

2
packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue

@ -21,7 +21,7 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
<template>
<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)"
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"
>
<template v-if="sharedFormView">
<h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>

210
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -105,127 +105,127 @@ onKeyStroke(['ArrowRight', 'ArrowUp', 'Enter', 'Space'], goNext)
</script>
<template>
<div class="w-full flex flex-auto flex-col justify-center items-center">
<div class="w-full min-h-2/3 flex flex-auto flex-col justify-center items-center">
<template v-if="sharedFormView">
<div class="flex-1" />
<div class="min-h-1 h-1/3 w-full flex flex-col justify-end">
<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>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }}
</h2>
<h2 class="prose-lg text-slate-500 dark:text-slate-300 self-center mb-4">
{{ sharedFormView.subheading }}
</h2>
</div>
</template>
<Transition :name="`slide-${transitionName}`" mode="out-in">
<div
ref="el"
:key="field.title"
class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div>
<div>
<SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<SmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>
<div class="h-1/2 w-full">
<Transition :name="`slide-${transitionName}`" mode="out-in">
<div
ref="el"
:key="field.title"
class="color-transition bg-white dark:bg-slate-700 flex flex-col justify-center gap-4 w-full max-w-[max(33%,600px)] m-auto px-8 pt-8 pb-4 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
>
<div v-if="field && !submitted" class="flex flex-col gap-2">
<div class="flex nc-form-column-label">
<SmartsheetHeaderVirtualCell
v-if="isVirtualCol(field)"
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
{{ field.description }}
<SmartsheetHeaderCell
v-else
:column="{ ...field, title: field.label || field.title }"
:required="isRequired(field, field.required)"
:hide-menu="true"
/>
</div>
</div>
</div>
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
<a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
<button
class="group color-transition transform hover:scale-110 absolute left-5 top-1/2 md:static"
@click="goPrevious"
>
<MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
</button>
</a-tooltip>
<div class="flex-1">
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
<button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
</div>
<div>
<SmartsheetVirtualCell
v-if="isVirtualCol(field)"
class="mt-0 nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
/>
<a-tooltip
v-if="!isLast"
placement="left"
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
:mouse-leave-delay="0"
>
<button class="group color-transition transform absolute right-5 top-1/2 md:static hover:scale-110" @click="goNext">
<TransitionGroup name="layout">
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
</TransitionGroup>
</button>
</a-tooltip>
</div>
<SmartsheetCell
v-else
v-model="formState[field.title]"
class="nc-input"
:class="`nc-form-input-${field.title.replaceAll(' ', '')}`"
:column="field"
:edit-enabled="true"
/>
<Transition name="layout">
<div v-if="submitted" class="flex flex-col justify-center text-center">
<h2 class="prose-xl mb-2">Thank you!</h2>
<div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
<div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
{{ error.$message }}
</div>
<div v-if="sharedFormView" class="min-w-350px mt-3">
<a-alert
type="success"
class="my-4 text-center"
outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'"
/>
{{ field.description }}
</div>
</div>
</div>
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds
</p>
<div v-if="(!isFirst || !isLast) && !submitted" class="flex w-full text-lg mt-2">
<a-tooltip v-if="!isFirst" title="Go to previous" :mouse-enter-delay="1" :mouse-leave-delay="0">
<button
class="group color-transition transform hover:scale-110 absolute left-1 top-1/2 md:static"
@click="goPrevious"
>
<MdiChevronLeft class="group-hover:text-accent text-2xl md:text-md" />
</button>
</a-tooltip>
<div v-if="sharedFormView?.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
<div class="flex-1">
<div v-if="isLast && !submitted && !v$.$invalid" class="text-center my-4">
<button type="submit" class="scaling-btn prose-sm" @click="submitForm">
{{ $t('general.submit') }}
</button>
</div>
</div>
<a-tooltip
v-if="!isLast"
placement="left"
:title="v$.localState[field.title]?.$error ? v$.localState[field.title].$errors[0].$message : 'Go to next'"
:mouse-enter-delay="v$.localState[field.title]?.$error ? 0 : 1"
:mouse-leave-delay="0"
>
<button class="group color-transition transform absolute right-1 top-1/2 md:static hover:scale-110" @click="goNext">
<TransitionGroup name="layout">
<MdiCloseCircleOutline v-if="v$.localState[field.title]?.$error" class="text-red-500 text-2xl md:text-md" />
<MdiChevronRight v-else class="group-hover:text-accent text-2xl md:text-md" />
</TransitionGroup>
</button>
</a-tooltip>
</div>
</Transition>
</div>
</Transition>
<div v-if="sharedFormView" class="flex-1" />
<Transition name="layout">
<div v-if="submitted" class="flex flex-col justify-center text-center">
<h2 class="prose-xl mb-2">Thank you!</h2>
<div v-if="sharedFormView" class="min-w-350px mt-3">
<a-alert
type="success"
class="my-4 text-center"
outlined
:message="sharedFormView.success_msg || 'Successfully submitted form data'"
/>
<p v-if="sharedFormView?.show_blank_form" class="text-xs text-slate-500 dark:text-slate-300 text-center my-4">
New form will be loaded after {{ secondsRemain }} seconds
</p>
<div v-if="sharedFormView?.submit_another_form" class="text-center">
<a-button type="primary" @click="submitted = false"> Submit Another Form</a-button>
</div>
</div>
</div>
</Transition>
</div>
</Transition>
</div>
<div class="absolute bottom-12 right-12 flex flex-col">
<div>{{ index + 1 }} / {{ formColumns?.length }}</div>

Loading…
Cancel
Save