FIX : Ergonomy : edge detection for dropdown (#31023)

* Fix edge detection for dropdown

* add missing class

* Dropdown fix for md too

* Fix any js handled event must start with a log

---------

Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>

htdocs/core/js/lib_head.js.php

@@ -1323,18 +1323,41 @@ jQuery(document).ready(function() {
 jQuery(document).ready(function() {
 	jQuery(".butAction.dropdown-toggle").on("click", function(event) {
 		console.log("Click on .butAction.dropdown-toggle");
-		var parentholder = jQuery(event.target).parent();
+		let parentHolder = jQuery(event.target).parent();
-		var offset = parentholder.offset();
+		let dropDownContent = parentHolder.children(".dropdown-content");
-		var widthdocument = $(document).width();
+		let offset = parentHolder.offset();
-		var left = offset.left;
+		let widthDocument = $(document).width();
-		var right = widthdocument - offset.left - parentholder.width();
+		let heightDocument = $(document).height();
-		var widthpopup = parentholder.children(".dropdown-content").width();
+		let right = widthDocument - offset.left - parentHolder.width();
-		console.log("left="+left+" right="+right+" width="+widthpopup+" widthdocument="+widthdocument);
+		let widthPopup = parentHolder.children(".dropdown-content").width();
-		if (widthpopup + right >= widthdocument) {
+		if (widthPopup + right >= widthDocument) {
-			right = 10;
+			//right = 10;
+		}
+		parentHolder.toggleClass("open");
+
+		// Check tooltip is in viewport
+		let dropDownContentTop = dropDownContent.offset().top;
+		let dropDownContentLeft = dropDownContent.offset().left;
+		let dropDownContentHeight = dropDownContent.outerHeight();
+		let dropDownContentBottom = dropDownContentTop + dropDownContentHeight;
+		let viewportBottom = $(window).scrollTop() + $(window).height();
+
+		// Change dropdown Up/Down orientation if dropdown is close to bottom viewport
+		if(parentHolder.hasClass('open')
+			&& dropDownContentBottom > viewportBottom // Check bottom of dropdown is behind viewport
+			&& dropDownContentTop - dropDownContentHeight > 0 // check if set dropdown to --up will not go over the top of document
+		){
+			parentHolder.addClass("--up");
+		}else{
+			parentHolder.removeClass("--up");
+		}
+
+		// Change dropdown left/right offset if dropdown is close to left viewport
+		if(parentHolder.hasClass('open') && dropDownContentLeft < 0){
+			parentHolder.addClass("--left");
+		}else{
+			parentHolder.removeClass("--left");
 		}
-		parentholder.toggleClass("open");
-		parentholder.children(".dropdown-content").css({"right": right+"px", "left": "auto"});
 	});
 
 	// Close drop down
@@ -1344,7 +1367,7 @@ jQuery(document).ready(function() {
 			let parentholder = jQuery(".dropdown-toggle").closest(".dropdown.open");
 			if(parentholder){
 				// Hide the menus.
-				parentholder.removeClass("open");
+				parentholder.removeClass("open --up --left");
 			}
 		}
 	});

htdocs/theme/eldy/dropdown.inc.php

@@ -527,7 +527,7 @@ div.quickaddblock:focus {
 
 
 /* for the dropdown on action buttons */
-dropdown-holder {
+.dropdown-holder {
 	position: relative;
 	display: inline-block;
 }
@@ -537,7 +537,10 @@ dropdown-holder {
 	position: absolute;
 	z-index: 1;
 	width: 300px;
-	right:10px;	/* will be set with js */
+	right:0;	/* will be set with js */
+	bottom: 0;
+	transform: translateY(100%);
+
 	background: #fff;
 	border: 1px solid #bbb;
 	text-align: <?php echo $left; ?>;
@@ -545,21 +548,51 @@ dropdown-holder {
 	box-shadow: 5px 5px 0px rgba(0,0,0,0.1);
 }
 
+/* dropdown --up variant */
+.dropdown-holder.--up .dropdown-content{
+	bottom: auto;
+	top: 0;
+	transform: translateY(-100%);
+}
+
+/* dropdown --left variant */
+.dropdown-holder.--left .dropdown-content{
+	right: auto;
+	left: 12px;
+}
+
+
 .dropdown-content a {
 	margin-right: auto !important;
 	margin-left: auto !important;
 }
 .dropdown-content .butAction {
 	background: none;
-	color: #000 !important;
+	color: #333 !important;
 }
-.dropdown-content a.butAction {
+.dropdown-content a:is(.butAction,.butActionDelete,.butActionRefused) {
 	display: flex;
+	border-radius: 0;
 }
+
 .dropdown-content .butAction:hover {
 	box-shadow: none;
-	text-decoration: underline;
+	background-color: var(--butactionbg);
+	color: var(--textbutaction) !important;
+	text-decoration: none;
 }
+
+.dropdown-content .butActionDelete{
+	background-color: transparent !important;
+	color: #633 !important;
+}
+.dropdown-content .butActionDelete:hover {
+	box-shadow: none;
+	background-color: var(--butactiondeletebg) !important;
+	color: #633 !important;
+	text-decoration: none;
+}
+
 .dropdown-content .butActionRefused {
 	margin-left: 0;
 	margin-right: 0;
@@ -585,6 +618,20 @@ dropdown-holder {
 	transform: rotate(0deg);
 }
 
+/* dropdown --up variant*/
+.dropdown-holder.--up.open .dropdown-content::before{
+	top: auto;
+	bottom: calc(var(--triangleBorderSize) * -1);
+	border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
+	transform: rotate(180deg);
+}
+
+/* dropdown --left variant*/
+.dropdown-holder.--left.open .dropdown-content::before{
+	right: auto;
+	left: 12px;
+}
+
 
 /* smartphone */
 @media only screen and (max-width: 767px)

htdocs/theme/md/dropdown.inc.php

@@ -543,7 +543,7 @@ div.quickaddblock:focus {
 
 
 /* for the dropdown on action buttons */
-dropdown-holder {
+.dropdown-holder {
 	position: relative;
 	display: inline-block;
 }
@@ -553,12 +553,31 @@ dropdown-holder {
 	position: absolute;
 	z-index: 1;
 	width: 300px;
-	right:10px;	/* will be set with js */
+	right:0;
+	bottom: 0;
+	transform: translateY(100%);
+
 	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 --up variant */
+.dropdown-holder.--up .dropdown-content{
+	bottom: auto;
+	top: 0;
+	transform: translateY(-100%);
+}
+
+/* dropdown --left variant */
+.dropdown-holder.--left .dropdown-content{
+	right: auto;
+	left: 12px;
+}
+
+
 .dropdown-content a {
 	margin-right: auto !important;
 	margin-left: auto !important;
@@ -567,13 +586,28 @@ dropdown-holder {
 	background: none;
 	color: #000 !important;
 }
-.dropdown-content a.butAction {
+.dropdown-content a:is(.butAction,.butActionDelete,.butActionRefused) {
 	display: flex;
+	border-radius: 0;
 }
 .dropdown-content .butAction:hover {
 	box-shadow: none;
-	text-decoration: underline;
+	background-color: var(--butactionbg);
+	color: var(--textbutaction) !important;
+	text-decoration: none;
 }
+
+.dropdown-content .butActionDelete{
+	background-color: transparent !important;
+	color: #633 !important;
+}
+.dropdown-content .butActionDelete:hover {
+	box-shadow: none;
+	background-color: var(--butactiondeletebg) !important;
+	color: #633 !important;
+	text-decoration: none;
+}
+
 .dropdown-content .butActionRefused {
 	margin-left: 0;
 	margin-right: 0;
@@ -600,6 +634,21 @@ dropdown-holder {
 	transform: rotate(0deg);
 }
 
+/* dropdown --up variant*/
+.dropdown-holder.--up.open .dropdown-content::before{
+	top: auto;
+	bottom: calc(var(--triangleBorderSize) * -1);
+	border-width: 0 var(--triangleBorderSize) var(--triangleBorderSize) var(--triangleBorderSize);
+	transform: rotate(180deg);
+}
+
+/* dropdown --left variant*/
+.dropdown-holder.--left.open .dropdown-content::before{
+	right: auto;
+	left: 12px;
+}
+
+
 /* smartphone */
 @media only screen and (max-width: 767px)
 {