Fix drop down ergonomy and feedback (#30808)

htdocs/core/js/lib_head.js.php

@@ -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");
+			}
+		}
+	});
 });
 
 

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   {
+.butAction:hover, .dropdown-holder.open > .butAction   {
-	-webkit-box-shadow: 0px 0px 6px 1px rgba(50, 50, 50, 0.4), 0px 0px 0px rgba(60,60,60,0.1);
+	/** TODO use css var with hsl from --colortextlink to allow create darken or lighten color */
-	box-shadow: 0px 0px 6px 1px rgba(50, 50, 50, 0.4), 0px 0px 0px rgba(60,60,60,0.1);
+	-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;

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 */