fix css and bug

This commit is contained in:
hystepik 2023-03-22 15:48:33 +01:00
parent 52dab54b97
commit bb2aa2701a
3 changed files with 33 additions and 13 deletions

View File

@ -3333,10 +3333,12 @@ function dragAndDropFileUpload($htmlname)
$out .= "<script>";
$out .= '
jQuery(document).ready(function() {
var enterTargetDragDrop = null;
$("#'.$htmlname.'").addClass("cssDragDropArea");
$(".cssDragDropArea").on("dragenter", function(ev) {
// Entering drop area. Highlight area
console.log("We add class highlightDragDropArea")
enterTargetDragDrop = ev.target;
$(this).addClass("highlightDragDropArea");
$("#'.$htmlname.'Message").removeClass("hidden");
ev.preventDefault();
@ -3344,9 +3346,11 @@ function dragAndDropFileUpload($htmlname)
$(".cssDragDropArea").on("dragleave", function(ev) {
// Going out of drop area. Remove Highlight
console.log("We remove class highlightDragDropArea")
$("#'.$htmlname.'Message").addClass("hidden");
$(this).removeClass("highlightDragDropArea");
if (enterTargetDragDrop == ev.target){
console.log("We remove class highlightDragDropArea")
$("#'.$htmlname.'Message").addClass("hidden");
$(this).removeClass("highlightDragDropArea");
}
});
$(".cssDragDropArea").on("dragover", function(ev) {

View File

@ -7597,27 +7597,21 @@ div.clipboardCPValue.hidewithsize {
.cssDragDropArea{
position: relative;
border: 2px rgba(123, 123, 123, .2) dashed !important;
padding: 10px !important;
}
.highlightDragDropArea{
border: 2px #000 dashed !important;
background-color: #666 !important;
}
.highlightDragDropArea * {
pointer-events: none;
background-color: #bbbbbb !important;
}
.highlightDragDropArea * :not(.dragDropAreaMessage *){
opacity:0.5;
opacity:0.7;
filter: blur(3px) grayscale(100%);
}
.dragDropAreaMessage {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
top:50%;
transform: translate(-50%, -50%);
text-align:center;
/*BIEN PLACER CETTE DIV */
}
/* ============================================================================== */

View File

@ -7508,6 +7508,28 @@ div.clipboardCPValue.hidewithsize {
zoom: 0.20;
}
/* ============================================================================== */
/* For drag and drop feature */
/* ============================================================================== */
.cssDragDropArea{
position: relative;
}
.highlightDragDropArea{
border: 2px #000 dashed !important;
background-color: #bbbbbb !important;
}
.highlightDragDropArea * :not(.dragDropAreaMessage *){
opacity:0.7;
filter: blur(3px) grayscale(100%);
}
.dragDropAreaMessage {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
text-align:center;
}
/* ============================================================================== */
/* CSS style used for small screen */