Mercurial > kallithea
changeset 6806:541383de7568
autocomplete: use select2 when selecting users to add as reviewers to PRs
This is a minimal change to PullRequestAutoComplete, inspired by Dominik Ruf.
The UX is slightly different than before, with select2 putting up an extra
input field, already before typing anything.
We use minimumInputLength 1 to get the same behaviour as before and avoid
displaying all users in a list.
The select2 widget is reused for adding more users, so when a user is selected,
we process it, close the widget, and abort the selection, waiting for the user
to enter another user name.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Sun, 13 Aug 2017 17:19:18 +0200 |
parents | 4d7d3445e388 |
children | d43cf470e625 |
files | kallithea/public/js/base.js kallithea/templates/pullrequests/pullrequest_show.html |
diffstat | 2 files changed, 18 insertions(+), 23 deletions(-) [+] |
line wrap: on
line diff
--- a/kallithea/public/js/base.js Sun Aug 13 17:19:18 2017 +0200 +++ b/kallithea/public/js/base.js Sun Aug 13 17:19:18 2017 +0200 @@ -1315,25 +1315,22 @@ /* activate auto completion of users as PR reviewers */ var PullRequestAutoComplete = function ($inputElement, users_list) { - var matchUsers = function (sQuery) { - return autocompleteMatchUsers(sQuery, users_list); - }; - - var reviewerAC = autocompleteCreate($inputElement, matchUsers); - reviewerAC.suppressInputUpdate = true; - - // Handler for selection of an entry - if(reviewerAC.itemSelectEvent){ - reviewerAC.itemSelectEvent.subscribe(function (sType, aArgs) { - var myAC = aArgs[0]; // reference back to the AC instance - var elLI = aArgs[1]; // reference to the selected LI element - var oData = aArgs[2]; // object literal of selected item's result data - - addReviewMember(oData.id, oData.fname, oData.lname, oData.nname, - oData.gravatar_lnk, oData.gravatar_size); - myAC.getInputEl().value = ''; - }); - } + $inputElement.select2( + { + placeholder: $inputElement.attr('placeholder'), + minimumInputLength: 1, + query: function (query) { + query.callback({results: autocompleteMatchUsers(query.term, users_list)}); + }, + formatSelection: autocompleteFormatter, + formatResult: autocompleteFormatter, + escapeMarkup: function(m) { return m; }, + }).on("select2-selecting", function(e) { + addReviewMember(e.choice.id, e.choice.fname, e.choice.lname, e.choice.nname, + e.choice.gravatar_lnk, e.choice.gravatar_size); + $inputElement.select2("close"); + e.preventDefault(); + }); }
--- a/kallithea/templates/pullrequests/pullrequest_show.html Sun Aug 13 17:19:18 2017 +0200 +++ b/kallithea/templates/pullrequests/pullrequest_show.html Sun Aug 13 17:19:18 2017 +0200 @@ -239,10 +239,8 @@ </ul> </div> %if editable: - <div class='ac'> - <div class="reviewer_ac"> - ${h.text('user', class_='yui-ac-input form-control',placeholder=_('Type name of reviewer to add'))} - </div> + <div> + ${h.text('user', class_='form-control',placeholder=_('Type name of reviewer to add'))} </div> %endif </div>