style autocomplete popup in themes
This commit is contained in:
Fabio Comuni
parent
dc212de960
commit
951c73d825
7 changed files with 166 additions and 13 deletions
|
|
@ -18,19 +18,21 @@ function ACPopup(elm,backend_url){
|
|||
w = $(elm).width();
|
||||
h = $(elm).height();
|
||||
style.top=style.top+h;
|
||||
style['max-height'] = '150px';
|
||||
style.width = w;
|
||||
style.position = 'absolute';
|
||||
/* style['max-height'] = '150px';
|
||||
style.border = '1px solid red';
|
||||
style.background = '#cccccc';
|
||||
style.position = 'absolute';
|
||||
|
||||
style.overflow = 'auto';
|
||||
style['z-index'] = '100000';
|
||||
*/
|
||||
style.display = 'none';
|
||||
|
||||
this.cont = $("<div class='acpopup'></div>");
|
||||
this.cont.css(style);
|
||||
|
||||
$(elm).after(this.cont);
|
||||
$("body").append(this.cont);
|
||||
}
|
||||
ACPopup.prototype.close = function(){
|
||||
$(this.cont).remove();
|
||||
|
|
@ -40,7 +42,7 @@ ACPopup.prototype.search = function(text){
|
|||
var that = this;
|
||||
this.searchText=text;
|
||||
if (this.kp_timer) clearTimeout(this.kp_timer);
|
||||
this.kp_timer = setTimeout( function(){that._search();}, 1000);
|
||||
this.kp_timer = setTimeout( function(){that._search();}, 500);
|
||||
}
|
||||
ACPopup.prototype._search = function(){
|
||||
console.log("_search");
|
||||
|
|
@ -104,8 +106,8 @@ ACPopup.prototype.onkey = function(event){
|
|||
}
|
||||
|
||||
if (event.keyCode == '38' || event.keyCode == '40' ) {
|
||||
this.cont.children().css({background:'#cccccc'}).removeClass('selected');
|
||||
$(this.cont.children()[this.idsel]).css({background:'#ccccff'}).addClass('selected');
|
||||
this.cont.children().removeClass('selected');
|
||||
$(this.cont.children()[this.idsel]).addClass('selected');
|
||||
}
|
||||
|
||||
if (event.keyCode == '27') { //ESC
|
||||
|
|
@ -147,9 +149,11 @@ function ContactAutocomplete(element,backend_url){
|
|||
* jQuery plugin 'contact_autocomplete'
|
||||
*/
|
||||
(function( $ ){
|
||||
var map=new Array();
|
||||
$.fn.contact_autocomplete = function(backend_url) {
|
||||
this.each(function(){
|
||||
new ContactAutocomplete(this, backend_url);
|
||||
if (this in map) return;
|
||||
map[this] = new ContactAutocomplete(this, backend_url);
|
||||
});
|
||||
};
|
||||
})( jQuery );
|
||||
|
|
|
|||
|
|
@ -1250,3 +1250,24 @@ footer { display: block; margin: 50px 20%; clear: both; }
|
|||
/** /acl **/
|
||||
|
||||
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height:150px;
|
||||
background-color:#555753;
|
||||
color: #FFFFFF;
|
||||
overflow:auto;
|
||||
z-index:100000;
|
||||
border:1px solid #cccccc;
|
||||
}
|
||||
.acpopupitem {
|
||||
background-color:#555753; padding: 4px;
|
||||
clear:left;
|
||||
}
|
||||
.acpopupitem img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.acpopupitem.selected {
|
||||
color: #2e3436; background-color: #eeeeec;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2833,3 +2833,24 @@ a.mail-list-link {
|
|||
.type-text { background-position: -60px 0px; }
|
||||
.type-unkn { background-position: -80px 0px; }
|
||||
|
||||
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height:150px;
|
||||
background-color:#ffffff;
|
||||
overflow:auto;
|
||||
z-index:100000;
|
||||
border:1px solid #cccccc;
|
||||
}
|
||||
.acpopupitem {
|
||||
background-color:#ffffff; padding: 4px;
|
||||
clear:left;
|
||||
}
|
||||
.acpopupitem img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.acpopupitem.selected {
|
||||
color: #FFFFFF; background: #3465A4;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2745,9 +2745,31 @@ a.mail-list-link {
|
|||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.type-video { background-position: 0px; 0px; }
|
||||
.type-image { background-position: -20px; 0px; }
|
||||
.type-audio { background-position: -40px; 0px; }
|
||||
.type-text { background-position: -60px; 0px; }
|
||||
.type-unkn { background-position: -80px; 0px; }
|
||||
.type-video { background-position: 0px 0px; }
|
||||
.type-image { background-position: -20px 0px; }
|
||||
.type-audio { background-position: -40px 0px; }
|
||||
.type-text { background-position: -60px 0px; }
|
||||
.type-unkn { background-position: -80px 0px; }
|
||||
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height:150px;
|
||||
background-color:#ffffff;
|
||||
overflow:auto;
|
||||
z-index:100000;
|
||||
border:1px solid #cccccc;
|
||||
}
|
||||
.acpopupitem {
|
||||
background-color:#ffffff; padding: 4px;
|
||||
clear:left;
|
||||
}
|
||||
.acpopupitem img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.acpopupitem.selected {
|
||||
color: #FFFFFF; background: #3465A4;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -192,6 +192,29 @@ ul.menu-popup {
|
|||
|
||||
}
|
||||
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height:150px;
|
||||
background-color:@MenuBg;
|
||||
color: @Menu;
|
||||
border:1px solid #MenuBorder;
|
||||
overflow:auto;
|
||||
z-index:100000;
|
||||
.shadow();
|
||||
}
|
||||
.acpopupitem {
|
||||
color: @MenuItem; padding: 4px;
|
||||
clear:left;
|
||||
img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
&.selected{
|
||||
background-color: @MenuItemHoverBg;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#nav-notifications-menu {
|
||||
width: 400px;
|
||||
img { float: left; margin-right: 5px; }
|
||||
|
|
|
|||
|
|
@ -388,6 +388,30 @@ ul.menu-popup .empty {
|
|||
text-align: center;
|
||||
color: #9eabb0;
|
||||
}
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height: 150px;
|
||||
background-color: #ffffff;
|
||||
color: #2d2d2d;
|
||||
border: 1px solid #MenuBorder;
|
||||
overflow: auto;
|
||||
z-index: 100000;
|
||||
-webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
|
||||
-moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.acpopupitem {
|
||||
color: #2d2d2d;
|
||||
padding: 4px;
|
||||
clear: left;
|
||||
}
|
||||
.acpopupitem img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.acpopupitem.selected {
|
||||
background-color: #bdcdd4;
|
||||
}
|
||||
#nav-notifications-menu {
|
||||
width: 400px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -823,7 +823,7 @@ profile-jot-banner-wrapper {
|
|||
/* ======== */
|
||||
|
||||
.tabs {
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
list-style: none;
|
||||
padding: 10px;
|
||||
margin: 0px 0px 10px 0px;
|
||||
|
|
@ -3086,3 +3086,41 @@ ul.menu-popup {
|
|||
#jGrowl {
|
||||
z-index: 20000;
|
||||
}
|
||||
|
||||
/* autocomplete popup */
|
||||
.acpopup {
|
||||
max-height:150px;
|
||||
overflow:auto;
|
||||
z-index:100000;
|
||||
|
||||
color: #2e3436;
|
||||
border-top: 0px;
|
||||
background: #eeeeee;
|
||||
border-right: 1px solid #dddddd;
|
||||
border-left: 1px solid #dddddd;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
-webkit-border-radius: 0px 5px 5px 5px;
|
||||
-moz-border-radius: 0px 5px 5px 5px;
|
||||
border-radius: 0px 5px 5px 5px;
|
||||
-moz-box-shadow: 3px 3px 4px #959494;
|
||||
-webkit-box-shadow: 3px 3px 4px #959494;
|
||||
box-shadow: 3px 3px 4px #959494;
|
||||
|
||||
}
|
||||
.acpopupitem {
|
||||
color: #2e3436; padding: 4px;
|
||||
clear:left;
|
||||
}
|
||||
.acpopupitem img {
|
||||
float: left;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.acpopupitem.selected {
|
||||
color: #efefef;
|
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #b20202), color-stop(1, #d60808) );
|
||||
background:-moz-linear-gradient( center top, #b20202 5%, #d60808 100% );
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#b20202', endColorstr='#d60808');
|
||||
background-color:#b20202;
|
||||
order-bottom: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue