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

fic(nc-gui): shared form ui

pull/7664/head
Ramesh Mane 9 months ago
parent
500243fd34
commit
9fb1d3cb74
5 changed files with 77 additions and 45 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      packages/nc-gui/assets/img/brand/nocodb-logo.svg
  2. 2
      packages/nc-gui/components/general/ColorPicker.vue
  3. 25
      packages/nc-gui/components/general/FormBanner.vue
  4. 13
      packages/nc-gui/components/general/FormBranding.vue
  5. 62
      packages/nc-gui/components/smartsheet/Form.vue

20
packages/nc-gui/assets/img/brand/nocodb-logo.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
packages/nc-gui/components/general/ColorPicker.vue
Unescape View File

@ -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>

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

@ -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>

13
packages/nc-gui/components/general/FormBranding.vue
Unescape View File

@ -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>

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

@ -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 -->
<!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio -->
<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>
<!-- for future implementation of cover image -->
<!-- Todo: cover image uploader and image cropper to crop image in fixed aspect ratio -->
<GeneralFormBanner :banner-image-url="formViewData.banner_image_url" />
<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">
<!-- 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 class="inline-block">
<GeneralFormBranding />
</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"
data-testid="nc-form-checkbox-submit-another-form"
@change="updateView"
class="nc-form-hide-branding"
data-testid="nc-form-hide-branding"
@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>

Write Preview
Loading…
Cancel
Save