kallithea Changeset - 4d7d3445e388

Changeset - 4d7d3445e388

Parent rev.

Child rev.

[Not reviewed]

default

0 3 0

Mads Kiilerich - 8 years ago 2017-08-13 17:19:18
mads@kiilerich.com

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.

3 files changed with 24 insertions and 22 deletions:

kallithea/public/js/base.js

kallithea/templates/admin/repos/repo_edit_settings.html

kallithea/templates/pullrequests/pullrequest_show.html

0 comments (0 inline, 0 general)

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -1132,21 +1132,25 @@ var autocompleteCreate = function ($inpu @@
+}
 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) {

kallithea/templates/admin/repos/repo_edit_settings.html

➞

Show inline comments

@@ @@ -40,11 +40,9 @@ ${h.form(url('update_repo', repo_name=c. @@
             </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">

kallithea/templates/pullrequests/pullrequest_show.html

➞

Show inline comments

@@ @@ -138,8 +138,8 @@ ${self.repo_context_bar('showpullrequest @@
                   <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>

0 comments (0 inline, 0 general)