From: rabuzarus <> Date: Thu, 21 Jan 2016 12:28:29 +0000 (+0100) Subject: rework autocomplete: css work X-Git-Url: https://git.mxchange.org/?a=commitdiff_plain;h=52896d64c217356b8437d6f6777c7c2a2a64fdc3;p=friendica.git rework autocomplete: css work --- diff --git a/js/autocomplete.js b/js/autocomplete.js index aa4494b714..1f7df011d3 100644 --- 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 "
{2}{3}
".format(item.taggable, item.photo, item.name, desc, item.link); + return "
{2}{3}
".format(item.taggable, item.photo, item.name, desc, item.link); } else return "
" + item.text + "
"; @@ -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 = $("
"); + 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 = "{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 = $("
"+label+"
"); + 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 41af643ecc..0857cba27b 100644 --- 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 86598bbf6c..9b1a92ef5f 100644 --- 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"); diff --git a/view/templates/wallmsg-header.tpl b/view/templates/wallmsg-header.tpl index f03f496fe2..2d4cd23797 100644 --- 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"); diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css index 787e52600c..53d034d865 100644 --- 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 7e2880594d..3ec2421df2 100644 --- 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 8133c602c8..c021370874 100644 --- 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 a99cc17a91..36b621b766 100644 --- a/view/theme/frost-mobile/style.css +++ b/view/theme/frost-mobile/style.css @@ -4210,6 +4210,64 @@ aside input[type='text'] { .acpopupitem.selected { 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 { diff --git a/view/theme/frost-mobile/templates/end.tpl b/view/theme/frost-mobile/templates/end.tpl index 8d4b26bdcb..c1acbfb2a6 100644 --- a/view/theme/frost-mobile/templates/end.tpl +++ b/view/theme/frost-mobile/templates/end.tpl @@ -7,7 +7,8 @@ - + + diff --git a/view/theme/frost/js/main.js b/view/theme/frost/js/main.js index 5483ad6bc3..733064b30d 100644 --- 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 a14a034bc1..4418c1f3c4 100644 --- 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 1054b55c11..82a89f93d2 100644 --- 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 4242f80c81..e864a9498d 100644 --- a/view/theme/frost/templates/end.tpl +++ b/view/theme/frost/templates/end.tpl @@ -19,7 +19,8 @@ - + + diff --git a/view/theme/quattro/dark/style.css b/view/theme/quattro/dark/style.css index aed53fdac6..53864c12f5 100644 --- 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 74ab5b9cd0..e099a31d6e 100644 --- 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 327309fa5e..631b0233d6 100644 --- 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 d81aedf41a..5d25b0fb40 100644 --- 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 87c7342c9d..e38a7ef6dc 100644 --- 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 f096d25823..8b2666f0f3 100644 --- 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 e08e103b8a..8ade8e2aa5 100644 --- 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;