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

adjust style

Browse Source
This commit is contained in:
Pete Matsyburka
2025-10-11 10:58:09 +03:00
parent 30274f7f1a
commit 7707e1cd2b
5 changed files with 34 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/template_builder/contenteditable.vue
+13 -16
View File
@@ -8,7 +8,7 @@
dir="auto" dir="auto"
:contenteditable="editable" :contenteditable="editable"
style="min-width: 2px" style="min-width: 2px"
:class="iconInline ? 'inline' : 'block'" :class="[iconInline ? 'inline' : 'block', hideIcon ? 'focus:block' : '']"
class="peer outline-none" class="peer outline-none"
@paste.prevent="onPaste" @paste.prevent="onPaste"
@keydown.enter.prevent="blurContenteditable" @keydown.enter.prevent="blurContenteditable"
@@ -18,22 +18,19 @@
{{ value }} {{ value }}
</span> </span>
<span <span
v-if="withRequired" class="relative inline"
title="Required" :class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
class="text-red-500 peer-focus:hidden"
@click="focusContenteditable"
> >
* <IconPencil
class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle pl-1"
:style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
:title="t('edit')"
:class="{ invisible: !editable, 'absolute top-1/2 -translate-y-1/2': !iconInline || floatIcon, 'inline align-bottom': iconInline, 'left-0': floatIcon }"
:width="iconWidth + 4"
:stroke-width="iconStrokeWidth"
@click="[focusContenteditable(), selectOnEditClick && selectContent()]"
/>
</span> </span>
<IconPencil
class="cursor-pointer flex-none opacity-0 group-hover/contenteditable-container:opacity-100 group-hover/contenteditable:opacity-100 align-middle"
:style="iconInline ? {} : { right: -(1.1 * iconWidth) + 'px' }"
:title="t('edit')"
:class="{ invisible: !editable, 'ml-1': !withRequired, 'absolute': !iconInline, 'inline align-bottom': iconInline, 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
:width="iconWidth"
:stroke-width="iconStrokeWidth"
@click="[focusContenteditable(), selectOnEditClick && selectContent()]"
/>
</div> </div>
</template> </template>
@@ -67,7 +64,7 @@ export default {
required: false, required: false,
default: true default: true
}, },
withRequired: { floatIcon: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false default: false
app/javascript/template_builder/field_submitter.vue
+8 -8
View File
@@ -52,7 +52,7 @@
> >
<span class="py-1 flex items-center"> <span class="py-1 flex items-center">
<span <span
class="rounded-full w-3 h-3 ml-1 mr-3" class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
:class="colors[index % colors.length]" :class="colors[index % colors.length]"
/> />
<span> <span>
@@ -100,7 +100,7 @@
class="cursor-pointer text-base-100 flex h-full items-center justify-center" class="cursor-pointer text-base-100 flex h-full items-center justify-center"
> >
<button <button
class="mx-1 w-3 h-3 rounded-full" class="mx-1 w-3 h-3 rounded-full flex-shrink-0"
:class="colors[submitters.indexOf(selectedSubmitter) % colors.length]" :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
/> />
</label> </label>
@@ -108,11 +108,11 @@
v-else v-else
ref="label" ref="label"
tabindex="0" tabindex="0"
class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between" class="group cursor-pointer group/contenteditable-container rounded-md p-2 border border-base-300 hover:border-content w-full flex justify-between items-center"
> >
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<span <span
class="w-3 h-3 rounded-full" class="w-3 h-3 rounded-full flex-shrink-0"
:class="colors[submitters.indexOf(selectedSubmitter) % colors.length]" :class="colors[submitters.indexOf(selectedSubmitter) % colors.length]"
/> />
<Contenteditable <Contenteditable
@@ -125,7 +125,7 @@
@update:model-value="$emit('name-change', selectedSubmitter)" @update:model-value="$emit('name-change', selectedSubmitter)"
/> />
</div> </div>
<span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded"> <span class="flex items-center transition-all duration-75 group-hover:border border-base-content/20 border-dashed w-6 h-6 justify-center rounded flex-shrink-0">
<component <component
:is="editable ? 'IconPlus' : 'IconChevronDown'" :is="editable ? 'IconPlus' : 'IconChevronDown'"
width="18" width="18"
@@ -153,7 +153,7 @@
> >
<span class="py-1 flex items-center"> <span class="py-1 flex items-center">
<span <span
class="rounded-full w-3 h-3 ml-1 mr-3" class="rounded-full w-3 h-3 ml-1 mr-3 flex-shrink-0"
:class="colors[index % colors.length]" :class="colors[index % colors.length]"
/> />
<span> <span>
@@ -164,7 +164,7 @@
v-if="!compact && submitters.length > 1 && editable" v-if="!compact && submitters.length > 1 && editable"
class="flex" class="flex"
> >
<div class="flex-col pr-1 hidden group-hover:flex -mt-1 h-0"> <div class="flex-col pr-1 flex invisible group-hover:visible -mt-1 h-0">
<button <button
:title="t('up')" :title="t('up')"
class="relative w-2" class="relative w-2"
@@ -184,7 +184,7 @@
</div> </div>
<button <button
v-if="!compact && submitters.length > 1 && editable" v-if="!compact && submitters.length > 1 && editable"
class="hidden group-hover:block px-2" class="invisible group-hover:visible px-2"
@click.prevent.stop="remove(submitter)" @click.prevent.stop="remove(submitter)"
> >
<IconTrashX :width="18" /> <IconTrashX :width="18" />
app/javascript/template_builder/google_drive_document_settings.vue
+4 -1
View File
@@ -4,7 +4,10 @@
:class="{ 'dropdown-open': isLoading }" :class="{ 'dropdown-open': isLoading }"
> >
<label tabindex="0"> <label tabindex="0">
<IconBrandGoogleDrive class="w-5 h-5 inline-block mr-1 cursor-pointer" /> <IconBrandGoogleDrive
width="19"
class="inline-block mr-1 cursor-pointer"
/>
</label> </label>
<ul <ul
tabindex="0" tabindex="0"
app/javascript/template_builder/mobile_draw_field.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="absolute text-center w-full bottom-0 pr-3 mb-4"> <div class="absolute w-full bottom-0 pr-3 mb-4">
<span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile"> <span class="w-full bg-base-200 px-4 py-2 rounded-md inline-flex space-x-2 mx-auto items-center justify-between mb-2 z-20 draw-field-container-mobile">
<div class="flex items-center space-x-2"> <div class="flex items-center space-x-2">
<component <component
app/javascript/template_builder/preview.vue
+8 -7
View File
@@ -9,7 +9,7 @@
loading="lazy" loading="lazy"
> >
<div <div
class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors" class="group flex justify-end cursor-pointer top-0 bottom-0 left-0 right-0 absolute p-1 hover:bg-black/10 transition-colors rounded"
@click="$emit('scroll-to', item)" @click="$emit('scroll-to', item)"
> >
<div <div
@@ -23,7 +23,7 @@
> >
<div> <div>
<button <button
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button" class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
@click.stop="isShowConditionsModal = true" @click.stop="isShowConditionsModal = true"
> >
<IconRouteAltLeft <IconRouteAltLeft
@@ -48,7 +48,7 @@
> >
<div> <div>
<button <button
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button" class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
style="width: 24px; height: 24px" style="width: 24px; height: 24px"
@click.stop="$emit('remove', item)" @click.stop="$emit('remove', item)"
> >
@@ -63,7 +63,7 @@
class="tooltip tooltip-left before:text-xs" class="tooltip tooltip-left before:text-xs"
> >
<button <button
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button" class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors p-0 document-control-button"
@click.stop="$emit('reorder', item)" @click.stop="$emit('reorder', item)"
> >
<IconSortDescending2 <IconSortDescending2
@@ -75,14 +75,14 @@
</span> </span>
<template v-if="withArrows"> <template v-if="withArrows">
<button <button
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button" class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
style="width: 24px; height: 24px" style="width: 24px; height: 24px"
@click.stop="$emit('up', item)" @click.stop="$emit('up', item)"
> >
&uarr; &uarr;
</button> </button>
<button <button
class="btn border-base-200 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button" class="btn border-gray-300 bg-white text-base-content btn-xs rounded hover:text-base-100 hover:bg-base-content hover:border-base-content w-full transition-colors document-control-button"
style="width: 24px; height: 24px" style="width: 24px; height: 24px"
@click.stop="$emit('down', item)" @click.stop="$emit('down', item)"
> >
@@ -105,7 +105,8 @@
:model-value="item.name" :model-value="item.name"
:icon-width="16" :icon-width="16"
:icon-inline="true" :icon-inline="true"
:hide-icon="false" :float-icon="!item.google_drive_file_id"
:hide-icon="!item.google_drive_file_id"
:editable="editable" :editable="editable"
class="mx-auto" class="mx-auto"
@update:model-value="onUpdateName" @update:model-value="onUpdateName"