From bb2aa2701a46528a9a636e675b080538845b1e3d Mon Sep 17 00:00:00 2001
From: hystepik <lucas.marcouiller@gmail.com>
Date: Wed, 22 Mar 2023 15:48:33 +0100
Subject: [PATCH] fix css and bug

---
 htdocs/core/lib/files.lib.php    | 10 +++++++---
 htdocs/theme/eldy/global.inc.php | 14 ++++----------
 htdocs/theme/md/style.css.php    | 22 ++++++++++++++++++++++
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/htdocs/core/lib/files.lib.php b/htdocs/core/lib/files.lib.php
index caeeb9c2976..ae2a6493028 100644
--- a/htdocs/core/lib/files.lib.php
+++ b/htdocs/core/lib/files.lib.php
@@ -3333,10 +3333,12 @@ function dragAndDropFileUpload($htmlname)
 	$out .= "<script>";
 	$out .= '
 		jQuery(document).ready(function() {
+			var enterTargetDragDrop = null;
 			$("#'.$htmlname.'").addClass("cssDragDropArea");
 			$(".cssDragDropArea").on("dragenter", function(ev) {
 				// Entering drop area. Highlight area
 				console.log("We add class highlightDragDropArea")
+				enterTargetDragDrop = ev.target;
 				$(this).addClass("highlightDragDropArea");
 				$("#'.$htmlname.'Message").removeClass("hidden");
 				ev.preventDefault();
@@ -3344,9 +3346,11 @@ function dragAndDropFileUpload($htmlname)
 			
 			$(".cssDragDropArea").on("dragleave", function(ev) {
 				// Going out of drop area. Remove Highlight
-				console.log("We remove class highlightDragDropArea")
-				$("#'.$htmlname.'Message").addClass("hidden");
-				$(this).removeClass("highlightDragDropArea");
+				if (enterTargetDragDrop == ev.target){
+					console.log("We remove class highlightDragDropArea")
+					$("#'.$htmlname.'Message").addClass("hidden");
+					$(this).removeClass("highlightDragDropArea");
+				}
 			});
 
 			$(".cssDragDropArea").on("dragover", function(ev) {
diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php
index 7968ea0dece..74b4257f7e6 100644
--- a/htdocs/theme/eldy/global.inc.php
+++ b/htdocs/theme/eldy/global.inc.php
@@ -7597,27 +7597,21 @@ div.clipboardCPValue.hidewithsize {
 
 .cssDragDropArea{
 	position: relative;
-	 border: 2px rgba(123, 123, 123, .2) dashed !important;
-	padding: 10px !important;
 }
 .highlightDragDropArea{
 	border: 2px #000 dashed !important;
-	background-color: #666 !important;
-}
-.highlightDragDropArea * {
-	pointer-events: none;
+	background-color: #bbbbbb !important;
 }
 .highlightDragDropArea * :not(.dragDropAreaMessage *){
-	opacity:0.5;
+	opacity:0.7;
 	filter: blur(3px) grayscale(100%);
 }
 .dragDropAreaMessage {
 	position: absolute;
 	left:50%;
-	   top:50%;
-	   transform: translate(-50%, -50%);
+	top:50%;
+	transform: translate(-50%, -50%);
 	text-align:center;
-	/*BIEN PLACER CETTE DIV */
 }
 
 /* ============================================================================== */
diff --git a/htdocs/theme/md/style.css.php b/htdocs/theme/md/style.css.php
index 29e460a7c4f..943fad9e127 100644
--- a/htdocs/theme/md/style.css.php
+++ b/htdocs/theme/md/style.css.php
@@ -7508,6 +7508,28 @@ div.clipboardCPValue.hidewithsize {
 	zoom: 0.20;
 }
 
+/* ============================================================================== */
+/* For drag and drop feature                                                         */
+/* ============================================================================== */
+
+.cssDragDropArea{
+	position: relative;
+}
+.highlightDragDropArea{
+	border: 2px #000 dashed !important;
+	background-color: #bbbbbb !important;
+}
+.highlightDragDropArea * :not(.dragDropAreaMessage *){
+	opacity:0.7;
+	filter: blur(3px) grayscale(100%);
+}
+.dragDropAreaMessage {
+	position: absolute;
+	left:50%;
+	top:50%;
+	transform: translate(-50%, -50%);
+	text-align:center;
+}
 
 /* ============================================================================== */
 /* CSS style used for small screen                                                */