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

Better form themes (#465)

Browse Source 
* Working on custom radius + input size

* Fix date input clear vertical align

* Moslty finished implementing small size

* Polishing larger theme

* Finish large theme

* Added size/radius options in form editor

* Darken help text, improve switch input help location

* Slight form editor improvement

* Fix styling

* Polish of the form editor
This commit is contained in:
Julien Nahum
2024-06-27 17:52:49 +02:00
committed by GitHub
parent a84abf9f72
commit 2ca2d97e8e
46 changed files with 1058 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -193,13 +193,12 @@
<script>
import OpenForm from './OpenForm.vue'
import OpenFormButton from './OpenFormButton.vue'
import { themes } from '~/lib/forms/form-themes.js'
import VButton from '~/components/global/VButton.vue'
import FormCleanings from '../../pages/forms/show/FormCleanings.vue'
import VTransition from '~/components/global/transitions/VTransition.vue'
import {pendingSubmission} from "~/composables/forms/pendingSubmission.js"
import clonedeep from "clone-deep"
import { default as _has } from 'lodash/has'
import ThemeBuilder from "~/lib/forms/themes/ThemeBuilder.js"
export default {
components: { VTransition, VButton, OpenFormButton, OpenForm, FormCleanings },
@@ -227,7 +226,6 @@ export default {
return {
loading: false,
submitted: false,
themes: themes,
passwordForm: useForm({
password: null
}),
@@ -241,7 +239,10 @@ export default {
return import.meta.client && window.location.href.includes('popup=true')
},
theme () {
return this.themes[_has(this.themes, this.form.theme) ? this.form.theme : 'default']
return new ThemeBuilder(this.form.theme, {
size: this.form.size,
borderRadius: this.form.border_radius
}).getAllComponents()
},
isPublicFormPage () {
return this.$route.name === 'forms-slug'

6
client/components/open/forms/OpenFormButton.vue
View File

@@ -2,7 +2,7 @@
<button
:type="nativeType"
:disabled="loading ? true : null"
:class="`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']} ${theme.Button.body}`"
:class="[`py-${sizes['p-y']} px-${sizes['p-x']} text-${sizes['font']}`,theme.Button.body,theme.Button.borderRadius]"
:style="buttonStyle"
class="btn"
>
@@ -17,7 +17,7 @@
</template>
<script>
import { themes } from "~/lib/forms/form-themes.js"
import {themes} from "~/lib/forms/themes/form-themes.js"
export default {
name: "OpenFormButton",
@@ -43,7 +43,7 @@ export default {
default: false,
},
theme: { type: Object, default: () => themes.default },
theme: {type: Object, default: () => themes.default},
},
computed: {

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

@@ -91,14 +91,19 @@
allow you to preview your form changes.
</div>
<form-information />
<form-structure />
<form-customization />
<form-about-submission />
<form-access />
<form-security-privacy />
<form-custom-seo />
<form-custom-code />
<VForm
size="sm"
@submit.prevent=""
>
<form-information />
<form-structure />
<form-customization />
<form-about-submission />
<form-access />
<form-security-privacy />
<form-custom-seo />
<form-custom-code />
</VForm>
</div>
<form-editor-preview />

26
client/components/open/forms/components/FormSubmissions.vue
View File

@@ -55,9 +55,11 @@
<p class="flex-grow truncate">
{{ field.name }}
</p>
<v-switch
<ToggleSwitchInput
v-model="displayColumns[field.id]"
class="float-right"
wrapper-class="mb-0"
label=""
name="field.id"
@update:model-value="onChangeDisplayColumns"
/>
</div>
@@ -77,9 +79,11 @@
<p class="flex-grow truncate">
{{ field.name }}
</p>
<v-switch
<ToggleSwitchInput
v-model="displayColumns[field.id]"
class="float-right"
wrapper-class="mb-0"
label=""
name="field.id"
@update:model-value="onChangeDisplayColumns"
/>
</div>
@@ -98,12 +102,14 @@
class="flex flex-wrap items-end"
>
<div class="flex-grow">
<text-input
class="w-64"
:form="searchForm"
name="search"
placeholder="Search..."
/>
<VForm size="sm">
<text-input
class="w-64"
:form="searchForm"
name="search"
placeholder="Search..."
/>
</VForm>
</div>
<div class="font-semibold flex gap-4">
<p class="float-right text-xs uppercase mb-2">

12
client/components/open/forms/components/form-components/FormAboutSubmission.vue
View File

@@ -35,8 +35,10 @@
help="Gives user a unique url to update their submission"
>
<template #label>
Editable submissions
<pro-tag class="ml-1" />
<span class="text-sm">
Editable submissions
</span>
<pro-tag class="-mt-1 ml-1" />
</template>
</toggle-switch-input>
<text-input
@@ -138,7 +140,7 @@
help="Show a message, or redirect to a URL"
>
<template #selected="{ option, optionName }">
<div class="flex items-center truncate mr-6">
<div class="flex items-center text-sm truncate mr-6">
{{ optionName }}
<pro-tag
v-if="option === 'redirect'"
@@ -147,8 +149,8 @@
</div>
</template>
<template #option="{ option, selected }">
<span class="flex hover:text-white">
<p class="flex-grow hover:text-white">
<span class="flex">
<p class="flex-grow">
{{ option.name }}
<template v-if="option.value === 'redirect'"><pro-tag /></template>
</p>

43
client/components/open/forms/components/form-components/FormCustomization.vue
View File

@@ -53,9 +53,34 @@
label="Form Theme"
/>
<div class="flex space-x-4 justify-stretch">
<select-input
name="size"
class="flex-grow"
:options="[
{ name: 'Small', value: 'sm' },
{ name: 'Medium', value: 'md' },
{ name: 'Large', value: 'lg' },
]"
:form="form"
label="Input Size"
/>
<select-input
name="border_radius"
class="flex-grow"
:options="[
{ name: 'None', value: 'none' },
{ name: 'Small', value: 'small' },
{ name: 'Full', value: 'full' },
]"
:form="form"
label="Input Roundness"
/>
</div>
<select-input
name="dark_mode"
class="mt-4"
help="To see changes, save your form and open it"
:options="[
{ name: 'Auto - use Device System Preferences', value: 'auto' },
@@ -68,7 +93,6 @@
<select-input
name="width"
class="mt-4"
:options="[
{ name: 'Centered', value: 'centered' },
{ name: 'Full Width', value: 'full' },
@@ -80,7 +104,6 @@
<image-input
name="cover_picture"
class="mt-4"
:form="form"
label="Cover Picture"
help="Not visible when form is embedded"
@@ -89,7 +112,6 @@
<image-input
name="logo_picture"
class="mt-4"
:form="form"
label="Logo"
help="Not visible when form is embedded"
@@ -98,49 +120,44 @@
<color-input
name="color"
class="mt-4"
:form="form"
label="Color (for buttons & inputs border)"
/>
<toggle-switch-input
name="hide_title"
:form="form"
class="mt-4"
label="Hide Title"
/>
<toggle-switch-input
name="no_branding"
:form="form"
class="mt-4"
>
<template #label>
Remove OpnForm Branding
<pro-tag class="ml-1" />
<span class="text-sm">
Remove OpnForm Branding
</span>
<pro-tag class="-mt-1" />
</template>
</toggle-switch-input>
<toggle-switch-input
name="show_progress_bar"
:form="form"
class="mt-4"
label="Show progress bar"
/>
<toggle-switch-input
name="uppercase_labels"
:form="form"
class="mt-4"
label="Uppercase Input Labels"
/>
<toggle-switch-input
name="transparent_background"
:form="form"
class="mt-4"
label="Transparent Background"
help="Only applies when form is embedded"
/>
<toggle-switch-input
name="confetti_on_submission"
:form="form"
class="mt-4"
label="Confetti on successful submisison"
@update:model-value="onChangeConfettiOnSubmission"
/>

27
client/components/open/forms/components/form-components/FormEditorSidebar.vue
View File

@@ -2,17 +2,22 @@
<editor-right-sidebar
:show="form && (showEditFieldSidebar || showAddFieldSidebar)"
>
<transition mode="out-in">
<form-field-edit
v-if="showEditFieldSidebar"
:key="editFieldIndex"
v-motion-fade="'fade'"
/>
<add-form-block
v-else-if="showAddFieldSidebar"
v-motion-fade="'fade'"
/>
</transition>
<VForm
size="sm"
@submit.prevent=""
>
<transition mode="out-in">
<form-field-edit
v-if="showEditFieldSidebar"
:key="editFieldIndex"
v-motion-fade="'fade'"
/>
<add-form-block
v-else-if="showAddFieldSidebar"
v-motion-fade="'fade'"
/>
</transition>
</VForm>
</editor-right-sidebar>
</template>

15
client/components/open/forms/components/form-components/FormInformation.vue
View File

@@ -36,7 +36,6 @@
name="tags"
label="Tags"
:form="form"
class="mt-4"
help="To organize your forms (hidden to respondents)"
placeholder="Select Tag(s)"
:multiple="true"
@@ -47,7 +46,6 @@
name="visibility"
label="Visibility"
:form="form"
class="mt-4"
help="Only public form will be accessible"
placeholder="Select Visibility"
:required="true"
@@ -56,7 +54,7 @@
<v-button
v-if="copyFormOptions.length > 0"
color="light-gray"
class="w-full mt-4"
class="w-full"
@click="showCopyFormSettingsModal = true"
>
<svg
@@ -98,20 +96,13 @@
</svg>
</template>
<template #title>
Copy Settings from another form
Import Settings from another form
</template>
<div class="p-4 min-h-[450px]">
<p class="text-gray-600">
If you already have another form that you like to use as a base for
this form, you can do that here. Select another form, confirm, and we
will copy all of the other form settings (except the form structure)
to this form.
</p>
<div>
<select-input
v-model="copyFormId"
name="copy_form_id"
label="Copy Settings From"
class="mt-3 mb-6"
placeholder="Choose a form"
:searchable="copyFormOptions.length > 5"
:options="copyFormOptions"