Changeset - 4d7d3445e388
[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:
0 comments (0 inline, 0 general)
kallithea/public/js/base.js
Show inline comments
 
@@ -1087,111 +1087,115 @@ var autocompleteFormatter = function (oR
 
            displayfname, displaylname, displaynname, displayname;
 

	
 
        if (fnameMatchIndex > -1) {
 
            displayfname = autocompleteHighlightMatch(fname, query, fnameMatchIndex);
 
        } else {
 
            displayfname = fname;
 
        }
 

	
 
        if (lnameMatchIndex > -1) {
 
            displaylname = autocompleteHighlightMatch(lname, query, lnameMatchIndex);
 
        } else {
 
            displaylname = lname;
 
        }
 

	
 
        if (nnameMatchIndex > -1) {
 
            displaynname = autocompleteHighlightMatch(nname, query, nnameMatchIndex);
 
        } else {
 
            displaynname = nname;
 
        }
 

	
 
        displayname = displaynname;
 
        if (displayfname && displaylname) {
 
            displayname = "{0} {1} ({2})".format(displayfname, displaylname, displayname);
 
        }
 

	
 
        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 {
 
            //groups
 
            myAC.getInputEl().value = oData.grname;
 
            $('#perm_new_member_type_'+nextId).val('users_group');
 
        }
 
    };
 
    membersAC.itemSelectEvent.subscribe(itemSelectHandler);
 
}
 

	
 
var MentionsAutoComplete = function ($inputElement, users_list) {
 
    var matchUsers = function (sQuery) {
 
            var org_sQuery = sQuery;
 
            if(this.mentionQuery == null){
 
                return []
 
            }
 
            sQuery = this.mentionQuery;
 
            return autocompleteMatchUsers(sQuery, users_list);
 
    }
 

	
 
    var mentionsAC = autocompleteCreate($inputElement, matchUsers);
 
    mentionsAC.suppressInputUpdate = true;
 
    // Overwrite formatResult to take into account mentionQuery
 
    mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) {
 
        var org_sQuery = sQuery;
 
        if (this.dataSource.mentionQuery != null) {
kallithea/templates/admin/repos/repo_edit_settings.html
Show inline comments
 
${h.form(url('update_repo', repo_name=c.repo_info.repo_name))}
 
    <div class="form">
 
            <div class="form-group">
 
                <label class="control-label" for="repo_name">${_('Name')}:</label>
 
                <div>
 
                    ${h.text('repo_name',class_='form-control')}
 
                    <span class="help-block">${_('Permanent Repository ID')}: `_${c.repo_info.repo_id}` <span><a id="show_more_clone_id" href="#">${_('What is that?')}</a></span></span>
 
                    <span id="clone_id" class="help-block" style="display: none">
 
                        ${_('URL by id')}: `${c.repo_info.clone_url(with_id=True)}`<br/>
 
                        ${_('''In case this repository is renamed or moved into another group the repository URL changes.
 
                               Using the above permanent URL guarantees that this repository always will be accessible on that URL.
 
                               This is useful for CI systems, or any other cases that you need to hardcode the URL into a 3rd party service.''')}</span>
 
                </div>
 
            </div>
 
            <div class="form-group">
 
                <label class="control-label" for="clone_uri">${_('Remote repository')}:</label>
 
                <div>
 
                  <div id="alter_clone_uri">
 
                        ${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')}
 
                       <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>
 
                <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>
 
                <div>
 
                    ${h.checkbox('repo_enable_downloads',value="True")}
 
                    <span class="help-block">${_('Enable download menu on summary page.')}</span>
 
                </div>
 
            </div>
 
            <div class="form-group">
 
                <label class="control-label" for="repo_enable_locking">${_('Enable locking')}:</label>
 
                <div>
 
                    ${h.checkbox('repo_enable_locking',value="True")}
 
                    <span class="help-block">${_('Enable lock-by-pulling on repository.')}</span>
 
                </div>
 
            </div>
 

	
 
            %if c.visual.repository_fields:
 
              ## EXTRA FIELDS
 
              %for field in c.repo_fields:
 
                <div class="form-group">
 
                    <label class="control-label" for="${field.field_key_prefixed}">${field.field_label} (${field.field_key}):</label>
 
                    <div>
 
                        ${h.text(field.field_key_prefixed, field.field_value, class_='form-control')}
 
                        %if field.field_desc:
 
                          <span class="help-block">${field.field_desc}</span>
kallithea/templates/pullrequests/pullrequest_show.html
Show inline comments
 
@@ -93,98 +93,98 @@ ${self.repo_context_bar('showpullrequest
 
          <div>
 
            <div>
 
              ${h.link_to_ref(c.pull_request.org_repo.repo_name, c.cs_ref_type, c.cs_ref_name, c.cs_rev)}
 
              %if c.cs_ref_type != 'branch':
 
                ${_('on')} ${h.link_to_ref(c.pull_request.org_repo.repo_name, 'branch', c.cs_branch_name)}
 
              %endif
 
            </div>
 
          </div>
 
        </div>
 
        <div class="form-group">
 
          <label>${_('Target')}:</label>
 
          <div>
 
            %if c.is_range:
 
              ${_("This is just a range of changesets and doesn't have a target or a real merge ancestor.")}
 
            %else:
 
              ${h.link_to_ref(c.pull_request.other_repo.repo_name, c.a_ref_type, c.a_ref_name)}
 
              ## we don't know other rev - c.a_rev is ancestor and not necessarily on other_name_branch branch
 
            %endif
 
          </div>
 
        </div>
 
        <div class="form-group">
 
          <label>${_('Pull changes')}:</label>
 
          <div>
 
            %if c.cs_ranges:
 
              <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:
 
                        <td>
 
                          ${h.radio(name='updaterev', value=cs.raw_id, style=None if cs.revision in c.avail_revs else 'visibility: hidden')}
 
                        </td>
 
                        %endif
 
                        <td><span data-toggle="tooltip" title="${h.age(cs.date)}">${cs.date}</span></td>
 
                        <td>${h.link_to(h.show_id(cs),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id), class_='changeset_hash')}</td>
 
                        <td>
 
                          <div class="pull-right">
 
                            %for tag in cs.tags:
 
                              <span class="tagtag" title="${_('Tag %s') % tag}">
 
                                ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
                              </span>
 
                            %endfor
 
                          </div>
 
                          <div class="message">${h.urlify_text(cs.message, c.repo_name)}</div>
 
                        </td>
 
                      %endif
 
                    </tr>
 
                  %endfor
 
                </table>
 
              </div>
 
              <div class="msg-div">(${_("Pull request iterations do not change content once created. Select a revision and save to make a new iteration.")})</div>
 
              %endif
 
              <div class="msg-div">${c.update_msg_other}</div>
0 comments (0 inline, 0 general)