style autocomplete popup in themes

diff --git a/js/fk.autocomplete.js b/js/fk.autocomplete.js
index bf96e69373961653d9a420ebec89b77c59f731b5..e58ed18cd3a8f24807d19750dacc370200e7c1f5 100644 (file)
--- a/js/fk.autocomplete.js
+++ b/js/fk.autocomplete.js
@@ -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 );

diff --git a/view/theme/dispy/style.css b/view/theme/dispy/style.css
index 3c92a877b5ee60f770cbb33a644cc59ba335aef0..0d8b546980512030b34d252fa1494098e8d4b905 100644 (file)
--- a/view/theme/dispy/style.css
+++ b/view/theme/dispy/style.css
@@ -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;
+}

diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index b870f6bd5b7ef11705694e7a1d53917defb3085c..d595c7495ab40ccba81cee205c46a5690b5d3310 100644 (file)
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -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;
+}

diff --git a/view/theme/loozah/style.css b/view/theme/loozah/style.css
index 4470723908310f7b3e0ab5ec0763f8de2c489e3d..42b99b08cad46a1be6448276403870a0568f62dd 100644 (file)
--- a/view/theme/loozah/style.css
+++ b/view/theme/loozah/style.css
@@ -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;
+}
+
 

diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index 1fbeb7ae273370edf71b9b929ce0fed8179cf4e3..ea699d5c6f9d2250e0b7e5d3267a210506652fbb 100644 (file)
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -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; }

diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 5852142331fcf77a7e3d7652ad3bb2a08579e7ff..95c3d087ede6430744014e58fa19439c009ba96c 100644 (file)
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -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;
 }

diff --git a/view/theme/testbubble/style.css b/view/theme/testbubble/style.css
index b7c20ab17c86f8d0ecb981bd490b0f54281e11a3..9c04ec4bafcbb37923cc5df60422d54457be9dee 100644 (file)
--- a/view/theme/testbubble/style.css
+++ b/view/theme/testbubble/style.css
@@ -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;
+}