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"
:contenteditable="editable"
style="min-width: 2px"
:class="iconInline ? 'inline' : 'block'"
:class="[iconInline ? 'inline' : 'block', hideIcon ? 'focus:block' : '']"
class="peer outline-none"
@paste.prevent="onPaste"
@keydown.enter.prevent="blurContenteditable"
@@ -18,22 +18,19 @@
{{ value }}
</span>
<span
v-if="withRequired"
title="Required"
class="text-red-500 peer-focus:hidden"
@click="focusContenteditable"
class="relative inline"
:class="{ 'peer-focus:hidden': hideIcon, 'peer-focus:invisible': !hideIcon }"
>
*
<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>
<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>
</template>
@@ -67,7 +64,7 @@ export default {
required: false,
default: true
},
withRequired: {
floatIcon: {
type: Boolean,
required: 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="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]"
/>
<span>
@@ -100,7 +100,7 @@
class="cursor-pointer text-base-100 flex h-full items-center justify-center"
>
<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]"
/>
</label>
@@ -108,11 +108,11 @@
v-else
ref="label"
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">
<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]"
/>
<Contenteditable
@@ -125,7 +125,7 @@
@update:model-value="$emit('name-change', selectedSubmitter)"
/>
</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
:is="editable ? 'IconPlus' : 'IconChevronDown'"
width="18"
@@ -153,7 +153,7 @@
>
<span class="py-1 flex items-center">
<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]"
/>
<span>
@@ -164,7 +164,7 @@
v-if="!compact && submitters.length > 1 && editable"
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
:title="t('up')"
class="relative w-2"
@@ -184,7 +184,7 @@
</div>
<button
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)"
>
<IconTrashX :width="18" />
app/javascript/template_builder/google_drive_document_settings.vue
+4 -1
View File
@@ -4,7 +4,10 @@
:class="{ 'dropdown-open': isLoading }"
>
<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>
<ul
tabindex="0"
app/javascript/template_builder/mobile_draw_field.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<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">
<div class="flex items-center space-x-2">
<component
app/javascript/template_builder/preview.vue
+8 -7
View File
@@ -9,7 +9,7 @@
loading="lazy"
>
<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)"
>
<div
@@ -23,7 +23,7 @@
>
<div>
<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"
>
<IconRouteAltLeft
@@ -48,7 +48,7 @@
>
<div>
<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"
@click.stop="$emit('remove', item)"
>
@@ -63,7 +63,7 @@
class="tooltip tooltip-left before:text-xs"
>
<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)"
>
<IconSortDescending2
@@ -75,14 +75,14 @@
</span>
<template v-if="withArrows">
<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"
@click.stop="$emit('up', item)"
>
&uarr;
</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"
@click.stop="$emit('down', item)"
>
@@ -105,7 +105,8 @@
:model-value="item.name"
:icon-width="16"
:icon-inline="true"
:hide-icon="false"
:float-icon="!item.google_drive_file_id"
:hide-icon="!item.google_drive_file_id"
:editable="editable"
class="mx-auto"
@update:model-value="onUpdateName"