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 }">
-      <component
-        :is="getMdiIcon(vModel ? checkboxMeta.icon.checked : checkboxMeta.icon.unchecked)"
-        :style="{
-          color: checkboxMeta.color,
-        }"
-      />
+      <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,30 +68,48 @@ p {
 }
 
 .nc-form-view {
-  .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;
+  .nc-cell {
+    &.nc-cell-checkbox {
+      @apply color-transition !border-0;
 
-    input,
-    &.nc-virtual-cell,
-    > div {
-      @apply bg-white dark:(bg-slate-500 text-white);
-
-      .ant-btn {
-        @apply dark:(bg-slate-300);
+      .nc-icon {
+        @apply !text-2xl;
       }
 
-      .chip {
-        @apply dark:(bg-slate-700 text-white);
+      .nc-cell-hover-show {
+        opacity: 100 !important;
+
+        div {
+          background-color: transparent !important;
+        }
       }
     }
-  }
-}
 
-.nc-cell {
-  @apply bg-white dark:bg-slate-500;
+    &: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,
+        &.nc-virtual-cell,
+        > div {
+          @apply bg-white dark:(bg-slate-500 text-white);
 
-  .nc-attachment-cell > div {
-    @apply dark:(bg-slate-100);
+          .ant-btn {
+            @apply dark:(bg-slate-300);
+          }
+
+          .chip {
+            @apply dark:(bg-slate-700 text-white);
+          }
+        }
+      }
+
+      .nc-attachment-cell > div {
+        @apply dark:(bg-slate-100);
+      }
+    }
   }
 }
 

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>
 
-    <GeneralPoweredBy />
+    <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,21 +430,33 @@ onMounted(() => {
   @apply overscroll-x-none;
 }
 
-.nc-form-column-label {
-  > * {
-    @apply !prose-lg;
+.survey {
+  .nc-form-column-label {
+    > * {
+      @apply !prose-lg;
+    }
+
+    .nc-icon {
+      @apply mr-2;
+    }
   }
 
-  .nc-icon {
-    @apply mr-2;
+  .nc-form-column-label__checkbox {
+    @apply flex items-center justify-center gap-2 text-left;
   }
-}
 
-.nc-input {
-  @apply appearance-none w-full rounded px-2 py-2 my-2 border-solid border-1 border-primary border-opacity-50;
+  .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;
+    input {
+      @apply !py-1 !px-1;
+    }
   }
 }
 </style>