[IMP] dms: animated dropzone with marching dashed border

Signed-off-by: Don Kendall <dkendall@ledoweb.com>

Author: dnplkndll

dms/static/src/js/views/file_kanban_renderer.xml

@@ -10,8 +10,14 @@
         t-inherit-mode="primary"
     >
         <xpath expr="//div[hasclass('o_kanban_renderer')]" position="before">
-            <div t-if="dragState.showDragZone" class="o_dropzone">
-                <i class="fa fa-cloud-upload fa-10x" />
+            <div t-if="dragState.showDragZone" class="o_dropzone o_dms_dropzone">
+                <div class="o_dms_dropzone__icon">
+                    <i class="fa fa-cloud-upload" />
+                </div>
+                <div class="o_dms_dropzone__title">Drop files to upload</div>
+                <div class="o_dms_dropzone__hint">
+                    Release to add to the current directory
+                </div>
             </div>
             <div
                 class="o_kanban_dms_density_toggle btn-group btn-group-sm"

dms/static/src/js/views/file_list_renderer.xml

@@ -6,8 +6,14 @@
         t-inherit-mode="primary"
     >
         <xpath expr="//div[hasclass('o_list_renderer')]" position="before">
-            <div t-if="dragState.showDragZone" class="o_dropzone">
-                <i class="fa fa-cloud-upload fa-10x" />
+            <div t-if="dragState.showDragZone" class="o_dropzone o_dms_dropzone">
+                <div class="o_dms_dropzone__icon">
+                    <i class="fa fa-cloud-upload" />
+                </div>
+                <div class="o_dms_dropzone__title">Drop files to upload</div>
+                <div class="o_dms_dropzone__hint">
+                    Release to add to the current directory
+                </div>
             </div>
         </xpath>
     </t>

dms/static/src/scss/file_kanban.scss

@@ -185,6 +185,60 @@
         }
     }
 
+    // ---- Animated dropzone (drag-over overlay) ----
+    //
+    // Replaces the default static cloud icon with a marching-dashed-border
+    // overlay + pulsing icon + title + hint. Triggered by the renderer's
+    // existing `dragState.showDragZone` state — no JS change.
+    .o_dms_dropzone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 1rem;
+        background:
+            linear-gradient(rgba(113, 75, 103, 0.06), rgba(113, 75, 103, 0.1)),
+            repeating-linear-gradient(
+                45deg,
+                transparent,
+                transparent 8px,
+                rgba(113, 75, 103, 0.06) 8px,
+                rgba(113, 75, 103, 0.06) 16px
+            );
+        border-radius: 8px;
+        outline: 3px dashed var(--bs-primary, #714b67);
+        outline-offset: -8px;
+        animation: o_dms_dropzone_march 1s linear infinite;
+        z-index: 10;
+
+        &__icon {
+            width: 96px;
+            height: 96px;
+            border-radius: 50%;
+            background: rgba(113, 75, 103, 0.12);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            animation: o_dms_dropzone_pulse 1.5s ease-in-out infinite;
+
+            i.fa {
+                font-size: 3rem;
+                color: var(--bs-primary, #714b67);
+            }
+        }
+
+        &__title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            color: var(--bs-primary, #714b67);
+        }
+
+        &__hint {
+            font-size: 0.85rem;
+            color: var(--bs-secondary-color, #6c757d);
+        }
+    }
+
     // ---- Per-extension accent palette ----
     //
     // The card derives `data-ext` from `record.name` at render time (see the
@@ -252,3 +306,22 @@
         --dms-accent: #ae3ec9;
     }
 }
+
+@keyframes o_dms_dropzone_march {
+    from {
+        outline-offset: -8px;
+    }
+    to {
+        outline-offset: -16px;
+    }
+}
+
+@keyframes o_dms_dropzone_pulse {
+    0%,
+    100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.08);
+    }
+}