Merge pull request #4100 from nocodb/fix/checkbox-survey

packages/nc-gui/components/cell/Checkbox.vue

@@ -46,7 +46,7 @@ function onClick() {
 
 <template>
   <div
-    class="flex"
+    class="flex cursor-pointer"
     :class="{
       'justify-center': !isForm && !readOnly,
       'w-full': isForm,
@@ -56,12 +56,14 @@ function onClick() {
     @click="onClick"
   >
     <div class="px-1 pt-1 rounded-full items-center" :class="{ 'bg-gray-100': !vModel, '!ml-[-8px]': readOnly }">
+      <Transition name="layout" mode="out-in" :duration="100">
         <component
           :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
           :style="{
             color: checkboxMeta.color,
           }"
         />
+      </Transition>
     </div>
   </div>
 </template>

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

@@ -68,7 +68,27 @@ p {
 }
 
 .nc-form-view {
-  .nc-input {
+  .nc-cell {
+    &.nc-cell-checkbox {
+      @apply color-transition !border-0;
+
+      .nc-icon {
+        @apply !text-2xl;
+      }
+
+      .nc-cell-hover-show {
+        opacity: 100 !important;
+
+        div {
+          background-color: transparent !important;
+        }
+      }
+    }
+
+    &:not(.nc-cell-checkbox) {
+      @apply bg-white dark:bg-slate-500;
+
+      &.nc-input {
         @apply w-full rounded p-2 min-h-[40px] flex items-center border-solid border-1 border-gray-300 dark:border-slate-200;
 
         input,
@@ -85,14 +105,12 @@ p {
           }
         }
       }
-}
-
-.nc-cell {
-  @apply bg-white dark:bg-slate-500;
 
       .nc-attachment-cell > div {
         @apply dark:(bg-slate-100);
       }
+    }
+  }
 }
 
 .nc-form-column-label {

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

@@ -20,9 +20,9 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 </script>
 
 <template>
-  <div>
+  <div class="h-full flex flex-col items-center">
     <div
-      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"
+      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)"
     >
       <template v-if="sharedFormView">
         <h1 class="prose-2xl font-bold self-center my-4">{{ sharedFormView.heading }}</h1>
@@ -120,6 +120,8 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
       </template>
     </div>
 
+    <div class="flex items-end">
       <GeneralPoweredBy />
     </div>
+  </div>
 </template>

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

@@ -195,7 +195,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div ref="el" class="pt-8 md:p-0 w-full h-full flex flex-col">
+  <div ref="el" class="survey pt-8 md:p-0 w-full h-full flex flex-col">
     <div
       v-if="sharedFormView"
       style="height: max(40vh, 225px); min-height: 225px"
@@ -232,6 +232,7 @@ onMounted(() => {
 
               <LazySmartsheetHeaderCell
                 v-else
+                :class="field.uidt === UITypes.Checkbox ? 'nc-form-column-label__checkbox' : ''"
                 :column="{ ...field, title: field.label || field.title }"
                 :required="isRequired(field, field.required)"
                 :hide-menu="true"
@@ -260,7 +261,11 @@ onMounted(() => {
                   {{ error.$message }}
                 </div>
 
-                <div class="block text-[14px]" data-cy="nc-survey-form__field-description">
+                <div
+                  class="block text-[14px]"
+                  :class="field.uidt === UITypes.Checkbox ? 'text-center' : ''"
+                  data-cy="nc-survey-form__field-description"
+                >
                   {{ field.description }}
                 </div>
 
@@ -425,7 +430,8 @@ onMounted(() => {
   @apply overscroll-x-none;
 }
 
-.nc-form-column-label {
+.survey {
+  .nc-form-column-label {
     > * {
       @apply !prose-lg;
     }
@@ -433,13 +439,24 @@ onMounted(() => {
     .nc-icon {
       @apply mr-2;
     }
-}
+  }
+
+  .nc-form-column-label__checkbox {
+    @apply flex items-center justify-center gap-2 text-left;
+  }
 
-.nc-input {
+  .nc-input {
     @apply appearance-none w-full rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
 
+    &.nc-cell-checkbox {
+      > * {
+        @apply justify-center flex items-center;
+      }
+    }
+
     input {
       @apply !py-1 !px-1;
     }
+  }
 }
 </style>