From 5f44806287997456977895d40996ac9bb1b17839 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <alex@docuseal.com>
Date: Wed, 14 May 2025 00:54:48 +0300
Subject: [PATCH] adjust dropoze border style

---
 app/javascript/elements/dashboard_dropzone.js | 16 ++++++++++++
 app/javascript/elements/file_dropzone.js      | 26 ++++++++++++++++---
 app/javascript/template_builder/builder.vue   |  1 -
 app/javascript/template_builder/dropzone.vue  |  7 +----
 .../template_builder/hover_dropzone.vue       |  5 +---
 app/javascript/template_builder/i18n.js       | 12 ++++-----
 app/views/shared/_classes.html.erb            |  2 +-
 app/views/templates/_dropzone.html.erb        |  2 +-
 8 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/app/javascript/elements/dashboard_dropzone.js b/app/javascript/elements/dashboard_dropzone.js
index b99c00ff..3ac0a4c7 100644
--- a/app/javascript/elements/dashboard_dropzone.js
+++ b/app/javascript/elements/dashboard_dropzone.js
@@ -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) => {
diff --git a/app/javascript/elements/file_dropzone.js b/app/javascript/elements/file_dropzone.js
index 76411a50..02fc1083 100644
--- a/app/javascript/elements/file_dropzone.js
+++ b/app/javascript/elements/file_dropzone.js
@@ -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) {
diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue
index 77e1bb96..514740eb 100644
--- a/app/javascript/template_builder/builder.vue
+++ b/app/javascript/template_builder/builder.vue
@@ -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)"
diff --git a/app/javascript/template_builder/dropzone.vue b/app/javascript/template_builder/dropzone.vue
index ce97bcc1..e6f0030d 100644
--- a/app/javascript/template_builder/dropzone.vue
+++ b/app/javascript/template_builder/dropzone.vue
@@ -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,
diff --git a/app/javascript/template_builder/hover_dropzone.vue b/app/javascript/template_builder/hover_dropzone.vue
index 5c9ccf28..54a495c1 100644
--- a/app/javascript/template_builder/hover_dropzone.vue
+++ b/app/javascript/template_builder/hover_dropzone.vue
@@ -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"
diff --git a/app/javascript/template_builder/i18n.js b/app/javascript/template_builder/i18n.js
index acfa093c..8cc4a17b 100644
--- a/app/javascript/template_builder/i18n.js
+++ b/app/javascript/template_builder/i18n.js
@@ -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',
diff --git a/app/views/shared/_classes.html.erb b/app/views/shared/_classes.html.erb
index 2c291713..d34b62e7 100644
--- a/app/views/shared/_classes.html.erb
+++ b/app/views/shared/_classes.html.erb
@@ -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' %>
diff --git a/app/views/templates/_dropzone.html.erb b/app/views/templates/_dropzone.html.erb
index 95128c1a..766fb0dc 100644
--- a/app/views/templates/_dropzone.html.erb
+++ b/app/views/templates/_dropzone.html.erb
@@ -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">