Mercurial > kallithea
changeset 6805:4d7d3445e388
autocomplete: use select2 when selecting owner of repos and PRs
This is a minimal change to SimpleUserAutoComplete, 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. This field will always have an old value and
the placeholder is thus never used, but we show it instead of the default
"Please enter 1 or more character" message.
The initSelection iteration is not pretty, but no more complex than what
happens when filtering the user list, and it has the advantage of giving a nice
name/gravatar display of the current user.
| author | Mads Kiilerich <mads@kiilerich.com> |
|---|---|
| date | Sun, 13 Aug 2017 17:19:18 +0200 |
| parents | 2f93ca3eab8b |
| children | 541383de7568 |
| files | kallithea/public/js/base.js kallithea/templates/admin/repos/repo_edit_settings.html kallithea/templates/pullrequests/pullrequest_show.html |
| diffstat | 3 files changed, 24 insertions(+), 22 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 @@ -1132,21 +1132,25 @@ } var SimpleUserAutoComplete = function ($inputElement, users_list) { - - var matchUsers = function (sQuery) { - return autocompleteMatchUsers(sQuery, users_list); - } - - var userAC = autocompleteCreate($inputElement, matchUsers); - - // Handler for selection of an entry - var itemSelectHandler = 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 - myAC.getInputEl().value = oData.nname; - }; - userAC.itemSelectEvent.subscribe(itemSelectHandler); + $inputElement.select2( + { + formatInputTooShort: $inputElement.attr('placeholder'), + initSelection : function (element, callback) { + var val = $inputElement.val(); + $.each(users_list, function(i, user) { + if (user.nname == val) + callback(user); + }); + }, + minimumInputLength: 1, + query: function (query) { + query.callback({results: autocompleteMatchUsers(query.term, users_list)}); + }, + formatSelection: autocompleteFormatter, + formatResult: autocompleteFormatter, + escapeMarkup: function(m) { return m; }, + id: function(item) { return item.nname; }, + }); } var MembersAutoComplete = function ($inputElement, users_list, groups_list) {
--- a/kallithea/templates/admin/repos/repo_edit_settings.html Sun Aug 13 17:19:18 2017 +0200 +++ b/kallithea/templates/admin/repos/repo_edit_settings.html Sun Aug 13 17:19:18 2017 +0200 @@ -40,11 +40,9 @@ </div> <div class="form-group"> <label class="control-label" for="owner">${_('Owner')}:</label> - <div class="ac"> - <div class="perm_ac"> - ${h.text('owner',class_='yui-ac-input form-control')} - <span class="help-block">${_('Change owner of this repository.')}</span> - </div> + <div> + ${h.text('owner',class_='form-control', placeholder=_('Type name of user'))} + <span class="help-block">${_('Change owner of this repository.')}</span> </div> </div> <div class="form-group">
--- 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 @@ -138,8 +138,8 @@ <span>${c.pull_request.owner.full_name_and_username}</span><br/> <span><a href="mailto:${c.pull_request.owner.email}">${c.pull_request.owner.email}</a></span><br/> </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 class="pr-do-edit" style="display:none"> + ${h.text('owner', class_='form-control', value=c.pull_request.owner.username, placeholder=_('Type name of user'))} </div> </div>