adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix builder bg color

Browse Source
pull/267/head
Pete Matsyburka 2 years ago
parent 2d76198290
commit d9318c04f8
5 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File

24
app/javascript/template_builder/field.vue
Unescape View File

@ -16,6 +16,8 @@
v-model="field.type" v-model="field.type"
:editable="editable && !defaultField" :editable="editable && !defaultField"
:button-width="20" :button-width="20"
:menu-classes="'mt-1.5'"
:menu-style="{ backgroundColor: dropdownBgColor }"
@update:model-value="[maybeUpdateOptions(), save()]" @update:model-value="[maybeUpdateOptions(), save()]"
@click="scrollToFirstArea" @click="scrollToFirstArea"
/> />
@ -110,7 +112,8 @@
<ul <ul
v-if="renderDropdown" v-if="renderDropdown"
tabindex="0" tabindex="0"
class="mt-1.5 dropdown-content menu menu-xs p-2 shadow bg-base-100 rounded-box w-52 z-10" class="mt-1.5 dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10"
:style="{ backgroundColor: dropdownBgColor }"
draggable="true" draggable="true"
@dragstart.prevent.stop @dragstart.prevent.stop
@click="closeDropdown" @click="closeDropdown"
@ -121,7 +124,7 @@
@click.stop @click.stop
> >
<select <select
class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal" class="select select-bordered select-xs w-full max-w-xs h-7 !outline-0 font-normal bg-transparent"
@change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]" @change="[field.preferences ||= {}, field.preferences.align = $event.target.value, save()]"
> >
<option <option
@ -134,7 +137,7 @@
</option> </option>
</select> </select>
<label <label
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4" class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px" style="font-size: 8px"
> >
@ -151,12 +154,12 @@
:placeholder="t('default_value')" :placeholder="t('default_value')"
dir="auto" dir="auto"
:type="field.type" :type="field.type"
class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0" class="input input-bordered input-xs w-full max-w-xs h-7 !outline-0 bg-transparent"
@blur="save" @blur="save"
> >
<label <label
v-if="field.default_value" v-if="field.default_value"
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4" class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px" style="font-size: 8px"
> >
@ -171,7 +174,7 @@
<select <select
v-model="field.preferences.format" v-model="field.preferences.format"
:placeholder="t('format')" :placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
@change="save" @change="save"
> >
<option <option
@ -183,7 +186,7 @@
</option> </option>
</select> </select>
<label <label
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4" class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px" style="font-size: 8px"
> >
@ -197,7 +200,7 @@
> >
<select <select
:placeholder="t('format')" :placeholder="t('format')"
class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0" class="select select-bordered select-xs font-normal w-full max-w-xs !h-7 !outline-0 bg-transparent"
@change="[field.preferences.format = $event.target.value, save()]" @change="[field.preferences.format = $event.target.value, save()]"
> >
<option <option
@ -220,7 +223,7 @@
</option> </option>
</select> </select>
<label <label
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4" class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px" style="font-size: 8px"
> >
@ -569,6 +572,9 @@ export default {
}, },
computed: { computed: {
fieldNames: FieldType.computed.fieldNames, fieldNames: FieldType.computed.fieldNames,
dropdownBgColor () {
return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
},
schemaAttachmentsIndexes () { schemaAttachmentsIndexes () {
return (this.template.schema || []).reduce((acc, item, index) => { return (this.template.schema || []).reduce((acc, item, index) => {
acc[item.attachment_uuid] = index acc[item.attachment_uuid] = index

9
app/javascript/template_builder/field_submitter.vue
Unescape View File

@ -37,6 +37,7 @@
tabindex="0" tabindex="0"
class="rounded-md min-w-max mb-2" class="rounded-md min-w-max mb-2"
:class="menuClasses" :class="menuClasses"
:style="menuStyle"
@click="closeDropdown" @click="closeDropdown"
> >
<li <li
@ -136,6 +137,7 @@
v-if="(editable || !compact) && renderDropdown" v-if="(editable || !compact) && renderDropdown"
tabindex="0" tabindex="0"
:class="menuClasses" :class="menuClasses"
:style="menuStyle"
@click="closeDropdown" @click="closeDropdown"
> >
<li <li
@ -253,10 +255,15 @@ export default {
type: String, type: String,
required: true required: true
}, },
menuStyle: {
type: Object,
required: false,
default: () => ({})
},
menuClasses: { menuClasses: {
type: String, type: String,
required: false, required: false,
default: 'dropdown-content menu p-2 shadow bg-base-100 rounded-box w-full z-10' default: 'dropdown-content menu p-2 shadow rounded-box w-full z-10'
} }
}, },
emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'], emits: ['update:model-value', 'remove', 'new-submitter', 'name-change'],

6
app/javascript/template_builder/field_type.vue
Unescape View File

@ -22,6 +22,7 @@
v-if="editable && renderDropdown" v-if="editable && renderDropdown"
tabindex="0" tabindex="0"
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3" class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
:style="menuStyle"
:class="menuClasses" :class="menuClasses"
@click="closeDropdown" @click="closeDropdown"
> >
@ -65,6 +66,11 @@ export default {
required: false, required: false,
default: 'mt-1.5 bg-base-100' default: 'mt-1.5 bg-base-100'
}, },
menuStyle: {
type: Object,
required: false,
default: () => ({})
},
buttonClasses: { buttonClasses: {
type: String, type: String,
required: false, required: false,

9
app/javascript/template_builder/fields.vue
Unescape View File

@ -3,8 +3,9 @@
<FieldSubmitter <FieldSubmitter
:model-value="selectedSubmitter.uuid" :model-value="selectedSubmitter.uuid"
class="roles-dropdown w-full rounded-lg" class="roles-dropdown w-full rounded-lg"
:class="{ 'bg-base-100': withStickySubmitters }" :style="withStickySubmitters ? { backgroundColor } : {}"
:submitters="submitters" :submitters="submitters"
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
:editable="editable && !defaultSubmitters.length" :editable="editable && !defaultSubmitters.length"
@new-submitter="save" @new-submitter="save"
@remove="removeSubmitter" @remove="removeSubmitter"
@ -71,7 +72,7 @@
:key="field.name" :key="field.name"
> >
<div <div
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor }"
draggable="true" draggable="true"
class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2" class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
@dragstart="onDragstart({ type: 'text', ...field })" @dragstart="onDragstart({ type: 'text', ...field })"
@ -113,7 +114,7 @@
v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')" v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
draggable="true" draggable="true"
class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative" class="field-type-button group flex items-center justify-center border border-dashed w-full rounded relative"
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor }"
:class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'" :class="drawFieldType === type ? 'border-base-content/40' : 'border-base-300 hover:border-base-content/20'"
@dragstart="onDragstart({ type: type })" @dragstart="onDragstart({ type: type })"
@dragend="$emit('drag-end')" @dragend="$emit('drag-end')"
@ -142,7 +143,7 @@
href="https://www.docuseal.co/pricing" href="https://www.docuseal.co/pricing"
target="_blank" target="_blank"
class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative" class="opacity-50 flex items-center justify-center border border-dashed border-base-300 w-full rounded relative"
:style="{ backgroundColor: backgroundColor }" :style="{ backgroundColor }"
> >
<div class="w-0 absolute left-0"> <div class="w-0 absolute left-0">
<IconLock <IconLock

3
app/javascript/template_builder/mobile_draw_field.vue
Unescape View File

@ -24,6 +24,7 @@
:submitters="submitters" :submitters="submitters"
:editable="editable" :editable="editable"
:mobile-view="true" :mobile-view="true"
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
@new-submitter="save" @new-submitter="save"
@remove="removeSubmitter" @remove="removeSubmitter"
@name-change="save" @name-change="save"
@ -43,7 +44,7 @@ export default {
Field, Field,
FieldSubmitter FieldSubmitter
}, },
inject: ['save', 't'], inject: ['save', 't', 'backgroundColor'],
props: { props: {
drawField: { drawField: {
type: Object, type: Object,

Write Preview
Loading…
Cancel
Save