Mercurial > kallithea
changeset 6788:e4d2fec64955
autocompletion: drop explicit container elements - just create them when necessary
The previous wide styling of the @mention selection list didn't look pretty -
just use the default width.
Inspired by select2 port by Dominik Ruf.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Fri, 11 Aug 2017 02:48:15 +0200 |
parents | eb4bdc324875 |
children | 4d04ac08fff7 |
files | kallithea/public/css/style.css kallithea/public/js/base.js kallithea/templates/admin/repos/repo_edit_settings.html kallithea/templates/changeset/changeset_file_comment.html kallithea/templates/pullrequests/pullrequest_show.html |
diffstat | 5 files changed, 15 insertions(+), 35 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/public/css/style.css Mon Aug 07 23:15:30 2017 +0200 +++ b/kallithea/public/css/style.css Fri Aug 11 02:48:15 2017 +0200 @@ -1951,14 +1951,6 @@ z-index: 2; } - -.mentions-container { - width: 90% !important; -} -.mentions-container .yui-ac-content { - width: 100% !important; -} - .ac { vertical-align: top; }
--- a/kallithea/public/js/base.js Mon Aug 07 23:15:30 2017 +0200 +++ b/kallithea/public/js/base.js Fri Aug 11 02:48:15 2017 +0200 @@ -649,7 +649,6 @@ $comment_div.append($form_div); var $form = $comment_div.find("form"); var $textarea = $form.find('textarea'); - var $mentions_container = $form.find('div.mentions-container'); $form.submit(function(e) { e.preventDefault(); @@ -713,7 +712,7 @@ tooltip_activate(); if ($textarea.length > 0) { - MentionsAutoComplete($textarea, $mentions_container, _USERS_AC_DATA); + MentionsAutoComplete($textarea, _USERS_AC_DATA); } if (f_path) { $textarea.focus(); @@ -1113,7 +1112,8 @@ }; // Generate a basic autocomplete instance that can be tweaked further by the caller -var autocompleteCreate = function ($inputElement, $container, matchFunc) { +var autocompleteCreate = function ($inputElement, matchFunc) { + var $container = $('<div/>').insertAfter($inputElement); var datasource = new YAHOO.util.FunctionDataSource(matchFunc); var autocomplete = new YAHOO.widget.AutoComplete($inputElement[0], $container[0], datasource); @@ -1127,13 +1127,13 @@ return autocomplete; } -var SimpleUserAutoComplete = function ($inputElement, $container, users_list) { +var SimpleUserAutoComplete = function ($inputElement, users_list) { var matchUsers = function (sQuery) { return autocompleteMatchUsers(sQuery, users_list); } - var userAC = autocompleteCreate($inputElement, $container, matchUsers); + var userAC = autocompleteCreate($inputElement, matchUsers); // Handler for selection of an entry var itemSelectHandler = function (sType, aArgs) { @@ -1145,7 +1145,7 @@ userAC.itemSelectEvent.subscribe(itemSelectHandler); } -var MembersAutoComplete = function ($inputElement, $container, users_list, groups_list) { +var MembersAutoComplete = function ($inputElement, users_list, groups_list) { var matchAll = function (sQuery) { var u = autocompleteMatchUsers(sQuery, users_list); @@ -1153,7 +1153,7 @@ return u.concat(g); }; - var membersAC = autocompleteCreate($inputElement, $container, matchAll); + var membersAC = autocompleteCreate($inputElement, matchAll); // Handler for selection of an entry var itemSelectHandler = function (sType, aArgs) { @@ -1175,8 +1175,7 @@ membersAC.itemSelectEvent.subscribe(itemSelectHandler); } -var MentionsAutoComplete = function ($inputElement, $container, users_list) { - +var MentionsAutoComplete = function ($inputElement, users_list) { var matchUsers = function (sQuery) { var org_sQuery = sQuery; if(this.mentionQuery == null){ @@ -1186,7 +1185,7 @@ return autocompleteMatchUsers(sQuery, users_list); } - var mentionsAC = autocompleteCreate($inputElement, $container, matchUsers); + var mentionsAC = autocompleteCreate($inputElement, matchUsers); mentionsAC.suppressInputUpdate = true; // Overwrite formatResult to take into account mentionQuery mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) { @@ -1307,13 +1306,12 @@ } /* activate auto completion of users as PR reviewers */ -var PullRequestAutoComplete = function ($inputElement, $container, users_list) { - +var PullRequestAutoComplete = function ($inputElement, users_list) { var matchUsers = function (sQuery) { return autocompleteMatchUsers(sQuery, users_list); }; - var reviewerAC = autocompleteCreate($inputElement, $container, matchUsers); + var reviewerAC = autocompleteCreate($inputElement, matchUsers); reviewerAC.suppressInputUpdate = true; // Handler for selection of an entry @@ -1341,15 +1339,13 @@ '<div class="perm_ac" id="perm_ac_{0}">' + '<input class="yui-ac-input" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text">' + '<input id="perm_new_member_type_{0}" name="perm_new_member_type_{0}" value="" type="hidden">' + - '<div id="perm_container_{0}"></div>' + '</div>' + '</td>' + '<td></td>'; var $last_node = $('.last_new_member').last(); // empty tr between last and add var next_id = $('.new_members').length; $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type))); - MembersAutoComplete($("#perm_new_member_name_"+next_id), - $("#perm_container_"+next_id), users_list, groups_list); + MembersAutoComplete($("#perm_new_member_name_"+next_id), users_list, groups_list); } function ajaxActionRevokePermission(url, obj_id, obj_type, field_id, extra_data) {
--- a/kallithea/templates/admin/repos/repo_edit_settings.html Mon Aug 07 23:15:30 2017 +0200 +++ b/kallithea/templates/admin/repos/repo_edit_settings.html Fri Aug 11 02:48:15 2017 +0200 @@ -44,7 +44,6 @@ <div class="perm_ac"> ${h.text('owner',class_='yui-ac-input form-control')} <span class="help-block">${_('Change owner of this repository.')}</span> - <div id="owner_container"></div> </div> </div> </div> @@ -124,6 +123,6 @@ // autocomplete var _USERS_AC_DATA = ${h.js(c.users_array)}; - SimpleUserAutoComplete($('#owner'), $('#owner_container'), _USERS_AC_DATA); + SimpleUserAutoComplete($('#owner'), _USERS_AC_DATA); }); </script>
--- a/kallithea/templates/changeset/changeset_file_comment.html Mon Aug 07 23:15:30 2017 +0200 +++ b/kallithea/templates/changeset/changeset_file_comment.html Fri Aug 11 02:48:15 2017 +0200 @@ -57,7 +57,6 @@ <div class="comment-help">${_('Commenting on line.')} <span class="text-muted">${_('Comments are in plain text. Use @username inside this text to notify another user.')|n}</span> </div> - <div class="mentions-container"></div> <textarea name="text" class="form-control comment-block-ta yui-ac-input"></textarea> <div id="status_block_container" class="status-block general-only hidden"> @@ -158,10 +157,6 @@ ## MAIN COMMENT FORM <%def name="comments(change_status=True)"> - -## global, shared for all edit boxes -<div class="mentions-container" id="mentions_container"></div> - <div class="inline-comments inline-comments-general ${'show-general-status' if change_status else ''}"> <div id="comments-general-comments" class="">
--- a/kallithea/templates/pullrequests/pullrequest_show.html Mon Aug 07 23:15:30 2017 +0200 +++ b/kallithea/templates/pullrequests/pullrequest_show.html Fri Aug 11 02:48:15 2017 +0200 @@ -140,7 +140,6 @@ </div> <div class="pr-do-edit ac" style="display:none"> ${h.text('owner', class_='form-control', value=c.pull_request.owner.username, placeholder=_('Username'))} - <div id="owner_completion_container"></div> </div> </div> @@ -243,7 +242,6 @@ <div class='ac'> <div class="reviewer_ac"> ${h.text('user', class_='yui-ac-input form-control',placeholder=_('Type name of reviewer to add'))} - <div id="reviewers_container"></div> </div> </div> %endif @@ -360,8 +358,8 @@ <script type="text/javascript"> $(document).ready(function(){ - PullRequestAutoComplete($('#user'), $('#reviewers_container'), _USERS_AC_DATA); - SimpleUserAutoComplete($('#owner'), $('#owner_completion_container'), _USERS_AC_DATA); + PullRequestAutoComplete($('#user'), _USERS_AC_DATA); + SimpleUserAutoComplete($('#owner'), _USERS_AC_DATA); $('.code-difftable').on('click', '.add-bubble', function(e){ show_comment_form($(this));