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

@@ @@ -1123,39 +1123,43 @@ var autocompleteCreate = function ($inpu @@
     var autocomplete = new YAHOO.widget.AutoComplete($inputElement[0], $container[0], datasource);
     autocomplete.useShadow = false;
     autocomplete.resultTypeList = false;
     autocomplete.animVert = false;
     autocomplete.animHoriz = false;
     autocomplete.animSpeed = 0.1;
     autocomplete.formatResult = autocompleteFormatter;
     return autocomplete;
+}
 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) {
     var matchAll = function (sQuery) {
         var u = autocompleteMatchUsers(sQuery, users_list);
         var g = autocompleteMatchGroups(sQuery, groups_list);
         return u.concat(g);
     };
     var membersAC = autocompleteCreate($inputElement, matchAll);

kallithea/templates/admin/repos/repo_edit_settings.html

➞

Show inline comments

@@ @@ -31,29 +31,27 @@ ${h.form(url('update_repo', repo_name=c. @@
                     <span class="help-block">${_('Optionally select a group to put this repository into.')}</span>
                 </div>
             </div>
             <div class="form-group">
                 <label class="control-label" for="repo_landing_rev">${_('Landing revision')}:</label>
                 <div>
                     ${h.select('repo_landing_rev','',c.landing_revs,class_='form-control')}
                     <span class="help-block">${_('Default revision for files page, downloads, whoosh and readme')}</span>
                 </div>
             </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">
                 <label class="control-label" for="repo_description">${_('Description')}:</label>
                 <div>
                     ${h.textarea('repo_description',class_='form-control')}
                     <span class="help-block">${_('Keep it short and to the point. Use a README file for longer descriptions.')}</span>
                 </div>
             </div>
             <div class="form-group">
                 <label class="control-label" for="repo_private">${_('Private repository')}:</label>

kallithea/templates/pullrequests/pullrequest_show.html

➞

Show inline comments

@@ @@ -129,26 +129,26 @@ ${self.repo_context_bar('showpullrequest @@
           <label>${_('Created on')}:</label>
           <div>
               <div>${h.fmt_date(c.pull_request.created_on)}</div>
           </div>
         </div>
         <div class="form-group">
           <label>${_('Owner')}:</label>
           <div class="pr-not-edit">
                   ${h.gravatar_div(c.pull_request.owner.email, size=20)}
                   <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>
         <div class="form-group">
           <label>${_('Next iteration')}:</label>
             <div>
               <div class="msg-div">${c.update_msg}</div>
               %if c.avail_revs:
               <div id="updaterevs" class="clearfix">
                 <div id="updaterevs-graph">
                   <canvas id="avail_graph_canvas"></canvas>
                 </div>

0 comments (0 inline, 0 general)