feat(nc-gui): form theme color

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

@@ -28,6 +28,7 @@ import {
   useViewColumnsOrThrow,
   useViewData,
   watch,
+  parseProp,
 } from '#imports'
 
 provide(IsFormInj, ref(true))
@@ -57,6 +58,8 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useRoles()
 
+const { appInfo } = useGlobal()
+
 const formState = reactive({})
 
 const secondsRemain = ref(0)
@@ -213,10 +216,10 @@ function onMove(event: any, isVisibleFormFields = false) {
   $e('a:form-view:reorder')
 }
 
-function showOrHideColumn(column: Record<string, any>, show: boolean) {
+function showOrHideColumn(column: Record<string, any>, show: boolean, isSidePannel = false) {
   if (shouldSkipColumn(column)) {
     // Required field can't be moved
-    message.info(t('msg.info.requriedFieldsCantBeMoved'))
+    !isSidePannel && message.info(t('msg.info.requriedFieldsCantBeMoved'))
     return
   }
 
@@ -226,7 +229,7 @@ function showOrHideColumn(column: Record<string, any>, show: boolean) {
     saveOrUpdate(
       {
         ...column,
-        show: show,
+        show,
       },
       fieldIndex,
     )
@@ -288,6 +291,11 @@ function setFormData() {
     ...formViewData.value,
     submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
     show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
+    meta: {
+      hide_branding: false,
+      theme_color: '#F9F9FA',
+      ...(parseProp(formViewData.value?.meta) ?? {}),
+    },
   }
 
   // email me
@@ -443,9 +451,21 @@ const onFormItemClick = (element: any) => {
       </a-row>
 
       <a-row v-else class="h-full flex" data-testid="nc-form-wrapper">
-        <a-col v-if="formViewData" :span="isEditable ? 16 : 24" class="h-full overflow-auto nc-form-scrollbar p-6 bg-gray-50">
+        <a-col
+          v-if="formViewData"
+          :span="isEditable ? 16 : 24"
+          class="h-full overflow-auto nc-form-scrollbar p-6 bg-gray-50"
+          :style="{background:(formViewData?.meta as Record<string,any>).theme_color}"
+        >
           <div class="h-[160px] bg-primary bg-opacity-75 border-gray-200 rounded-3xl">
             <!-- for future implementation of cover image -->
+            <LazyNuxtImg
+              class="h-full"
+              :src="`${appInfo.ncSiteUrl}/dltemp/KQahh21IPmhTKhVB/1708109400000/noco/pr5u10r2vcqirf2/mua2zr4vlyv3524/cvncb31si72grpm/X3yt8PX8ZFQEM5mluk.png`"
+              alt="form-banner'"
+              placeholder
+              quality="75"
+            />
           </div>
 
           <a-card
@@ -744,19 +764,20 @@ const onFormItemClick = (element: any) => {
               </div>
             </a-form>
 
+            <template v-if="!parseProp(formViewData?.meta).hide_branding">
               <a-divider v-if="!isLocked" class="!my-8" />
-
               <!-- Nocodb Branding  -->
               <div class="flex items-center gap-3">
                 <!-- Todo: add new NocoDB icon -->
                 <img src="~assets/img/icons/64x64.png" alt="NocoDB" class="w-6" />
                 <div class="text-sm text-gray-700">NocoDB Forms</div>
               </div>
+            </template>
           </a-card>
         </a-col>
         <a-col v-if="isEditable" :span="8" class="h-full nc-form-left-drawer border-l border-gray-200">
           <Splitpanes horizontal class="w-full nc-form-right-splitpane">
-            <Pane min-size="25" size="50" class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4">
+            <Pane min-size="30" size="50" class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4 !min-h-200px">
               <div class="flex flex-wrap justify-between items-center gap-2">
                 <div class="flex gap-3">
                   <div class="text-base font-bold text-gray-900">
@@ -803,7 +824,7 @@ const onFormItemClick = (element: any) => {
                   v-model:value="searchQuery"
                   data-testid="nc-form-field-search-input"
                   class="!h-9 !px-3 !py-1 !rounded-lg"
-                  :placeholder="$t('placeholder.searchFields') + '...'"
+                  :placeholder="`${$t('placeholder.searchFields')}...`"
                 >
                   <template #prefix>
                     <GeneralIcon icon="search" class="mr-2 h-4 w-4 text-gray-500 group-hover:text-black" />
@@ -823,24 +844,37 @@ const onFormItemClick = (element: any) => {
                 <div v-if="!localColumns.length" class="px-0.5 py-2 text-gray-500 text-center">
                   {{ $t('title.noFieldsFound') }}
                 </div>
+                <template v-if="localColumns.length">
+                  <div
+                    key="nc-form-show-all-fields"
+                    class="w-full p-2 flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
+                    data-testid="nc-form-show-all-fields"
+                    @click.stop
+                  >
+                    <div class="w-4 h-4 flex-none mr-2"></div>
+                    <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
+                      <div class="flex-1 font-base">Select all fields</div>
+                      <NcSwitch :checked="visibleColumns.length === localColumns.length" @change="handleAddOrRemoveAllColumns" />
+                    </div>
+                  </div>
                   <Draggable
-                  v-if="localColumns"
                     v-model="localColumns"
                     item-key="id"
-                  @change="onMove($event)"
+                    class=""
                     :style="{ height: 'calc(100% - 64px)' }"
+                    @change="onMove($event)"
                   >
                     <template #item="{ element: field }">
                       <div
                         v-if="field.title.toLowerCase().includes(searchQuery.toLowerCase())"
                         :key="field.id"
-                      class="p-2 flex flex-row items-center border-b-1 last:border-none first:rounded-t-lg border-gray-200"
+                        class="p-2 flex flex-row items-center border-b-1 last:border-none border-gray-200 hover:bg-gray-50"
                         :data-testid="`nc-form-field-item-${field.title}`"
                       >
                         <component :is="iconMap.drag" class="flex-none cursor-move !h-4 !w-4 text-gray-600 mr-1" />
                         <div
                           class="flex-1 flex items-center justify-between cursor-pointer"
-                        @click="showOrHideColumn(field, !field.show)"
+                          @click="showOrHideColumn(field, !field.show, true)"
                         >
                           <div class="flex-1 flex items-center">
                             <SmartsheetHeaderVirtualCellIcon v-if="field && isVirtualCol(field)" :column-meta="field" />
@@ -855,45 +889,63 @@ const onFormItemClick = (element: any) => {
                             </NcTooltip>
                           </div>
 
-                        <NcSwitch :checked="field.show" :disabled="field.required" />
+                          <NcSwitch :checked="!!field.show" :disabled="field.required" />
-                      </div>
-                    </div>
-                  </template>
-                  <template #header>
-                    <div
-                      key="nc-form-show-all-fields"
-                      class="w-full p-2 flex items-center border-b-1 rounded-t-lg border-gray-200 bg-gray-50 sticky top-0 z-100"
-                      data-testid="nc-form-show-all-fields"
-                      @click.stop
-                    >
-                      <div class="w-4 h-4 flex-none mr-2"></div>
-                      <div class="flex-1 flex flex-row items-center truncate cursor-pointer">
-                        <div class="flex-1 font-base">Select all fields</div>
-                        <NcSwitch
-                          :checked="visibleColumns.length === localColumns.length"
-                          @change="handleAddOrRemoveAllColumns"
-                        />
                         </div>
                       </div>
                     </template>
                     <template
-                    #footer
                       v-if="!localColumns?.filter((el) => el.title.toLowerCase().includes(searchQuery.toLowerCase())).length"
+                      #footer
                     >
                       <div class="px-0.5 py-2 text-gray-500 text-center">
                         {{ $t('title.noFieldsFound') }} for title `{{ searchQuery }}`
                       </div>
                     </template>
                   </Draggable>
+                </template>
               </div>
             </Pane>
             <Pane
               v-if="isEditable && !isLocked && formViewData"
               min-size="20"
-              size="35"
+              size="50"
-              class="nc-form-right-splitpane-item p-2 md:p-4 flex flex-col space-y-4 !overflow-y-auto nc-form-scrollbar"
+              class="nc-form-right-splitpane-item !overflow-y-auto nc-form-scrollbar"
             >
-              <!-- After form is submitted -->
+              <div class="p-4 flex flex-col space-y-4 border-b border-gray-200">
+                <!-- Appearance Settings -->
+                <div class="text-base font-bold text-gray-900">Appearance Settings</div>
+
+                <div>
+                  <div class="text-gray-800 mb-2">Form Theme</div>
+                  <div class="flex justify-start">
+                    <LazyGeneralColorPicker
+                      v-model="(formViewData.meta as Record<string,any>).theme_color"
+                      :colors="['#FFFFF', '#FFDBD9', '#FEE6D6', '#FFF0D1', '#D4F7E0', '#D7F2FF', '#FFCFE6', '#E5D4F5']"
+                      class="nc-form-theme-color-picker !p-0 !-ml-1"
+                      @input="(el:string)=>{
+                        (formViewData?.meta as Record<string,any>).theme_color = el
+                        updateView()
+                      }"
+                    />
+                  </div>
+                </div>
+
+                <div class="flex items-center">
+                  <!-- Hide NocoDB Branding -->
+                  <a-switch
+                    v-model:checked="(formViewData.meta as Record<string,any>).hide_branding"
+                    v-e="[`a:form-view:submit-another-form`]"
+                    size="small"
+                    class="nc-form-checkbox-submit-another-form"
+                    data-testid="nc-form-checkbox-submit-another-form"
+                    @change="updateView"
+                  />
+                  <span class="ml-4">Hide NocoDB Branding</span>
+                </div>
+              </div>
+
+              <div class="p-4 flex flex-col space-y-4">
+                <!-- Post Form Submission Settings -->
                 <div class="text-base font-bold text-gray-900">
                   Post Form Submission Settings
                   <!-- {{ $t('msg.info.afterFormSubmitted') }} -->
@@ -961,6 +1013,7 @@ const onFormItemClick = (element: any) => {
                     </span>
                   </div>
                 </div>
+              </div>
             </Pane>
           </Splitpanes>
         </a-col>
@@ -1031,10 +1084,10 @@ const onFormItemClick = (element: any) => {
 }
 
 :deep(.nc-form-right-splitpane .splitpanes__splitter) {
-  @apply !border-b-1 !border-gray-200;
+  @apply !border-t-1 !border-gray-200 relative;
 
-  ::after {
+  &::before {
-    content: 'e945';
+    @apply content-[':::'] block h-4 leading-12px px-2 font-bold text-gray-800 border-1 border-gray-200 rounded bg-white absolute -top-2.5 z-100 left-[calc(50%_-_16px)];
   }
 }
 .nc-form-fields-list {
@@ -1045,4 +1098,7 @@ const onFormItemClick = (element: any) => {
     @apply !scrollbar-thumb-gray-300;
   }
 }
+:deep(.nc-form-theme-color-picker .color-selector) {
+  @apply !text-white;
+}
 </style>