github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

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

pull/7717/head
Ramesh Mane 10 months ago
parent
7bb44133ac
commit
d457472417
3 changed files with 89 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 14
      packages/nc-gui/components/general/FormBanner.vue
  2. 110
      packages/nc-gui/components/smartsheet/Form.vue
  3. 5
      packages/nc-gui/lang/en.json

14
packages/nc-gui/components/general/FormBanner.vue
Unescape View File

@ -9,7 +9,8 @@ const { getPossibleAttachmentSrc } = useAttachment()
<template> <template>
<div <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 <LazyCellAttachmentImage
v-if="bannerImageUrl" v-if="bannerImageUrl"
@ -17,7 +18,7 @@ const { getPossibleAttachmentSrc } = useAttachment()
class="nc-form-banner-image object-cover w-full" 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 --> <!-- 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"> <div class="flex">
<img src="~assets/img/form-banner-left.png" alt="form-banner-left'" /> <img src="~assets/img/form-banner-left.png" alt="form-banner-left'" />
</div> </div>
@ -31,12 +32,3 @@ const { getPossibleAttachmentSrc } = useAttachment()
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped>
.nc-form-banner-wrapper {
aspect-ratio: 468/60;
@media (max-width: 768px) {
aspect-ratio: 4/1;
}
}
</style>

110
packages/nc-gui/components/smartsheet/Form.vue
Unescape View File

@ -365,6 +365,8 @@ function setFormData() {
systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id) systemFieldsIds.value = getSystemColumns(col).map((c) => c.fk_column_id)
formViewData.value = { formViewData.value = {
banner_image_url: '',
logo_url: '',
...formViewData.value, ...formViewData.value,
submit_another_form: !!(formViewData.value?.submit_another_form ?? 0), submit_another_form: !!(formViewData.value?.submit_another_form ?? 0),
show_blank_form: !!(formViewData.value?.show_blank_form ?? 0), show_blank_form: !!(formViewData.value?.show_blank_form ?? 0),
@ -670,9 +672,8 @@ useEventListener(
:upload-config="imageCropperData.uploadConfig" :upload-config="imageCropperData.uploadConfig"
@submit="handleOnUploadImage" @submit="handleOnUploadImage"
></GeneralImageCropper> ></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 <GeneralFormBanner
v-if=" v-if="
formViewData.banner_image_url || formViewData.banner_image_url ||
@ -681,18 +682,44 @@ useEventListener(
:banner-image-url="formViewData.banner_image_url" :banner-image-url="formViewData.banner_image_url"
/> />
<div class="absolute bottom-0 right-0"> <div class="absolute bottom-0 right-0">
<NcButton <div class="flex items-center space-x-1 m-2">
type="secondary" <NcButton
size="small" type="secondary"
class="nc-form-upload-banner-btn m-3" size="small"
data-testid="nc-form-upload-banner-btn" class="nc-form-upload-banner-btn"
@click="openUploadImage(true)" 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" /> <div class="flex gap-2 items-center">
<span> Upload Banner </span> <component :is="iconMap.upload" class="w-4 h-4" />
</div> <span>
</NcButton> {{ 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>
</div> </div>
<a-card <a-card
@ -709,26 +736,53 @@ useEventListener(
<div class="mb-4"> <div class="mb-4">
<div <div
class="nc-form-logo-wrapper mx-6 group relative inline-block rounded-xl bg-gray-100 h-56px w-156px overflow-hidden" 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 <LazyCellAttachmentImage
v-if="formViewData.logo_url" v-if="formViewData.logo_url"
:srcs="getPossibleAttachmentSrc(parseProp(formViewData.logo_url))" :srcs="getPossibleAttachmentSrc(parseProp(formViewData.logo_url))"
class="nc-form-logo group object-contain w-full m-auto" class="nc-form-logo group object-contain w-full m-auto"
/> />
<NcButton <div
v-if="isEditable" class="items-center space-x-1 flex-nowrap m-3"
type="secondary" :class="formViewData.logo_url ? 'hidden absolute top-0 left-0 group-hover:flex' : 'flex'"
size="small"
class="nc-form-upload-logo-btn m-3"
: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"> <NcButton
<component :is="iconMap.upload" class="w-4 h-4" /> v-if="isEditable"
<span> Upload Logo </span> type="secondary"
</div> size="small"
</NcButton> class="nc-form-upload-logo-btn"
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> {{ 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>
</div> </div>
<!-- form title --> <!-- form title -->

5
packages/nc-gui/lang/en.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save