fic(nc-gui): shared form ui

packages/nc-gui/assets/img/brand/nocodb-logo.svg

@@ -0,0 +1,20 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M6 10.8676L8.75329 13.6226V17.9842H6V10.8676ZM17.5645 5.01046V17.535C17.5645 17.7921 17.3548 18 17.0977 18C16.9744 18 16.8563 17.9525 16.7683 17.8644L6 8.15303V5.40504C6 5.14785 6.20787 4.94 6.46505 4.94H6.48972C6.61303 4.94 6.7328 4.98933 6.81911 5.07564L14.8094 12.009V5.01046H17.5645Z"
+        fill="url(#paint0_linear_231_10218)" />
+    <path fill-rule="evenodd" clip-rule="evenodd"
+        d="M3 0C1.34315 0 0 1.34315 0 3V21C0 22.6569 1.34315 24 3 24H21C22.6569 24 24 22.6569 24 21V3C24 1.34315 22.6569 0 21 0H3ZM3.63333 2.13333C2.8049 2.13333 2.13333 2.8049 2.13333 3.63333V20.3667C2.13333 21.1951 2.8049 21.8667 3.63333 21.8667H20.3667C21.1951 21.8667 21.8667 21.1951 21.8667 20.3667V3.63333C21.8667 2.8049 21.1951 2.13333 20.3667 2.13333H3.63333Z"
+        fill="url(#paint1_linear_231_10218)" />
+    <defs>
+        <linearGradient id="paint0_linear_231_10218" x1="11.7814" y1="0.543214" x2="11.7814" y2="21.6612"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4351E8" />
+            <stop offset="1" stop-color="#2A1EA5" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_231_10218" x1="4.82267" y1="19.1431" x2="26.7035" y2="-2.6331"
+            gradientUnits="userSpaceOnUse">
+            <stop stop-color="#4351E8" />
+            <stop offset="1" stop-color="#2A1EA5" />
+        </linearGradient>
+    </defs>
+</svg>

packages/nc-gui/components/general/ColorPicker.vue

@@ -62,7 +62,7 @@ watch(picked, (n, _o) => {
         <GeneralTooltip>
           <template #title>{{ $t('activity.moreColors') }}</template>
           <div class="flex items-center justify-center">
-            <GeneralIcon :icon="isPickerOn ? 'minus' : 'plus'" class="w-4 h-4"/>
+            <GeneralIcon :icon="isPickerOn ? 'minus' : 'plus'" class="w-4 h-4" />
           </div>
         </GeneralTooltip>
       </button>

packages/nc-gui/components/general/FormBanner.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+interface Props {
+  bannerImageUrl?: string
+}
+const { bannerImageUrl } = defineProps<Props>()
+</script>
+
+<template>
+  <div class="w-full aspect-{4/1} bg-white border-1 border-gray-200 rounded-3xl overflow-hidden">
+    <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+    <LazyNuxtImg v-if="bannerImageUrl" class="h-full" :src="bannerImageUrl" alt="form-banner'" placeholder quality="75" />
+    <div v-else class="h-full flex items-stretch justify-between">
+      <div>
+        <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
+      </div>
+
+      <div class="w-[91px] grid place-items-center">
+        <img class="w-full" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
+      </div>
+      <div>
+        <img src="~assets/img/form-banner-right.png" alt="form-banner-left'" />
+      </div>
+    </div>
+  </div>
+</template>

packages/nc-gui/components/general/FormBranding.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import { openLink } from '#imports'
+</script>
+
+<template>
+  <div
+    class="flex items-center gap-3 cursor-pointer text-gray-700 dark:text-slate-300"
+    @click="openLink('https://github.com/nocodb/nocodb')"
+  >
+    <img src="~assets/img/brand/nocodb-logo.svg" alt="NocoDB" class="flex-none w-6 h-6" />
+    <div class="text-sm">NocoDB Forms</div>
+  </div>
+</template>

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

@@ -15,6 +15,7 @@ import {
   extractSdkResponseErrorMsg,
   iconMap,
   inject,
+  isEeUI,
   message,
   onClickOutside,
   parseProp,
@@ -58,8 +59,6 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useRoles()
 
-const { appInfo } = useGlobal()
-
 let formState = reactive({})
 
 const secondsRemain = ref(0)
@@ -387,18 +386,6 @@ watch(submitted, (v) => {
   }
 })
 
-function handleMouseUp(col: Record<string, any>, hiddenColIndex: number) {
-  if (isLocked.value) return
-
-  if (!moved.value) {
-    const index = localColumns.value.length
-    col.order = (index ? localColumns.value[index - 1].order : 0) + 1
-    col.show = true
-
-    saveOrUpdate(col, index)
-  }
-}
-
 const columnSupportsScanning = (elementType: UITypes) =>
   betaFeatureToggleState.show &&
   [UITypes.SingleLineText, UITypes.Number, UITypes.Email, UITypes.URL, UITypes.LongText].includes(elementType)
@@ -471,30 +458,12 @@ const onFormItemClick = (element: any) => {
           :style="{background:(formViewData?.meta as Record<string,any>).theme_color}"
         >
           <div :class="isEditable ? 'min-w-[616px] overflow-x-auto nc-form-scrollbar' : ''">
-            <div class="h-[160px] bg-white border-gray-200 rounded-3xl overflow-hidden">
+            <!-- for future implementation of cover image -->
-              <!-- for future implementation of cover image -->
+            <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
-              <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+            <GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
-              <LazyNuxtImg
-                v-if="formViewData.banner_image_url"
-                class="h-full"
-                :src="formViewData.banner_image_url"
-                alt="form-banner'"
-                placeholder
-                quality="75"
-              />
-              <div v-else class="h-full flex items-stretch justify-between">
-                <img class="" src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
-
-                <div class="w-[91px] grid place-items-center">
-                  <img class="w-full" src="~assets/img/icons/256x256.png" alt="form-banner-logo'" />
-                </div>
-
-                <img class="" src="~assets/img/form-banner-right.png" alt="form-banner-left'" />
-              </div>
-            </div>
 
             <a-card
-              class="!py-8 !lg:py-12 border-gray-200 !rounded-3xl !mt-6 max-w-[688px] !mx-auto"
+              class="!py-8 !lg:py-12 !border-gray-200 !rounded-3xl !mt-6 max-w-[688px] !mx-auto"
               :body-style="{
                 margin: '0 auto',
                 padding: '0px !important',
@@ -826,10 +795,8 @@ const onFormItemClick = (element: any) => {
               <div v-if="!parseProp(formViewData?.meta).hide_branding" class="px-8 lg:px-12">
                 <a-divider v-if="!isLocked" class="!my-8" />
                 <!-- Nocodb Branding  -->
-                <div class="flex items-center gap-3">
+                <div class="inline-block">
-                  <!-- Todo: add new NocoDB icon -->
+                  <GeneralFormBranding />
-                  <img src="~assets/img/icons/64x64.png" alt="NocoDB" class="w-6" />
-                  <div class="text-sm text-gray-700">NocoDB Forms</div>
                 </div>
               </div>
             </a-card>
@@ -992,13 +959,20 @@ const onFormItemClick = (element: any) => {
                 <div class="flex items-center">
                   <!-- Hide NocoDB Branding -->
                   <a-switch
-                    v-model:checked="(formViewData.meta as Record<string,any>).hide_branding"
+                    v-if="isEeUI"
                     v-e="[`a:form-view:submit-another-form`]"
+                    :checked="parseProp(formViewData.meta)?.hide_branding"
                     size="small"
-                    class="nc-form-checkbox-submit-another-form"
+                    class="nc-form-hide-branding"
-                    data-testid="nc-form-checkbox-submit-another-form"
+                    data-testid="nc-form-hide-branding"
-                    @change="updateView"
+                    @change="
+                      (value) => {
+                        (formViewData!.meta as Record<string,any>).hide_branding = value
+                        updateView()
+                      }
+                    "
                   />
+                  <a-switch v-else :checked="false" size="small" :disabled="true" />
                   <span class="ml-4">Hide NocoDB Branding</span>
                 </div>
               </div>