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 23 insertions and 21 deletions:
kallithea/public/js/base.js
19
15
kallithea/templates/admin/repos/repo_edit_settings.html
2
4
kallithea/templates/pullrequests/pullrequest_show.html
2
2
0 comments (0 inline, 0 general)
kallithea/public/js/base.js
➞
Show inline comments
 
@@ -1111,63 +1111,67 @@ var autocompleteFormatter = function (oR
 

			




	
	
	
		
 
        return autocompleteGravatar(displayname, oResultData.gravatar_lnk, oResultData.gravatar_size);

			




	
	
	
		
 
    } else {

			




	
	
	
		
 
        return '';

			




	
	
	
		
 
    }

			




	
	
	
		
 
};

			




	
	
	
		
 

			




	
	
	
		
 
// Generate a basic autocomplete instance that can be tweaked further by the caller

			




	
	
	
		
 
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);

			




	
	
	
		
 
    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);

			




	
	
	
		
 

			




	
	
	
		
 
    // Handler for selection of an entry

			




	
	
	
		
 
    var itemSelectHandler = function (sType, aArgs) {

			




	
	
	
		
 
        var nextId = $inputElement.prop('id').split('perm_new_member_name_')[1];

			




	
	
	
		
 
        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

			




	
	
	
		
 
        //fill the autocomplete with value

			




	
	
	
		
 
        if (oData.nname != undefined) {

			




	
	
	
		
 
            //users

			




	
	
	
		
 
            myAC.getInputEl().value = oData.nname;

			




	
	
	
		
 
            $('#perm_new_member_type_'+nextId).val('user');

			




	
	
	
		
 
        } else {

			




        

    


    
    

    

        

                

                    kallithea/templates/admin/repos/repo_edit_settings.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -19,55 +19,53 @@ ${h.form(url('update_repo', repo_name=c.

			




	
	
	
		
 
                        ${h.text('clone_uri',class_='form-control', placeholder=_('Repository URL'))}

			




	
	
	
		
 
                        ${h.hidden('clone_uri_hidden', c.repo_info.clone_uri_hidden)}

			




	
	
	
		
 
                  </div>

			




	
	
	
		
 
                  <span id="alter_clone_uri_help_block" class="help-block">

			




	
	
	
		
 
                    ${_('Optional: URL of a remote repository. If set, the repository can be pulled from this URL.')}

			




	
	
	
		
 
                  </span>

			




	
	
	
		
 
                </div>

			




	
	
	
		
 
            </div>

			




	
	
	
		
 
            <div class="form-group">

			




	
	
	
		
 
                <label class="control-label" for="repo_group">${_('Repository group')}:</label>

			




	
	
	
		
 
                <div>

			




	
	
	
		
 
                    ${h.select('repo_group','',c.repo_groups,class_='form-control')}

			




	
	
	
		
 
                    <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')}

			




	
	
	
		
 
                <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>

			




	
	
	
		
 
            <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>

			




	
	
	
		
 
                <div>

			




	
	
	
		
 
                    ${h.checkbox('repo_private',value="True")}

			




	
	
	
		
 
                    <span class="help-block">${_('Private repositories are only visible to people explicitly added as collaborators.')}</span>

			




	
	
	
		
 
                </div>

			




	
	
	
		
 
            </div>

			




	
	
	
		
 
            <div class="form-group">

			




	
	
	
		
 
                <label class="control-label" for="repo_enable_statistics">${_('Enable statistics')}:</label>

			




	
	
	
		
 
                <div>

			




	
	
	
		
 
                    ${h.checkbox('repo_enable_statistics',value="True")}

			




	
	
	
		
 
                    <span class="help-block">${_('Enable statistics window on summary page.')}</span>

			




	
	
	
		
 
                </div>

			




	
	
	
		
 
            </div>

			




	
	
	
		
 
            <div class="form-group">

			




	
	
	
		
 
                <label class="control-label" for="repo_enable_downloads">${_('Enable downloads')}:</label>

			




        

    


    
    

    

        

                

                    kallithea/templates/pullrequests/pullrequest_show.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -117,50 +117,50 @@ ${self.repo_context_bar('showpullrequest

			




	
	
	
		
 
              <div>

			




	
	
	
		
 
               ## TODO: use cs_ranges[-1] or org_ref_parts[1] in both cases?

			




	
	
	
		
 
               %if h.is_hg(c.pull_request.org_repo):

			




	
	
	
		
 
                 <span>hg pull ${c.pull_request.org_repo.clone_url()} -r ${h.short_id(c.cs_ranges[-1].raw_id)}</span>

			




	
	
	
		
 
               %elif h.is_git(c.pull_request.org_repo):

			




	
	
	
		
 
                 <span>git pull ${c.pull_request.org_repo.clone_url()} ${c.pull_request.org_ref_parts[1]}</span>

			




	
	
	
		
 
               %endif

			




	
	
	
		
 
              </div>

			




	
	
	
		
 
            %endif

			




	
	
	
		
 
          </div>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 
        <div class="form-group">

			




	
	
	
		
 
          <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>

			




	
	
	
		
 
                <table class="table" id="updaterevs-table">

			




	
	
	
		
 
                  %for cnt, cs in enumerate(c.avail_cs):

			




	
	
	
		
 
                    <tr id="chg_available_${cnt+1}" class="${'mergerow' if len(cs.parents) > 1 and not (editable and cs.revision in c.avail_revs) else ''}">

			




	
	
	
		
 
                      %if c.cs_ranges and cs.revision == c.cs_ranges[-1].revision:

			




	
	
	
		
 
                        %if editable:

			




	
	
	
		
 
                        <td>

			




	
	
	
		
 
                            ${h.radio(name='updaterev', value='', checked=True)}

			




	
	
	
		
 
                        </td>

			




	
	
	
		
 
                        %endif

			




	
	
	
		
 
                        <td colspan="4"><span>${_("Current revision - no change")}</span></td>

			




	
	
	
		
 
                      %else:

			




	
	
	
		
 
                        %if editable:

			




        

    



    


    



    



      

      





    
    0 comments (0 inline, 0 general)
    





    


  

  







  


    




    








    
        
    
    
        This site is powered by
            Kallithea 0.7.0,
        which is
        © 2010–2025 by various authors & licensed under GPLv3.