Wavyzz/dolibarr-fork
2
0
Fork 0
forked from Wavyzz/dolibarr
Code Pull Requests Activity

Fix drop down ergonomy and feedback (#30808)

Browse Source
This commit is contained in:
John BOTELLA
2024-08-30 15:48:52 +02:00
committed by GitHub
parent 98b496ada0
commit 2a326d02ed
3 changed files with 34 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
htdocs/core/js/lib_head.js.php
View File

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

7
htdocs/theme/eldy/btn.inc.php
View File

@@ -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;

18
htdocs/theme/eldy/dropdown.inc.php
View File

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