didadmin/docuseal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix builder bg color

Browse Source
This commit is contained in:
Pete Matsyburka
2024-04-23 01:57:45 +03:00
parent 2d76198290
commit d9318c04f8
5 changed files with 36 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/field.vue
+15 -9
View File
@@ -16,6 +16,8 @@
v-model="field.type"
:editable="editable && !defaultField"
:button-width="20"
:menu-classes="'mt-1.5'"
:menu-style="{ backgroundColor: dropdownBgColor }"
@update:model-value="[maybeUpdateOptions(), save()]"
@click="scrollToFirstArea"
/>
@@ -110,7 +112,8 @@
<ul
v-if="renderDropdown"
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"
@dragstart.prevent.stop
@click="closeDropdown"
@@ -121,7 +124,7 @@
@click.stop
>
<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()]"
>
<option
@@ -134,7 +137,7 @@
</option>
</select>
<label
:style="{ backgroundColor: backgroundColor }"
:style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
@@ -151,12 +154,12 @@
:placeholder="t('default_value')"
dir="auto"
: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"
>
<label
v-if="field.default_value"
:style="{ backgroundColor: backgroundColor }"
:style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
@@ -171,7 +174,7 @@
<select
v-model="field.preferences.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"
>
<option
@@ -183,7 +186,7 @@
</option>
</select>
<label
:style="{ backgroundColor: backgroundColor }"
:style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
@@ -197,7 +200,7 @@
>
<select
: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()]"
>
<option
@@ -220,7 +223,7 @@
</option>
</select>
<label
:style="{ backgroundColor: backgroundColor }"
:style="{ backgroundColor: dropdownBgColor }"
class="absolute -top-1 left-2.5 px-1 h-4"
style="font-size: 8px"
>
@@ -569,6 +572,9 @@ export default {
},
computed: {
fieldNames: FieldType.computed.fieldNames,
dropdownBgColor () {
return ['', null, 'transparent'].includes(this.backgroundColor) ? 'white' : this.backgroundColor
},
schemaAttachmentsIndexes () {
return (this.template.schema || []).reduce((acc, item, index) => {
acc[item.attachment_uuid] = index
app/javascript/template_builder/field_submitter.vue
+8 -1
View File
@@ -37,6 +37,7 @@
tabindex="0"
class="rounded-md min-w-max mb-2"
:class="menuClasses"
:style="menuStyle"
@click="closeDropdown"
>
<li
@@ -136,6 +137,7 @@
v-if="(editable || !compact) && renderDropdown"
tabindex="0"
:class="menuClasses"
:style="menuStyle"
@click="closeDropdown"
>
<li
@@ -253,10 +255,15 @@ export default {
type: String,
required: true
},
menuStyle: {
type: Object,
required: false,
default: () => ({})
},
menuClasses: {
type: String,
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'],
app/javascript/template_builder/field_type.vue
+6
View File
@@ -22,6 +22,7 @@
v-if="editable && renderDropdown"
tabindex="0"
class="dropdown-content menu menu-xs p-2 shadow rounded-box w-52 z-10 mb-3"
:style="menuStyle"
:class="menuClasses"
@click="closeDropdown"
>
@@ -65,6 +66,11 @@ export default {
required: false,
default: 'mt-1.5 bg-base-100'
},
menuStyle: {
type: Object,
required: false,
default: () => ({})
},
buttonClasses: {
type: String,
required: false,
app/javascript/template_builder/fields.vue
+5 -4
View File
@@ -3,8 +3,9 @@
<FieldSubmitter
:model-value="selectedSubmitter.uuid"
class="roles-dropdown w-full rounded-lg"
:class="{ 'bg-base-100': withStickySubmitters }"
:style="withStickySubmitters ? { backgroundColor } : {}"
:submitters="submitters"
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
:editable="editable && !defaultSubmitters.length"
@new-submitter="save"
@remove="removeSubmitter"
@@ -71,7 +72,7 @@
:key="field.name"
>
<div
:style="{ backgroundColor: backgroundColor }"
:style="{ backgroundColor }"
draggable="true"
class="default-field border border-base-300 rounded rounded-tr-none relative group mb-2"
@dragstart="onDragstart({ type: 'text', ...field })"
@@ -113,7 +114,7 @@
v-if="(fieldTypes.length === 0 || fieldTypes.includes(type)) && (withPhone || type != 'phone') && (withPayment || type != 'payment')"
draggable="true"
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'"
@dragstart="onDragstart({ type: type })"
@dragend="$emit('drag-end')"
@@ -142,7 +143,7 @@
href="https://www.docuseal.co/pricing"
target="_blank"
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">
<IconLock
app/javascript/template_builder/mobile_draw_field.vue
+2 -1
View File
@@ -24,6 +24,7 @@
:submitters="submitters"
:editable="editable"
:mobile-view="true"
:menu-style="{ backgroundColor: ['', null, 'transparent'].includes(backgroundColor) ? 'white' : backgroundColor }"
@new-submitter="save"
@remove="removeSubmitter"
@name-change="save"
@@ -43,7 +44,7 @@ export default {
Field,
FieldSubmitter
},
inject: ['save', 't'],
inject: ['save', 't', 'backgroundColor'],
props: {
drawField: {
type: Object,