From 2a326d02ed4e8f20e53d3d000c3096d12e5f21f8 Mon Sep 17 00:00:00 2001
From: John BOTELLA <68917336+thersane-john@users.noreply.github.com>
Date: Fri, 30 Aug 2024 15:48:52 +0200
Subject: [PATCH] Fix drop down ergonomy and feedback (#30808)

---
 htdocs/core/js/lib_head.js.php     | 14 +++++++++++++-
 htdocs/theme/eldy/btn.inc.php      |  7 ++++---
 htdocs/theme/eldy/dropdown.inc.php | 18 +++++++++++++++++-
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/htdocs/core/js/lib_head.js.php b/htdocs/core/js/lib_head.js.php
index a8145bc9e60..8b10fd5ee51 100644
--- a/htdocs/core/js/lib_head.js.php
+++ b/htdocs/core/js/lib_head.js.php
@@ -1324,7 +1324,7 @@ jQuery(document).ready(function() {
 	jQuery(".butAction.dropdown-toggle").on("click", function(event) {
 		console.log("Click on .butAction.dropdown-toggle");
 		var parentholder = jQuery(".butAction.dropdown-toggle").closest(".dropdown");
-			 var offset = parentholder.offset();
+		var offset = parentholder.offset();
 		var widthdocument = $(document).width();
 		var left = offset.left;
 		var right = widthdocument - offset.left - parentholder.width();
@@ -1336,6 +1336,18 @@ jQuery(document).ready(function() {
 		parentholder.toggleClass("open");
 		parentholder.children(".dropdown-content").css({"right": right+"px", "left": "auto"});
 	});
+
+	// Close drop down
+	jQuery(document).on("click", function(event) {
+		// search if click was outside drop down
+		if (!$(event.target).closest('.butAction.dropdown-toggle').length) {
+			let parentholder = jQuery(".butAction.dropdown-toggle").closest(".dropdown.open");
+			if(parentholder){
+				// Hide the menus.
+				parentholder.removeClass("open");
+			}
+		}
+	});
 });
 
 
diff --git a/htdocs/theme/eldy/btn.inc.php b/htdocs/theme/eldy/btn.inc.php
index ec865d4c331..6f412d7159c 100644
--- a/htdocs/theme/eldy/btn.inc.php
+++ b/htdocs/theme/eldy/btn.inc.php
@@ -143,9 +143,10 @@ span.butActionNewRefused>span.fa, span.butActionNewRefused>span.fa:hover
 	box-shadow: none; webkit-box-shadow: none;
 }
 
-.butAction:hover   {
-	-webkit-box-shadow: 0px 0px 6px 1px rgba(50, 50, 50, 0.4), 0px 0px 0px rgba(60,60,60,0.1);
-	box-shadow: 0px 0px 6px 1px rgba(50, 50, 50, 0.4), 0px 0px 0px rgba(60,60,60,0.1);
+.butAction:hover, .dropdown-holder.open > .butAction   {
+	/** TODO use css var with hsl from --colortextlink to allow create darken or lighten color */
+	-webkit-box-shadow: 5px 5px 0px rgba(0,0,0,0.1), inset 0px 0px 200px rgba(0,0,0,0.3); /* fix hover feedback : use "inset" background to easily darken background */
+	box-shadow: 5px 5px 0px rgba(0,0,0,0.1), inset 0px 0px 200px rgba(0,0,0,0.3); /* fix hover feedback : use "inset" background to easily darken background */
 }
 .butActionNew:hover   {
 	text-decoration: underline;
diff --git a/htdocs/theme/eldy/dropdown.inc.php b/htdocs/theme/eldy/dropdown.inc.php
index b59787308ed..4453f262616 100644
--- a/htdocs/theme/eldy/dropdown.inc.php
+++ b/htdocs/theme/eldy/dropdown.inc.php
@@ -540,7 +540,9 @@ dropdown-holder {
 	right:10px;	/* will be set with js */
 	background: #fff;
 	border: 1px solid #bbb;
-	text-align: <?php echo $left; ?>
+	text-align: <?php echo $left; ?>;
+	-webkit-box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
+	box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
 }
 
 .dropdown-content a {
@@ -568,6 +570,20 @@ dropdown-holder {
 	display: block;
 }
 
+/** dropdown arrow used to clearly identify parent button of dropdown*/
+.dropdown-holder.open .dropdown-content::before {
+	--triangleBorderSize : 5px;
+	position: absolute;
+	content: "";
+	top: calc(var(--triangleBorderSize) * -1);
+	right: 12px;
+	width: 0px;
+	height: 0px;
+	border-style: solid;
+	border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
+	border-color: transparent transparent #ffff transparent;
+	transform: rotate(0deg);
+}
 
 
 /* smartphone */