fix(nc-gui): add form banner & logo delete option

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

@@ -9,7 +9,8 @@ const { getPossibleAttachmentSrc } = useAttachment()
 
 <template>
   <div
-    class="nc-form-banner-wrapper w-full max-w-screen-xl mx-auto bg-white border-1 border-gray-200 rounded-3xl overflow-hidden"
+    class="nc-form-banner-wrapper w-full max-w-[688px] mx-auto bg-white border-1 border-gray-200 rounded-2xl overflow-hidden"
+    :style="{ aspectRatio: 4 / 1 }"
   >
     <LazyCellAttachmentImage
       v-if="bannerImageUrl"
@@ -17,7 +18,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
       class="nc-form-banner-image object-cover w-full"
     />
     <!-- Todo: aspect ratio and cover image uploader and image cropper to crop image in fixed aspect ratio  -->
-    <div v-if="!bannerImageUrl" class="h-full flex items-stretch justify-between">
+    <div v-else class="h-full flex items-stretch justify-between">
       <div class="flex">
         <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
       </div>
@@ -31,12 +32,3 @@ const { getPossibleAttachmentSrc } = useAttachment()
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.nc-form-banner-wrapper {
-  aspect-ratio: 468/60;
-  @media (max-width: 768px) {
-    aspect-ratio: 4/1;
-  }
-}
-</style>

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

@@ -365,6 +365,8 @@ function setFormData() {
   systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
 
   formViewData.value = {
+    banner_image_url: '',
+    logo_url: '',
     ...formViewData.value,
     submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
     show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
@@ -670,9 +672,8 @@ useEventListener(
               :upload-config="imageCropperData.uploadConfig"
               @submit="handleOnUploadImage"
             ></GeneralImageCropper>
-            <!-- for future implementation of cover image -->
+            <!-- cover image -->
-            <!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio  -->
+            <div class="relative max-w-[688px] mx-auto">
-            <div class="relative max-w-screen-xl mx-auto">
               <GeneralFormBanner
                 v-if="
                   formViewData.banner_image_url ||
@@ -681,18 +682,44 @@ useEventListener(
                 :banner-image-url="formViewData.banner_image_url"
               />
               <div class="absolute bottom-0 right-0">
+                <div class="flex items-center space-x-1 m-2">
                   <NcButton
                     type="secondary"
                     size="small"
-                  class="nc-form-upload-banner-btn m-3"
+                    class="nc-form-upload-banner-btn"
                     data-testid="nc-form-upload-banner-btn"
                     @click="openUploadImage(true)"
                   >
                     <div class="flex gap-2 items-center">
                       <component :is="iconMap.upload" class="w-4 h-4" />
-                    <span> Upload Banner </span>
+                      <span>
+                        {{ formViewData.banner_image_url ? $t('general.replace') : $t('general.upload') }}
+                        {{ $t('general.banner') }}
+                      </span>
                     </div>
                   </NcButton>
+                  <NcTooltip v-if="formViewData.banner_image_url">
+                    <template #title> {{ $t('general.delete') }} {{ $t('general.banner') }} </template>
+                    <NcButton
+                      type="secondary"
+                      size="small"
+                      class="nc-form-delete-banner-btn"
+                      data-testid="nc-form-delete-banner-btn"
+                      @click="
+                              () => {
+                                if (isEditable) {
+                                  formViewData!.banner_image_url = ''
+                                  updateView()
+                                }
+                              }
+                            "
+                    >
+                      <div class="flex gap-2 items-center">
+                        <component :is="iconMap.delete" class="w-4 h-4" />
+                      </div>
+                    </NcButton>
+                  </NcTooltip>
+                </div>
               </div>
             </div>
             <a-card
@@ -709,26 +736,53 @@ useEventListener(
                   <div class="mb-4">
                     <div
                       class="nc-form-logo-wrapper mx-6 group relative inline-block rounded-xl bg-gray-100 h-56px w-156px overflow-hidden"
+                      :class="formViewData.logo_url ? 'hover:w-189px' : ''"
+                      style="transition: width 0.1s ease-in-out"
                     >
                       <LazyCellAttachmentImage
                         v-if="formViewData.logo_url"
                         :srcs="getPossibleAttachmentSrc(parseProp(formViewData.logo_url))"
                         class="nc-form-logo group object-contain w-full m-auto"
                       />
+                      <div
+                        class="items-center space-x-1 flex-nowrap m-3"
+                        :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
+                      >
                         <NcButton
                           v-if="isEditable"
                           type="secondary"
                           size="small"
-                        class="nc-form-upload-logo-btn m-3"
+                          class="nc-form-upload-logo-btn"
-                        :class="formViewData.logo_url ? 'hidden group-hover:(block absolute top-0 left-0)' : 'block'"
                           data-testid="nc-form-upload-log-btn"
                           @click="openUploadImage(false)"
                         >
                           <div class="flex gap-2 items-center">
                             <component :is="iconMap.upload" class="w-4 h-4" />
-                          <span> Upload Logo </span>
+                            <span> {{ formViewData.logo_url ? $t('general.replace') : $t('general.upload') }} Logo</span>
+                          </div>
+                        </NcButton>
+                        <NcTooltip v-if="formViewData.logo_url">
+                          <template #title> {{ $t('general.delete') }} {{ $t('general.logo') }} </template>
+                          <NcButton
+                            type="secondary"
+                            size="small"
+                            class="nc-form-delete-logo-btn"
+                            data-testid="nc-form-delete-logo-btn"
+                            @click="
+                              () => {
+                                if (isEditable) {
+                                  formViewData!.logo_url = ''
+                                  updateView()
+                                }
+                              }
+                            "
+                          >
+                            <div class="flex gap-2 items-center">
+                              <component :is="iconMap.delete" class="w-4 h-4" />
                             </div>
                           </NcButton>
+                        </NcTooltip>
+                      </div>
                     </div>
                   </div>
                   <!-- form title -->

packages/nc-gui/lang/en.json

@@ -192,7 +192,10 @@
     "enter": "Enter",
     "seconds": "Seconds",
     "paste": "Paste",
-    "restore": "Restore"
+    "restore": "Restore",
+    "replace": "Replace",
+    "banner": "Banner",
+    "logo": "Logo"
   },
   "objects": {
     "day": "Day",