rework autocomplete: css work

diff --git a/js/autocomplete.js b/js/autocomplete.js
index aa4494b714dad5f210ef9bce28fa61983cd0c7f1..1f7df011d32ea6f645c345891ab67a72bed8b98f 100644 (file)
--- a/js/autocomplete.js
+++ b/js/autocomplete.js
@@ -1,10 +1,14 @@
 /**
- * Red people autocomplete
+ * Friendica people autocomplete
  *
  * require jQuery, jquery.textcomplete
  */
 function contact_search(term, callback, backend_url, type) {
 
+       // Check if there is a conversation id to include the unkonwn contacts of the conversation
+       var conv_id = document.activeElement.id.match(/\d+$/);
+
+
        // Check if there is a cached result that contains the same information we would get with a full server-side search
        var bt = backend_url+type;
        if(!(bt in contact_search.cache)) contact_search.cache[bt] = {};
@@ -27,6 +31,9 @@ function contact_search(term, callback, backend_url, type) {
                type:type,
        };
 
+       if(conv_id !== null)
+               postdata['conversation'] = conv_id[0];
+
 
        $.ajax({
                type:'POST',
@@ -54,7 +61,7 @@ function contact_format(item) {
                var desc = ((item.label) ? item.nick + ' ' + item.label : item.nick);
                if(typeof desc === 'undefined') desc = '';
                if(desc) desc = ' ('+desc+')';
-               return "<div class='{0}' title='{4}'><img class='dropdown-menu-img-sm' src='{1}'><span class='contactname'>{2}</span><span class='dropdown-sub-text'>{3}</span><div class='clear'></div></div>".format(item.taggable, item.photo, item.name, desc, item.link);
+               return "<div class='{0}' title='{4}'><img class='acpopup-img' src='{1}'><span class='acpopup-contactname'>{2}</span><span class='acpopup-sub-text'>{3}</span><div class='clear'></div></div>".format(item.taggable, item.photo, item.name, desc, item.link);
        }
        else
                return "<div>" + item.text + "</div>";
@@ -190,3 +197,163 @@ function submit_form(e) {
                        a.on('textComplete:select', function(e, value, strategy) { onselect(value); });
        };
 })( jQuery );
+
+
+/**
+ * Friendica people autocomplete legacy
+ * code which is needed for tinymce
+ *
+ * require jQuery, jquery.textareas
+ */
+
+function ACPopup(elm,backend_url){
+       this.idsel=-1;
+       this.element = elm;
+       this.searchText="";
+       this.ready=true;
+       this.kp_timer = false;
+       this.url = backend_url;
+
+       this.conversation_id = null;
+       var conv_id = this.element.id.match(/\d+$/);
+       if (conv_id) this.conversation_id = conv_id[0];
+       console.log("ACPopup elm id",this.element.id,"conversation",this.conversation_id);
+
+       var w = 530;
+       var h = 130;
+
+
+       if(tinyMCE.activeEditor == null) {
+               style = $(elm).offset();
+               w = $(elm).width();
+               h = $(elm).height();
+       }
+       else {
+               // I can't find an "official" way to get the element who get all
+               // this fraking thing that is tinyMCE.
+               // This code will broke again at some point...
+               var container = $(tinyMCE.activeEditor.getContainer()).find("table");
+               style = $(container).offset();
+               w = $(container).width();
+               h = $(container).height();
+       }
+
+       style.top=style.top+h;
+       style.width = w;
+       style.position = 'absolute';
+       /*      style['max-height'] = '150px';
+               style.border = '1px solid red';
+               style.background = '#cccccc';
+
+               style.overflow = 'auto';
+               style['z-index'] = '100000';
+       */
+       style.display = 'none';
+
+       this.cont = $("<div class='acpopup-mce'></div>");
+       this.cont.css(style);
+
+       $("body").append(this.cont);
+    }
+
+ACPopup.prototype.close = function(){
+       $(this.cont).remove();
+       this.ready=false;
+}
+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();}, 500);
+}
+
+ACPopup.prototype._search = function(){
+       console.log("_search");
+       var that = this;
+       var postdata = {
+               start:0,
+               count:100,
+               search:this.searchText,
+               type:'c',
+               conversation: this.conversation_id,
+       }
+
+       $.ajax({
+               type:'POST',
+               url: this.url,
+               data: postdata,
+               dataType: 'json',
+               success:function(data){
+                       that.cont.html("");
+                       if (data.tot>0){
+                               that.cont.show();
+                               $(data.items).each(function(){
+                                       var html = "<img src='{0}' height='16px' width='16px'>{1} ({2})".format(this.photo, this.name, this.nick);
+                                       var nick = this.nick.replace(' ','');
+                                       if (this.id!=='')  nick += '+' + this.id;
+                                       that.add(html, nick + ' - ' + this.link);
+                               });
+                       } else {
+                               that.cont.hide();
+                       }
+               }
+       });
+
+}
+
+ACPopup.prototype.add = function(label, value){
+       var that=this;
+       var elm = $("<div class='acpopupitem' title='"+value+"'>"+label+"</div>");
+       elm.click(function(e){
+               t = $(this).attr('title').replace(new RegExp(' \- .*'),'');
+               if(typeof(that.element.container) === "undefined") {
+                       el=$(that.element);
+                       sel = el.getSelection();
+                       sel.start = sel.start- that.searchText.length;
+                       el.setSelection(sel.start,sel.end).replaceSelectedText(t+' ').collapseSelection(false);
+                       that.close();
+               }
+               else {
+                       txt = tinyMCE.activeEditor.getContent();
+                       //                      alert(that.searchText + ':' + t);
+                       newtxt = txt.replace('@' + that.searchText,'@' + t +' ');
+                       tinyMCE.activeEditor.setContent(newtxt);
+                       tinyMCE.activeEditor.focus();
+                       that.close();
+               }
+       });
+       $(this.cont).append(elm);
+}
+
+ACPopup.prototype.onkey = function(event){
+       if (event.keyCode == '13') {
+               if(this.idsel>-1) {
+                       this.cont.children()[this.idsel].click();
+                       event.preventDefault();
+               }
+               else
+                       this.close();
+       }
+       if (event.keyCode == '38') { //cursor up
+               cmax = this.cont.children().size()-1;
+               this.idsel--;
+               if (this.idsel<0) this.idsel=cmax;
+               event.preventDefault();
+       }
+       if (event.keyCode == '40' || event.keyCode == '9') { //cursor down
+               cmax = this.cont.children().size()-1;
+               this.idsel++;
+               if (this.idsel>cmax) this.idsel=0;
+               event.preventDefault();
+       }
+
+       if (event.keyCode == '38' || event.keyCode == '40' || event.keyCode == '9') {
+               this.cont.children().removeClass('selected');
+               $(this.cont.children()[this.idsel]).addClass('selected');
+       }
+
+       if (event.keyCode == '27') { //ESC
+               this.close();
+       }
+}
+

diff --git a/view/global.css b/view/global.css
index 41af643ecc49ca37447b9eedee335985933840b1..0857cba27be2de3e6a62dfc3335cbfc0d8dd3aac 100644 (file)
--- a/view/global.css
+++ b/view/global.css
@@ -203,12 +203,67 @@ key { display: inline; background-color: #eee; color: #666; padding:0.2em; font-
 
 /* fields help text */
 .field .field_help {
-    clear: left;
+  clear: left;
 }
 
 /* notifications unseen */
 .notify-unseen { background-color: #cceeFF; }
 
+/* autocomplete popup */
+
+ul.acpopup {
+  list-style: none;
+  float: left;
+  min-width: 160px;
+  padding: 5px 0;
+  margin: 2px 0 0;
+}
+nav .acpopup {
+  width: 290px;
+  margin-left: -35px;
+  max-height: 450px;
+  max-width: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  margin-top: 0px;
+}
+img.acpopup-img {
+  float: left;
+  width: 36px;
+  height: 36px;
+  margin-right: 5px;
+  vertical-align: middle;
+}
+.acpopup-contactname {
+  padding-top: 2px;
+  font-weight: bold;
+  line-height: 1em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.acpopup-sub-text {
+  color: #777;
+  font-size: 0.833em;
+  line-height: 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: block;
+}
+.textcomplete-item a {
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  clear: both;
+  white-space: nowrap;
+  padding: 3px 20px;
+  display: block;
+}
+.textcomplete-item a:hover {
+  text-decoration: none;
+}
+
 /* plain text editor upload/select popup */
 
 .fbrowser .path a { padding: 5px; }

diff --git a/view/templates/msg-header.tpl b/view/templates/msg-header.tpl
index 86598bbf6ce7d6e612fd8a08935a4e4b93c6c2f9..9b1a92ef5fc9938d47d26d354660c43017902c59 100644 (file)
--- a/view/templates/msg-header.tpl
+++ b/view/templates/msg-header.tpl
@@ -44,7 +44,7 @@ if(plaintext != 'none') {
        });
 }
 else
-       $("#prvmail-text").contact_autocomplete(baseurl+"/acl");
+       $("#prvmail-text").editor_autocomplete(baseurl+"/acl");
 
 
 </script>

diff --git a/view/templates/wallmsg-header.tpl b/view/templates/wallmsg-header.tpl
index f03f496fe2948d060e2eb9db03b03f4b1a365480..2d4cd23797698ac4403c13809a93b6670886885d 100644 (file)
--- a/view/templates/wallmsg-header.tpl
+++ b/view/templates/wallmsg-header.tpl
@@ -44,7 +44,7 @@ if(plaintext != 'none') {
        });
 }
 else
-       $("#prvmail-text").contact_autocomplete(baseurl+"/acl");
+       $("#prvmail-text").editor_autocomplete(baseurl+"/acl");
 
 
 </script>

diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 787e52600c4303071820f9a10c64e2f32dbfe440..53d034d8659f051ae62feaef4128ac662e382444 100644 (file)
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -3308,6 +3308,12 @@ aside input[type='text'] {
 
 /* autocomplete popup */
 .acpopup {
+       background-color:#ffffff;
+       overflow:auto;
+       z-index:100000;
+       border:1px solid #cccccc;
+}
+.acpopup-mce {
        max-height:150px;
        background-color:#ffffff;
        overflow:auto;
@@ -3326,6 +3332,12 @@ aside input[type='text'] {
 .acpopupitem.selected {
        color: #FFFFFF; background: #3465A4;
 }
+.textcomplete-item.active {
+       color: #FFFFFF; background: #3465A4;
+}
+.active a .acpopup-sub-text {
+       color: #fff;
+}
 
 /* popup notifications */
 div.jGrowl div.notice {

diff --git a/view/theme/frost-mobile/js/main.js b/view/theme/frost-mobile/js/main.js
index 7e2880594d81c9310317525515b177cd47f8fe70..3ec2421df2f0a9888db6fc2b7efe1d2db08fa3e5 100644 (file)
--- a/view/theme/frost-mobile/js/main.js
+++ b/view/theme/frost-mobile/js/main.js
@@ -388,7 +388,7 @@
                                $('body').css('cursor', 'auto');
                        }
                        /* autocomplete @nicknames */
-                       $(".comment-edit-form  textarea").contact_autocomplete(baseurl+"/acl");
+                       $(".comment-edit-form  textarea").editor_autocomplete(baseurl+"/acl");
 
                        // setup videos, since VideoJS won't take care of any loaded via AJAX
                        if(typeof videojs != 'undefined') videojs.autoSetup();

diff --git a/view/theme/frost-mobile/js/theme.js b/view/theme/frost-mobile/js/theme.js
index 8133c602c86c0935894ad3763c2c90167d8d291a..c0213708749d46b8dd12cd6010d36a032fdd7b5c 100644 (file)
--- a/view/theme/frost-mobile/js/theme.js
+++ b/view/theme/frost-mobile/js/theme.js
@@ -121,7 +121,7 @@ $(document).ready(function() {
                        a.setOptions({ params: { type: 'a' }});
                        break;
                case 'display-head':
-                       $(".comment-wwedit-wrapper textarea").contact_autocomplete(baseurl+"/acl");
+                       $(".comment-wwedit-wrapper textarea").editor_autocomplete(baseurl+"/acl");
                        break;
                default:
                        break;
@@ -286,7 +286,7 @@ function initEditor(cb){
                if(plaintext == 'none') {
 //                     $("#profile-jot-text-loading").hide();
                        $("#profile-jot-text").css({ 'height': 200, 'color': '#000' });
-                       $("#profile-jot-text").contact_autocomplete(baseurl+"/acl");
+                       $("#profile-jot-text").editor_autocomplete(baseurl+"/acl");
                        editor = true;
 /*                     $("a#jot-perms-icon").colorbox({
                                'inline' : true,

diff --git a/view/theme/frost-mobile/style.css b/view/theme/frost-mobile/style.css
index a99cc17a910d3d5e27238368a52a9b70ddbf28a1..36b621b76677247157cd45ea4dd4d7dbbcce0242 100644 (file)
--- a/view/theme/frost-mobile/style.css
+++ b/view/theme/frost-mobile/style.css
@@ -4210,6 +4210,64 @@ aside input[type='text'] {
 .acpopupitem.selected {\r
        color: #FFFFFF; background: #3465A4;\r
 }\r
+ul.acpopup {\r
+       list-style: none;\r
+       float: left;\r
+       min-width: 160px;\r
+       padding: 5px 0;\r
+       margin: 2px 0 0;\r
+}\r
+nav .acpopup {\r
+       width: 290px;\r
+       margin-left: -35px;\r
+       max-height: 450px;\r
+       max-width: 300px;\r
+       overflow-y: auto;\r
+       overflow-x: hidden;\r
+       margin-top: 0px;\r
+}\r
+img.acpopup-img {\r
+       float: left;\r
+       width: 36px;\r
+       height: 36px;\r
+       margin-right: 5px;\r
+       vertical-align: middle;\r
+}\r
+.acpopup-contactname {\r
+       padding-top: 2px;\r
+       font-weight: bold;\r
+       line-height: 1em;\r
+       white-space: nowrap;\r
+       overflow: hidden;\r
+       text-overflow: ellipsis;\r
+       display: block;\r
+}\r
+.acpopup-sub-text {\r
+       color: #777;\r
+       font-size: 0.833em;\r
+       line-height: 1em;\r
+       overflow: hidden;\r
+       text-overflow: ellipsis;\r
+       display: block;\r
+}\r
+.textcomplete-item a {\r
+       color: inherit;\r
+       overflow: hidden;\r
+       text-overflow: ellipsis;\r
+       clear: both;\r
+       white-space: nowrap;\r
+       padding: 3px 20px;\r
+       display: block;\r
+}\r
+.textcomplete-item a:hover {\r
+       text-decoration: none;\r
+}\r
+.textcomplete-item.active {\r
+       color: #FFFFFF; background: #3465A4;\r
+}\r
+.active a .acpopup-sub-text {\r
+       color: #fff;\r
+}\r
 \r
 /* popup notifications */\r
 div.jGrowl div.notice {\r

diff --git a/view/theme/frost-mobile/templates/end.tpl b/view/theme/frost-mobile/templates/end.tpl
index 8d4b26bdcbe155ac0eb7cd3d9aedc2caf5bc13fe..c1acbfb2a6552997908b5da3090ecd8ddc449d49 100644 (file)
--- a/view/theme/frost-mobile/templates/end.tpl
+++ b/view/theme/frost-mobile/templates/end.tpl
@@ -7,7 +7,8 @@
 <script type="text/javascript" src="{{$baseurl}}/library/jgrowl/jquery.jgrowl_minimized.js"></script>
 <script type="text/javascript" src="{{$baseurl}}/library/datetimepicker/jquery.datetimepicker.js"></script>
 
-<script type="text/javascript" src="{{$baseurl}}/js/fk.autocomplete.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/library/jquery-textcomplete/jquery.textcomplete.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/js/autocomplete.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/view/theme/frost-mobile/js/acl.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/js/webtoolkit.base64.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/view/theme/frost-mobile/js/main.js" ></script>

diff --git a/view/theme/frost/js/main.js b/view/theme/frost/js/main.js
index 5483ad6bc33661c6be2dda260bdb6a038e309fa9..733064b30df3793258baa6d890d2999469c4e9f7 100644 (file)
--- a/view/theme/frost/js/main.js
+++ b/view/theme/frost/js/main.js
@@ -402,7 +402,7 @@
                                $('body').css('cursor', 'auto');
                        }
                        /* autocomplete @nicknames */
-                       $(".comment-edit-form  textarea").contact_autocomplete(baseurl+"/acl");
+                       $(".comment-edit-form  textarea").editor_autocomplete(baseurl+"/acl");
                
                        collapseHeight();
 

diff --git a/view/theme/frost/js/theme.js b/view/theme/frost/js/theme.js
index a14a034bc15ae67eab929f772e74e1cf9c0037a2..4418c1f3c42c08e75ebd94dbe43fa51ff5d3ba4c 100644 (file)
--- a/view/theme/frost/js/theme.js
+++ b/view/theme/frost/js/theme.js
@@ -232,7 +232,7 @@ $(document).ready(function() {
                        a.setOptions({ params: { type: 'a' }});
                        break;
                case 'display-head':
-                       $(".comment-wwedit-wrapper textarea").contact_autocomplete(baseurl+"/acl");
+                       $(".comment-wwedit-wrapper textarea").editor_autocomplete(baseurl+"/acl");
                        break;
                default:
                        break;
@@ -587,7 +587,7 @@ function initEditor(cb){
                        plaintextFn : function() {
                                $("#profile-jot-text-loading").hide();
                                $("#profile-jot-text").css({ 'height': 200, 'color': '#000' });
-                               $("#profile-jot-text").contact_autocomplete(baseurl+"/acl");
+                               $("#profile-jot-text").editor_autocomplete(baseurl+"/acl");
                                $(".jothidden").show();
                                if (typeof cb!="undefined") cb();
                        }
@@ -660,7 +660,7 @@ function msgInitEditor() {
                        });
                },
                plaintextFn : function() {
-                       $("#prvmail-text").contact_autocomplete(baseurl+"/acl");
+                       $("#prvmail-text").editor_autocomplete(baseurl+"/acl");
                }
        }
        InitMCEEditor(editorData);

diff --git a/view/theme/frost/style.css b/view/theme/frost/style.css
index 1054b55c11a0ed2703993579b08ffb2c7ec8fd5d..82a89f93d2dd48d258bb26d0933dfb36424ae582 100644 (file)
--- a/view/theme/frost/style.css
+++ b/view/theme/frost/style.css
@@ -4064,13 +4064,15 @@ aside input[type='text'] {
 
 
 /* autocomplete popup */
-.acpopup {
-       max-height:150px;
+.acpopup, .acpopup-mce {
        background-color:#ffffff;
        overflow:auto;
        z-index:100000;
        border:1px solid #cccccc;
 }
+.acpopup-mce {
+       max-height:150px;
+}
 .acpopupitem {
        background-color:#ffffff; padding: 4px;
        clear:left;
@@ -4084,6 +4086,65 @@ aside input[type='text'] {
        color: #FFFFFF; background: #3465A4;
 }
 
+ul.acpopup {
+       list-style: none;
+       float: left;
+       min-width: 160px;
+       padding: 5px 0;
+       margin: 2px 0 0;
+}
+nav .acpopup {
+       width: 290px;
+       margin-left: -35px;
+       max-height: 450px;
+       max-width: 300px;
+       overflow-y: auto;
+       overflow-x: hidden;
+       margin-top: 0px;
+}
+img.acpopup-img {
+       float: left;
+       width: 36px;
+       height: 36px;
+       margin-right: 5px;
+       vertical-align: middle;
+}
+.acpopup-contactname {
+       padding-top: 2px;
+       font-weight: bold;
+       line-height: 1em;
+       white-space: nowrap;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       display: block;
+}
+.acpopup-sub-text {
+       color: #777;
+       font-size: 0.833em;
+       line-height: 1em;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       display: block;
+}
+.textcomplete-item a {
+       color: inherit;
+       overflow: hidden;
+       text-overflow: ellipsis;
+       clear: both;
+       white-space: nowrap;
+       padding: 3px 20px;
+       display: block;
+}
+.textcomplete-item a:hover {
+       text-decoration: none;
+}
+.textcomplete-item.active {
+       color: #FFFFFF; background: #3465A4;
+}
+.active a .acpopup-sub-text {
+       color: #fff;
+}
+
 /* popup notifications */
 div.jGrowl div.notice {
   background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;

diff --git a/view/theme/frost/templates/end.tpl b/view/theme/frost/templates/end.tpl
index 4242f80c819707cf7796ba10d2072ccc75cf9eda..e864a9498dee892f1a79dfbac2076680e478d30c 100644 (file)
--- a/view/theme/frost/templates/end.tpl
+++ b/view/theme/frost/templates/end.tpl
@@ -19,7 +19,8 @@
 
 <script type="text/javascript" src="{{$baseurl}}/view/theme/frost/js/acl.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/js/webtoolkit.base64.js" ></script>
-<script type="text/javascript" src="{{$baseurl}}/js/fk.autocomplete.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/library/jquery-textcomplete/jquery.textcomplete.js" ></script>
+<script type="text/javascript" src="{{$baseurl}}/js/autocomplete.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/view/theme/frost/js/main.js" ></script>
 <script type="text/javascript" src="{{$baseurl}}/view/theme/frost/js/theme.js"></script>
 

diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css
index aed53fdac6bb46db7af656848fde5eeffd14534e..53864c12f513830156bcd38a7101e8bccca4d3f6 100644 (file)
--- a/view/theme/quattro/dark/style.css
+++ b/view/theme/quattro/dark/style.css
@@ -744,8 +744,12 @@ ul.menu-popup .toolbar a:hover {
 }
 /* autocomplete popup */
 .autocomplete,
-.acpopup {
+.acpopup-mce {
   max-height: 150px;
+}
+.autocomplete,
+.acpopup-mce,
+.acpopup {
   background-color: #ffffff;
   color: #2d2d2d;
   border: 1px solid #364e59;
@@ -774,6 +778,15 @@ ul.menu-popup .toolbar a:hover {
 .acpopupitem.selected {
   background-color: #bdcdd4;
 }
+.textcomplete-item {
+  color: #2d2d2d;
+}
+.textcomplete-item a:hover {
+  color: #2d2d2d;
+}
+.textcomplete-item.active {
+  background-color: #bdcdd4;
+}
 #nav-notifications-menu {
   width: 400px;
   max-height: 550px;

diff --git a/view/theme/quattro/green/style.css b/view/theme/quattro/green/style.css
index 74ab5b9cd0bd8e27318b019ff15121d916a02677..e099a31d6e50bea409cfd16f79c001da013db17f 100644 (file)
--- a/view/theme/quattro/green/style.css
+++ b/view/theme/quattro/green/style.css
@@ -744,8 +744,12 @@ ul.menu-popup .toolbar a:hover {
 }
 /* autocomplete popup */
 .autocomplete,
-.acpopup {
+.acpopup-mce {
   max-height: 150px;
+}
+.autocomplete,
+.acpopup-mce,
+.acpopup {
   background-color: #ffffff;
   color: #2d2d2d;
   border: 1px solid #364e59;
@@ -774,6 +778,15 @@ ul.menu-popup .toolbar a:hover {
 .acpopupitem.selected {
   background-color: #ccff42;
 }
+.textcomplete-item {
+  color: #2d2d2d;
+}
+.textcomplete-item a:hover {
+  color: #2d2d2d;
+}
+.textcomplete-item.active {
+  background-color: #ccff42;
+}
 #nav-notifications-menu {
   width: 400px;
   max-height: 550px;

diff --git a/view/theme/quattro/lilac/style.css b/view/theme/quattro/lilac/style.css
index 327309fa5e8a83f4ebd14d586a4a4e05f10c3350..631b0233d652bdb4dcf32ac64baad4b6ab1a2578 100644 (file)
--- a/view/theme/quattro/lilac/style.css
+++ b/view/theme/quattro/lilac/style.css
@@ -744,8 +744,12 @@ ul.menu-popup .toolbar a:hover {
 }
 /* autocomplete popup */
 .autocomplete,
-.acpopup {
+.acpopup-mce {
   max-height: 150px;
+}
+.autocomplete,
+.acpopup-mce,
+.acpopup {
   background-color: #ffffff;
   color: #2d2d2d;
   border: 1px solid #364e59;
@@ -774,6 +778,15 @@ ul.menu-popup .toolbar a:hover {
 .acpopupitem.selected {
   background-color: #c0a3c7;
 }
+.textcomplete-item {
+  color: #2d2d2d;
+}
+.textcomplete-item a:hover {
+  color: #2d2d2d;
+}
+.textcomplete-item.active {
+  background-color: #c0a3c7;
+}
 #nav-notifications-menu {
   width: 400px;
   max-height: 550px;

diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index d81aedf41a9ac468b10fcf638a57505cd631a645..5d25b0fb4096b2357ad65202b9cda9e1394d3c59 100644 (file)
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -265,9 +265,10 @@ ul.menu-popup {
 }
 
 /* autocomplete popup */
+.autocomplete, .acpopup-mce { max-height:150px; }
 .autocomplete,
+.acpopup-mce,
 .acpopup {
-       max-height:150px;
        background-color:@MenuBg;
        color: @Menu;
        border:1px solid @MenuBorder;
@@ -291,6 +292,15 @@ ul.menu-popup {
                background-color: @MenuItemHoverBg;
        }
 }
+.textcomplete-item {
+       color: @MenuItem;
+       a:hover{
+               color: @MenuItem;
+       }
+       &.active{
+               background-color: @MenuItemHoverBg;
+       }
+}
 
 
 #nav-notifications-menu {

diff --git a/view/theme/smoothly/style.css b/view/theme/smoothly/style.css
index 87c7342c9dc9bd235b12e542c7045a988e93058e..e38a7ef6dcf929438034239512f61877e3f6a2d4 100644 (file)
--- a/view/theme/smoothly/style.css
+++ b/view/theme/smoothly/style.css
@@ -4377,8 +4377,7 @@ a.active {
 }
 
 /* autocomplete popup */
-.acpopup {
-       max-height: 150px;
+.acpopup, acpopup-mce {
        overflow: auto;
        z-index: 100000;
        color: #2e3436;
@@ -4395,6 +4394,10 @@ a.active {
                -webkit-box-shadow: 0 0 8px #BDBDBD;
 }
 
+.acpopup-mce {
+       max-height: 150px;
+}
+
 .acpopupitem {
        color: #2e3436;
        padding: 4px;
@@ -4405,7 +4408,7 @@ a.active {
        margin-right: 4px;
 }
 
-.acpopupitem.selected {
+.acpopupitem.selected, .textcomplete-item.active {
        color: #efefef;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1873a2), color-stop(1, #6da6c4) );
        background: -moz-linear-gradient( center top, #1873a2 5%, #6da6c4 100% );
@@ -4414,6 +4417,10 @@ a.active {
        order-bottom: none;
 }
 
+.textcomplete-item a:hover, .textcomplete-item a:hover .acpopup-sub-text, .textcomplete-item.active a .acpopup-sub-text {
+       color: #efefef;
+}
+
 .qcomment {
        opacity: 0.8;
        filter: alpha(opacity=0);

diff --git a/view/theme/smoothly/templates/jot-header.tpl b/view/theme/smoothly/templates/jot-header.tpl
index f096d258238941ffa642c3188093a2b140f8380e..8b2666f0f3f147254694edbfa4be0f658b279081 100644 (file)
--- a/view/theme/smoothly/templates/jot-header.tpl
+++ b/view/theme/smoothly/templates/jot-header.tpl
@@ -12,7 +12,7 @@ function initEditor(cb){
                if(plaintext == 'none') {
                        $("#profile-jot-text-loading").hide();
                        $("#profile-jot-text").css({ 'height': 200, 'color': '#000' });
-                       $("#profile-jot-text").contact_autocomplete(baseurl+"/acl");
+                       $("#profile-jot-text").editor_autocomplete(baseurl+"/acl");
                        $(".jothidden").show();
                        editor = true;
                        $("a#jot-perms-icon").colorbox({

diff --git a/view/theme/vier/style.css b/view/theme/vier/style.css
index e08e103b8a919be0f4ca424082d15fc5adddddc9..8ade8e2aa561e46a3706779819e02aa48d3ec346 100644 (file)
--- a/view/theme/vier/style.css
+++ b/view/theme/vier/style.css
@@ -429,7 +429,7 @@ code {
 .sidebar-group-li:hover, #sidebar-new-group:hover, #sidebar-edit-groups:hover,#forum-widget-collapse:hover,
 #sidebar-ungrouped:hover, .side-link:hover, .nets-ul li:hover, #forumlist-sidebar li:hover, #forumlist-sidebar-right li:hover,
 .nets-all:hover, .saved-search-li:hover, li.tool:hover, .admin.link:hover, aside h4 a:hover, right_aside h4 a:hover, #message-new:hover,
-#sidebar-photos-albums li:hover, .photos-upload-link:hover {
+#sidebar-photos-albums li:hover, .photos-upload-link:hover, .textcomplete-item.active {
   /* background-color: #ddd; */
 /*  background-color: #e5e5e5; */
   background-color: #F5F5F5;
@@ -900,15 +900,18 @@ ul.menu-popup .empty {
   color: #9eabb0;
 }
 /* autocomplete popup */
-.acpopup {
-  max-height: 150px;
+
+.acpopup, .acpopup-mce {
   background-color: #ffffff;
-  color: #2d2d2d;
   border: 1px solid #MenuBorder;
   overflow: auto;
   z-index: 100000;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
 }
+acpopup-mce {
+  color: #2d2d2d;
+  max-height: 150px;
+}
 .acpopupitem {
   color: #2d2d2d;
   padding: 4px;
@@ -921,6 +924,16 @@ ul.menu-popup .empty {
 .acpopupitem.selected {
   background-color: #bdcdd4;
 }
+.textcomplete-item {
+  float: none;
+}
+.textcomplete-item a {
+  color: #737373;
+}
+.textcomplete-item a:hover {
+  padding: 3px 20px;
+}
+
 #nav-notifications-menu {
   width: 400px;
   max-height: 550px;