diff --git a/htdocs/core/class/html.form.class.php b/htdocs/core/class/html.form.class.php index e1e7d97f821..4ab0bc44d9d 100644 --- a/htdocs/core/class/html.form.class.php +++ b/htdocs/core/class/html.form.class.php @@ -6693,8 +6693,10 @@ class Form @@ -7070,7 +7074,6 @@ class Form jQuery(".linkto").click(function() { console.log("We choose to show/hide link for rel="+jQuery(this).attr(\'rel\')); jQuery("#"+jQuery(this).attr(\'rel\')+"list").toggle(); - jQuery(this).toggle(); }); }); diff --git a/htdocs/core/js/lib_foot.js.php b/htdocs/core/js/lib_foot.js.php index 3d708101d13..0d9b0b59ff4 100644 --- a/htdocs/core/js/lib_foot.js.php +++ b/htdocs/core/js/lib_foot.js.php @@ -81,13 +81,31 @@ print "});\n"; // Wrapper to manage dropdown if (! defined('JS_JQUERY_DISABLE_DROPDOWN')) { - print "\n/* JS CODE TO ENABLE dropdown */\n"; + print "\n/* JS CODE TO ENABLE dropdown (hamburger, linkto, ...) */\n"; print ' - jQuery(document).ready(function () { - $(".dropdown dt a").on(\'click\', function () { - console.log("We click on dropdown"); - //console.log($(this).parent().parent().find(\'dd ul\')); - $(this).parent().parent().find(\'dd ul\').slideToggle(\'fast\'); + jQuery(document).ready(function () { + var lastopendropdown = null; + + // Click onto the link "link to" or "hamburger", toggle dropdown + $(".dropdown dt a").on(\'click\', function () { + console.log("toggle dropdown dt a"); + + //$(this).parent().parent().find(\'dd ul\').slideToggle(\'fast\'); + $(this).parent().parent().find(\'dd ul\').toggleClass("open"); + + if ($(this).parent().parent().find(\'dd ul\').hasClass("open")) { + lastopendropdown = $(this).parent().parent().find(\'dd ul\'); + //console.log(lastopendropdown); + } else { + // We closed the dropdown for hamburger selectfields + if ($("input:hidden[name=formfilteraction]").val() == "listafterchangingselectedfields") { + console.log("resubmit the form saved into lastopendropdown after clicking on hamburger"); + //$(".dropdown dt a").parents(\'form:first\').submit(); + //$(".dropdown dt a").closest("form").submit(); + lastopendropdown.closest("form").submit(); + } + } + // Note: Did not find a way to get exact height (value is update at exit) so i calculate a generic from nb of lines heigthofcontent = 21 * $(this).parent().parent().find(\'dd div ul li\').length; if (heigthofcontent > 300) heigthofcontent = 300; // limited by max-height on css .dropdown dd ul @@ -101,19 +119,32 @@ if (! defined('JS_JQUERY_DISABLE_DROPDOWN')) console.log("We reposition top by "+pix); $(this).parent().parent().find(\'dd\').css("top", pix); } - // $(".dropdown dd ul").slideToggle(\'fast\'); - }); - $(".dropdowncloseonclick").on(\'click\', function () { - console.log("Link has class dropdowncloseonclick, so we close/hide the popup ul"); - $(this).parent().parent().hide(); }); - $(document).bind(\'click\', function (e) { - //console.log("We click outside of dropdown, so we close it."); - var $clicked = $(e.target); - if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); + // Click on a link into the popup "link to" or other dropdown that ask to close drop down on element click, so close dropdown + $(".dropdowncloseonclick").on(\'click\', function () { + console.log("Link has class dropdowncloseonclick, so we close/hide the popup ul"); + //$(this).parent().parent().hide(); // $(this).parent().parent() is ul + $(this).parent().parent().removeClass("open"); // $(this).parent().parent() is ul }); - }); + + // Click outside of any dropdown + $(document).bind(\'click\', function (e) { + var $clicked = $(e.target); // This is element we click on + if (!$clicked.parents().hasClass("dropdown")) { + console.log("close dropdown dd ul - we click outside"); + //$(".dropdown dd ul").hide(); + $(".dropdown dd ul").removeClass("open"); + + if ($("input:hidden[name=formfilteraction]").val() == "listafterchangingselectedfields") { + console.log("resubmit form saved into lastopendropdown after clicking outside of dropdown and having change selectlist from selectlist field of hamburger dropdown"); + //$(".dropdown dt a").parents(\'form:first\').submit(); + //$(".dropdown dt a").closest("form").submit(); + lastopendropdown.closest("form").submit(); + } + } + }); + }); '; } diff --git a/htdocs/main.inc.php b/htdocs/main.inc.php index 0f1f0e01a87..8c1cdd829de 100644 --- a/htdocs/main.inc.php +++ b/htdocs/main.inc.php @@ -1898,13 +1898,15 @@ function top_menu_user() $( document ).ready(function() { $(document).on("click", function(event) { if (!$(event.target).closest("#topmenu-login-dropdown").length) { - // Hide the menus. + //console.log("close login dropdown"); + // Hide the menus. $("#topmenu-login-dropdown").removeClass("open"); } }); $("#topmenu-login-dropdown .dropdown-toggle").on("click", function(event) { - event.preventDefault(); + console.log("toggle login dropdown"); + event.preventDefault(); $("#topmenu-login-dropdown").toggleClass("open"); }); @@ -1954,14 +1956,14 @@ function top_menu_bookmark() $( document ).ready(function() { $(document).on("click", function(event) { if (!$(event.target).closest("#topmenu-bookmark-dropdown").length) { - console.log("close"); + //console.log("close bookmark dropdown - we click outside"); // Hide the menus. $("#topmenu-bookmark-dropdown").removeClass("open"); } }); $("#topmenu-bookmark-dropdown .dropdown-toggle").on("click", function(event) { - console.log("toggle"); + console.log("toggle bookmark dropdown"); openBookMarkDropDown(); }); @@ -2077,7 +2079,7 @@ function top_menu_search() // close drop down $(document).on("click", function(event) { if (!$(event.target).closest("#topmenu-global-search-dropdown").length) { - console.log("click close"); + console.log("click close search - we click outside"); // Hide the menus. $("#topmenu-global-search-dropdown").removeClass("open"); } @@ -2085,7 +2087,7 @@ function top_menu_search() // Open drop down $("#topmenu-global-search-dropdown .dropdown-toggle").on("click", function(event) { - console.log("click open"); + console.log("toggle search dropdown"); openGlobalSearchDropDown(); }); diff --git a/htdocs/theme/eldy/dropdown.inc.php b/htdocs/theme/eldy/dropdown.inc.php index 580e9366bc1..69716ce5be3 100644 --- a/htdocs/theme/eldy/dropdown.inc.php +++ b/htdocs/theme/eldy/dropdown.inc.php @@ -9,7 +9,7 @@ button.dropdown-item.global-search-item { outline: none; } -.open>.dropdown-search, .open>.dropdown-bookmark, .open>.dropdown-menu{ +.open>.dropdown-search, .open>.dropdown-bookmark, .open>.dropdown-menu, .dropdown dd ul.open { display: block; } diff --git a/htdocs/theme/eldy/global.inc.php b/htdocs/theme/eldy/global.inc.php index f5c1e328a23..f280cb13d57 100644 --- a/htdocs/theme/eldy/global.inc.php +++ b/htdocs/theme/eldy/global.inc.php @@ -4983,7 +4983,7 @@ input.select2-input { } .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--colortext); - background-color: var(--colorbackvmenu1); + /* background-color: var(--colorbackvmenu1); */ } .select2-default { color: #999 !important; @@ -5079,8 +5079,8 @@ input.select2-input { box-shadow: none !important; } .select2-dropdown { - background-color: var(--colorbackvmenu1); - border: 1px solid var(--colorbackvmenu1);; + /*background-color: var(--colorbackvmenu1); + border: 1px solid var(--colorbackvmenu1); */ box-shadow: 1px 2px 10px var(--colorbackvmenu1); } .select2-dropdown-open { @@ -5405,9 +5405,9 @@ dl.dropdown { .dropdown dd ul li span { color: #888; } -.dropdown dd ul li a:hover { +/*.dropdown dd ul li a:hover { background-color: var(--inputbackgroundcolor); -} +}*/ dd.dropdowndd ul li { text-overflow: ellipsis; overflow: hidden;