matt/opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Form Editor v2.5 (#599)

Browse Source 
* Form Editor v2.5

* Remove log debug

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
2024-10-23 14:04:51 +05:30
committed by GitHub
parent 97c4b9db5b
commit 8a1282f4b0
23 changed files with 169 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/components/open/forms/OpenCompleteForm.vue
View File

@@ -10,12 +10,19 @@
:href="getFontUrl"
>
<h1
v-if="!isHideTitle"
class="mb-4 px-2"
:class="{'mt-4':isEmbedPopup}"
v-text="form.title"
/>
<template v-if="!isHideTitle">
<EditableTag
v-if="adminPreview"
v-model="form.title"
element="h1"
class="mb-2"
/>
<h1
v-else
class="mb-2 px-2"
v-text="form.title"
/>
</template>
<div v-if="isPublicFormPage && form.is_password_protected">
<p class="form-description mb-4 text-gray-700 dark:text-gray-300 px-2">

2
client/components/open/forms/OpenForm.vue
View File

@@ -88,7 +88,7 @@
/>
<has-error
:form="dataForm"
field="h-captcha-response"
field-id="h-captcha-response"
/>
</div>
</template>

9
client/components/open/forms/OpenFormField.vue
View File

@@ -19,7 +19,7 @@
>
<div
v-if="adminPreview"
class="absolute translate-y-full lg:translate-y-0 -bottom-1.5 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
class="absolute translate-y-full lg:translate-y-0 -bottom-1 left-1/2 -translate-x-1/2 lg:-translate-x-full lg:-left-1 lg:top-1 lg:bottom-0 hidden group-hover/nffield:block"
>
<div
class="flex lg:flex-col bg-gray-100 dark:bg-gray-800 border rounded-md"
@@ -68,7 +68,7 @@
v-if="field.type === 'nf-text' && field.content"
:id="field.id"
:key="field.id"
class="nf-text w-full mb-3"
class="nf-text w-full my-1.5"
:class="[getFieldAlignClasses(field)]"
v-html="field.content"
/>
@@ -76,7 +76,7 @@
v-if="field.type === 'nf-code' && field.content"
:id="field.id"
:key="field.id"
class="nf-code w-full px-2 mb-3"
class="nf-code w-full px-2 my-1.5"
v-html="field.content"
/>
<div
@@ -91,6 +91,7 @@
:key="field.id"
class="my-4 w-full px-2"
:class="[getFieldAlignClasses(field)]"
@dblclick="editFieldOptions"
>
<div
v-if="!field.image_block"
@@ -115,7 +116,7 @@
class="hidden group-hover/nffield:flex translate-x-full absolute right-0 top-0 h-full w-5 flex-col justify-center pl-1 pt-3"
>
<div
class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle"
class="flex items-center bg-gray-100 dark:bg-gray-800 border rounded-md h-12 text-gray-500 dark:text-gray-400 dark:border-gray-500 cursor-grab handle min-h-[40px]"
>
<Icon
name="clarity:drag-handle-line"

12
client/components/open/forms/components/FormEditor.vue
View File

@@ -4,6 +4,13 @@
id="form-editor"
class="relative flex w-full flex-col grow max-h-screen"
>
<!-- Loading overlay -->
<div
v-if="updateFormLoading"
class="absolute inset-0 bg-white bg-opacity-70 z-50 flex items-center justify-center"
>
<loader class="h-6 w-6 text-blue-500" />
</div>
<div
class="border-b bg-white md:hidden fixed inset-0 w-full z-50 flex flex-col items-center justify-center"
>
@@ -175,6 +182,7 @@ export default {
mounted() {
this.$emit("mounted")
this.workingFormStore.activeTab = 0
useAmplitude().logEvent('form_editor_viewed')
this.appStore.hideNavbar()
if (!this.isEdit) {
@@ -292,6 +300,8 @@ export default {
slug: this.createdFormSlug,
new_form: response.users_first_form,
},
}).then(() => {
this.updateFormLoading = false
})
})
.catch((error) => {
@@ -304,8 +314,6 @@ export default {
)
captureException(error)
}
})
.finally(() => {
this.updateFormLoading = false
})
},

55
client/components/open/forms/components/FormEditorNavbar.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="w-full border-b p-2 flex gap-x-3 items-center bg-white">
<div class="w-full border-b p-2 flex gap-x-2 items-center bg-white">
<a
v-if="backButton"
href="#"
@@ -13,38 +13,39 @@
</a>
<EditableTag
v-model="form.title"
element="h3"
class="font-medium py-1 text-md w-48 text-gray-500 truncate"
<UTabs
id="form-editor-navbar-tabs"
v-model="activeTab"
:items="[
{ label: 'Build' },
{ label: 'Design'},
{ label: 'Settings'}
]"
/>
<UBadge
v-if="form.visibility == 'draft'"
color="yellow"
variant="soft"
label="Draft"
/>
<UBadge
v-else-if="form.visibility == 'closed'"
color="gray"
variant="soft"
label="Closed"
/>
<UndoRedo />
<div class="flex-grow flex justify-center">
<UTabs
v-model="activeTab"
:items="[
{ label: 'Build' },
{ label: 'Design'},
{ label: 'Settings'}
]"
<EditableTag
id="form-editor-title"
v-model="form.title"
element="h3"
class="font-medium py-1 text-md w-48 text-gray-500 truncate form-editor-title"
/>
<UBadge
v-if="form.visibility == 'draft'"
color="yellow"
variant="soft"
label="Draft"
/>
<UBadge
v-else-if="form.visibility == 'closed'"
color="gray"
variant="soft"
label="Closed"
/>
</div>
<UndoRedo />
<div
class="flex items-stretch gap-x-2"
>

2
client/components/open/forms/components/FormFieldsEditor.vue
View File

@@ -52,7 +52,7 @@
<UTooltip :text="element.hidden ? 'Show Block' : 'Hide Block'">
<button
class="hidden cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
class="hidden !cursor-pointer rounded p-1 transition-colors hover:bg-nt-blue-lighter items-center justify-center"
:class="{
'text-gray-300 hover:text-blue-500 md:group-hover:flex': !element.hidden,
'text-gray-300 hover:text-gray-500 md:flex': element.hidden,

4
client/components/open/forms/components/form-components/AddFormBlock.vue
View File

@@ -18,7 +18,7 @@
</div>
<div class="py-2 px-4">
<p class="text-sm font-medium my-2">
<p class="text-gray-500 text-xs font-medium my-2">
Input Blocks
</p>
<draggable
@@ -34,7 +34,7 @@
>
<template #item="{element}">
<div
class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2"
class="flex hover:bg-gray-50 rounded-md items-center gap-2 p-2 group"
role="button"
@click.prevent="addBlock(element.name)"
>

2
client/components/open/forms/components/form-components/FormEditorPreview.vue
View File

@@ -22,7 +22,7 @@
<div class="bg-red-500 rounded-full w-2.5 h-2.5" />
<div class="bg-yellow-500 rounded-full w-2.5 h-2.5" />
<div class="bg-green-500 rounded-full w-2.5 h-2.5" />
<p class="text-sm text-gray-500/70 text-sm ml-4">
<p class="text-sm text-gray-500/70 text-sm ml-4 select-none">
Form Preview
</p>
<div class="flex-grow" />

2
client/components/open/forms/components/templates/QuestionsEditor.vue
View File

@@ -99,7 +99,7 @@
<has-error
v-if="hasValidation"
:form="form"
:field="name"
:field-id="name"
/>
</div>
</template>

4
client/components/open/forms/fields/components/BlockOptions.vue
View File

@@ -53,7 +53,7 @@
<div
v-if="field.type == 'nf-text'"
class="border-t py-2"
class="border-t mt-4"
>
<rich-text-area-input
class="mx-4"
@@ -85,7 +85,7 @@
<div
v-else-if="field.type == 'nf-image'"
class="border-t py-2"
class="border-t mt-4"
>
<image-input
name="image_block"

2
client/components/open/forms/fields/components/HiddenRequiredDisabled.vue
View File

@@ -7,7 +7,7 @@
:class="[
option.class ? (typeof option.class === 'function' ? option.class(isSelected(option.name)) : option.class) : {},
{
'border-blue-500': isSelected(option.name),
'border-blue-500 bg-blue-50': isSelected(option.name),
'hover:bg-gray-100 border-gray-300': !isSelected(option.name)
}
]"