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

adjust dropoze border style

Browse Source
This commit is contained in:
Alex Turchyn
2025-05-14 00:54:48 +03:00
committed by Pete Matsyburka
parent 318b65af18
commit 5f44806287
8 changed files with 48 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/elements/dashboard_dropzone.js
+16
View File
@@ -165,11 +165,27 @@ export default targetable(class extends HTMLElement {
onDragover (e) {
if (e.dataTransfer?.types?.includes('Files') || this.dataset.targets !== 'dashboard-dropzone.templateCards') {
this.style.backgroundColor = '#F7F3F0'
if (this.classList.contains('before:border-base-300')) {
this.classList.remove('before:border-base-300')
this.classList.add('before:border-base-content/50')
} else if (this.classList.contains('border-base-300')) {
this.classList.remove('border-base-300')
this.classList.add('border-base-content/50')
}
}
}
onDragleave () {
this.style.backgroundColor = null
if (this.classList.contains('before:border-base-content/50')) {
this.classList.remove('before:border-base-content/50')
this.classList.add('before:border-base-300')
} else if (this.classList.contains('border-base-content/50')) {
this.classList.remove('border-base-content/50')
this.classList.add('border-base-300')
}
}
onWindowDragleave = (e) => {
app/javascript/elements/file_dropzone.js
+22 -4
View File
@@ -5,19 +5,37 @@ export default actionable(targetable(class extends HTMLElement {
static [target.static] = [
'loading',
'icon',
'input'
'input',
'area'
]
connectedCallback () {
this.addEventListener('drop', this.onDrop)
this.addEventListener('dragover', (e) => e.preventDefault())
this.addEventListener('drop', this.onDrop)
document.addEventListener('turbo:submit-end', this.toggleLoading)
this.area?.addEventListener('dragover', this.onDragover)
this.area?.addEventListener('dragleave', this.onDragleave)
}
disconnectedCallback () {
this.removeEventListener('drop', this.onDrop)
document.removeEventListener('turbo:submit-end', this.toggleLoading)
this.area?.removeEventListener('dragover', this.onDragover)
this.area?.removeEventListener('dragleave', this.onDragleave)
}
onDragover (e) {
if (e.dataTransfer?.types?.includes('Files')) {
this.style.backgroundColor = '#F7F3F0'
this.classList.remove('border-base-300', 'hover:bg-base-200/30')
this.classList.add('border-base-content/50')
}
}
onDragleave () {
this.style.backgroundColor = null
this.classList.remove('border-base-content/50')
this.classList.add('border-base-300', 'hover:bg-base-200/30')
}
onDrop (e) {
app/javascript/template_builder/builder.vue
-1
View File
@@ -13,7 +13,6 @@
:template-id="template.id"
:accept-file-types="acceptFileTypes"
:with-replace-and-clone="withReplaceAndCloneUpload"
hover-class="bg-base-200/50"
@add="[updateFromUpload($event), isDragFile = false]"
@replace="[onDocumentsReplace($event), isDragFile = false]"
@replace-and-clone="onDocumentsReplaceAndTemplateClone($event)"
app/javascript/template_builder/dropzone.vue
+1 -6
View File
@@ -10,7 +10,7 @@
id="document_dropzone"
class="w-full relative rounded-md border-2 border-base-content/10 border-dashed"
:for="inputId"
:class="[{ 'opacity-50': isLoading, 'hover:bg-base-200/30': !hoverClass }, isDragEntering && hoverClass ? hoverClass : '']"
:class="{ 'opacity-50': isLoading, 'hover:bg-base-200/50': !isDragEntering, 'bg-base-200/50 border-base-content/50': isDragEntering }"
>
<div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center pointer-events-none">
<div class="flex flex-col items-center">
@@ -84,11 +84,6 @@ export default {
required: false,
default: 'IconCloudUpload'
},
hoverClass: {
type: String,
required: false,
default: null
},
cloneTemplateOnUpload: {
type: Boolean,
required: false,
app/javascript/template_builder/hover_dropzone.vue
+1 -4
View File
@@ -6,12 +6,11 @@
<div class="flex flex-col gap-2 p-4 items-center bg-base-100 h-full max-h-[85vh] max-w-6xl rounded-2xl w-full">
<Dropzone
class="flex-1 h-full"
hover-class="bg-base-200/50"
icon="IconFilePlus"
:template-id="templateId"
:accept-file-types="acceptFileTypes"
:with-description="false"
:title="t('upload_a_new_document')"
:title="t('add_a_new_document')"
type="add_files"
@loading="isLoading = $event"
@success="$emit('add', $event)"
@@ -20,7 +19,6 @@
<div class="flex-1 flex gap-2 w-full">
<Dropzone
class="flex-1 h-full"
hover-class="bg-base-200/50"
icon="IconFileSymlink"
:template-id="templateId"
:accept-file-types="acceptFileTypes"
@@ -33,7 +31,6 @@
<Dropzone
v-if="withReplaceAndClone"
class="flex-1 h-full"
hover-class="bg-base-200/50"
icon="IconFiles"
:template-id="templateId"
:accept-file-types="acceptFileTypes"
app/javascript/template_builder/i18n.js
+6 -6
View File
@@ -63,7 +63,7 @@ const en = {
processing_: 'Processing...',
add_pdf_documents_or_images: 'Add PDF documents or images',
add_documents_or_images: 'Add documents or images',
upload_a_new_document: 'Upload a new document',
add_a_new_document: 'Add a new document',
replace_existing_document: 'Replace existing document',
clone_and_replace_documents: 'Clone and replace documents',
required: 'Required',
@@ -228,7 +228,7 @@ const es = {
processing_: 'Procesando...',
add_pdf_documents_or_images: 'Agregar documentos PDF o imágenes',
add_documents_or_images: 'Agregar documentos o imágenes',
upload_a_new_document: 'Subir un nuevo documento',
add_a_new_document: 'Agregar un nuevo documento',
replace_existing_document: 'Reemplazar documento existente',
clone_and_replace_documents: 'Clonar y reemplazar documentos',
required: 'Requerido',
@@ -399,7 +399,7 @@ const it = {
processing_: 'Elaborazione...',
add_pdf_documents_or_images: 'Aggiungi documenti PDF o immagini',
add_documents_or_images: 'Aggiungi documenti o immagini',
upload_a_new_document: 'Carica un nuovo documento',
add_a_new_document: 'Aggiungi un nuovo documento',
replace_existing_document: 'Sostituisci documento esistente',
clone_and_replace_documents: 'Clona e sostituisci documenti',
required: 'Obbligatorio',
@@ -564,7 +564,7 @@ const pt = {
processing_: 'Processando...',
add_pdf_documents_or_images: 'Adicionar documentos PDF ou imagens',
add_documents_or_images: 'Adicionar documentos ou imagens',
upload_a_new_document: 'Enviar um novo documento',
add_a_new_document: 'Ajouter un nouveau document',
replace_existing_document: 'Substituir documento existente',
clone_and_replace_documents: 'Clonar e substituir documentos',
required: 'Obrigatório',
@@ -731,7 +731,7 @@ const fr = {
processing_: 'Traitement en cours...',
add_pdf_documents_or_images: 'Ajoutez des documents PDF ou des images',
add_documents_or_images: 'Ajoutez des documents ou des images',
upload_a_new_document: 'Téléverser un nouveau document',
add_a_new_document: 'Adicionar um novo documento',
replace_existing_document: 'Remplacer le document existant',
clone_and_replace_documents: 'Cloner et remplacer les documents',
required: 'Requis',
@@ -899,7 +899,7 @@ const de = {
processing_: 'Verarbeitung...',
add_pdf_documents_or_images: 'PDF-Dokumente oder Bilder hinzufügen',
add_documents_or_images: 'Dokumente oder Bilder hinzufügen',
upload_a_new_document: 'Neues Dokument hochladen',
add_a_new_document: 'Neues Dokument hinzufügen',
replace_existing_document: 'Vorhandenes Dokument ersetzen',
clone_and_replace_documents: 'Dokumente klonen und ersetzen',
required: 'Erforderlich',
app/views/shared/_classes.html.erb
+1 -1
View File
@@ -1 +1 @@
<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open' %>
<% 'stats stat stat-figure stat-title stat-value text-accent w-fit hover:bg-white dropdown-open border-base-content/50 before:border-base-content/50' %>
app/views/templates/_dropzone.html.erb
+1 -1
View File
@@ -2,7 +2,7 @@
<input type="hidden" name="form_id" value="<%= form_id %>">
<button type="submit" class="hidden"></button>
<file-dropzone data-submit-on-upload="true" class="w-full">
<label for="file_dropzone_input" class="w-full block h-52 relative hover:bg-base-200/30 rounded-xl border border-2 border-base-300 border-dashed">
<label for="file_dropzone_input" class="w-full block h-52 relative hover:bg-base-200/30 rounded-xl border-2 border-base-300 border-dashed" data-target="file-dropzone.area">
<div class="absolute top-0 right-0 left-0 bottom-0 flex items-center justify-center p-2">
<div class="flex flex-col items-center text-center">
<span data-target="file-dropzone.icon" class="flex flex-col items-center">