From ac57b61b18bbae1cc79e6803911e1b113165b3d0 Mon Sep 17 00:00:00 2001
From: gloas <gloas@afi-sa.fr>
Date: Fri, 18 May 2018 13:01:39 +0200
Subject: [PATCH] hotline #75198 improve treeSelect behavior and css
---
public/admin/js/treeselect/treeselect.css | 56 ++++++++++++++++-------
public/admin/js/treeselect/treeselect.js | 19 ++++----
2 files changed, 47 insertions(+), 28 deletions(-)
diff --git a/public/admin/js/treeselect/treeselect.css b/public/admin/js/treeselect/treeselect.css
index 4a3842272b6..db6cd84f736 100644
--- a/public/admin/js/treeselect/treeselect.css
+++ b/public/admin/js/treeselect/treeselect.css
@@ -14,7 +14,7 @@
}
.ui-treeselect-selected-items {
- overflow-y: auto;
+ overflow-y: scroll;
}
.ui-treeselect-items-tree ,
@@ -70,7 +70,6 @@
}
.ui-treeselect li {
- padding: 2px 0px 2px 0px;
list-style-type: none;
}
@@ -79,12 +78,16 @@
}
.ui-treeselect-selected-items .hint {
- float: right;
position: absolute;
- margin-top: -5px;
- margin-left: 50px;
- padding: 10px;
- width: 200px;
+ z-index: 1;
+ top: 28px;
+ left: -1px;
+ padding: 1ex 0.5em;
+ max-width: 200px;
+ overflow: hidden;
+ border: 1px solid !important;
+ border-radius: 5px;
+ background-color: #EEE;
}
.ui-treeselect-selected-items .hint li {
@@ -102,14 +105,34 @@
.ui-treeselect-selected-items li {
padding: 0px;
display: block;
- width: 100%;
+}
+
+.ui-treeselect-selected-items ul > li {
+ padding: 0.5ex 0.3em;
+ margin-bottom: 0.5ex;
+ border: 1px solid;
+ position: relative;
}
.ui-treeselect-selected-items li a {
- padding: 5px 20px 5 px 5px;
- margin-left: auto;
- margin-right: auto;
- display: block;
+ display: inline-block;
+ width: 85%;
+ background: none !important;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ vertical-align: top;
+ border: none !important;
+ padding: 0;
+ white-space: nowrap;
+}
+
+.ui-treeselect-selected-items ul > li:last-child {
+ margin-bottom: 80px;
+}
+
+.ui-treeselect-selected-items li a img {
+ margin-right: 0.3em;
+ vertical-align: top;
}
@@ -120,11 +143,10 @@
.remove_button {
background: url('remove.gif') no-repeat center center;
- display: block;
- width: 20px;
- height: 20px;
- float: right;
- margin: -25px 5px 0px 0px;
+ display: inline-block;
+ width: 16px;
+ height: 16px;
+ vertical-align: top;
}
diff --git a/public/admin/js/treeselect/treeselect.js b/public/admin/js/treeselect/treeselect.js
index 85da77a18fd..0c88d923e45 100644
--- a/public/admin/js/treeselect/treeselect.js
+++ b/public/admin/js/treeselect/treeselect.js
@@ -142,34 +142,32 @@
if (li.parents('.ui-treeselect-selected-items').length == 0) return;
var hint =
- $('<div class="hint ui-widget ui-corner-all ui-state-active" style="display:none"/>').
- hide().
- appendTo(li);
+ $('<div class="hint ui-widget ui-corner-all ui-state-active" style="display: none;"/>')
+ .appendTo(li);
- hint.delay(1000).fadeIn('fast');
+ hint.delay(400).fadeIn('fast');
var sourceLI = this._findConnectedIn(li, this.itemsTree);
this._getAnchorTreeFor(sourceLI).
slice(0, -1).
each(function(index, element){
- hint = $("<li>"+$(element).text()+"</li>").
- appendTo($("<ul></ul>")).
- appendTo(hint);
+ hint = $("<li>" + $(element).text() + "</li>")
+ .appendTo($("<ul></ul>"))
+ .appendTo(hint);
});
},
_onMouseExitsLI: function(li) {
- var anchor = li.children('a');
+ var anchor = li.children('a');
anchor.
addClass(anchor.data('on_mouse_enter_classes')).
removeData('on_mouse_enter_classes').
removeClass("ui-state-hover");
-
- this.selectedItems.find('.hint').remove();
+ this.selectedItems.find('.hint').fadeOut();
},
@@ -302,7 +300,6 @@
{
$(this).remove();
});
- li.closest('ul').find('li input').prop('checked', false);
li.children('input').prop('checked', false);
li.find("li input").prop('disabled', false);
li.children('a').removeClass('ui-state-active');
--
GitLab