Changeset - e4d2fec64955
[Not reviewed]
default
0 5 0
Mads Kiilerich - 8 years ago 2017-08-11 02:48:15
mads@kiilerich.com
autocompletion: drop explicit container elements - just create them when necessary

The previous wide styling of the @mention selection list didn't look pretty -
just use the default width.

Inspired by select2 port by Dominik Ruf.
5 files changed with 15 insertions and 35 deletions:
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
Show inline comments
 
@@ -1951,14 +1951,6 @@ table.code-browser i[class^='icon-'] {
 
    z-index: 2;
 
}
 

	
 

	
 
.mentions-container {
 
    width: 90% !important;
 
}
 
.mentions-container .yui-ac-content {
 
    width: 100% !important;
 
}
 

	
 
.ac {
 
    vertical-align: top;
 
}
kallithea/public/js/base.js
Show inline comments
 
@@ -649,7 +649,6 @@ function _comment_div_append_form($comme
 
    $comment_div.append($form_div);
 
    var $form = $comment_div.find("form");
 
    var $textarea = $form.find('textarea');
 
    var $mentions_container = $form.find('div.mentions-container');
 

	
 
    $form.submit(function(e) {
 
        e.preventDefault();
 
@@ -713,7 +712,7 @@ function _comment_div_append_form($comme
 

	
 
    tooltip_activate();
 
    if ($textarea.length > 0) {
 
        MentionsAutoComplete($textarea, $mentions_container, _USERS_AC_DATA);
 
        MentionsAutoComplete($textarea, _USERS_AC_DATA);
 
    }
 
    if (f_path) {
 
        $textarea.focus();
 
@@ -1113,7 +1112,8 @@ var autocompleteFormatter = function (oR
 
};
 

	
 
// Generate a basic autocomplete instance that can be tweaked further by the caller
 
var autocompleteCreate = function ($inputElement, $container, matchFunc) {
 
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);
 
@@ -1127,13 +1127,13 @@ var autocompleteCreate = function ($inpu
 
    return autocomplete;
 
}
 

	
 
var SimpleUserAutoComplete = function ($inputElement, $container, users_list) {
 
var SimpleUserAutoComplete = function ($inputElement, users_list) {
 

	
 
    var matchUsers = function (sQuery) {
 
        return autocompleteMatchUsers(sQuery, users_list);
 
    }
 

	
 
    var userAC = autocompleteCreate($inputElement, $container, matchUsers);
 
    var userAC = autocompleteCreate($inputElement, matchUsers);
 

	
 
    // Handler for selection of an entry
 
    var itemSelectHandler = function (sType, aArgs) {
 
@@ -1145,7 +1145,7 @@ var SimpleUserAutoComplete = function ($
 
    userAC.itemSelectEvent.subscribe(itemSelectHandler);
 
}
 

	
 
var MembersAutoComplete = function ($inputElement, $container, users_list, groups_list) {
 
var MembersAutoComplete = function ($inputElement, users_list, groups_list) {
 

	
 
    var matchAll = function (sQuery) {
 
        var u = autocompleteMatchUsers(sQuery, users_list);
 
@@ -1153,7 +1153,7 @@ var MembersAutoComplete = function ($inp
 
        return u.concat(g);
 
    };
 

	
 
    var membersAC = autocompleteCreate($inputElement, $container, matchAll);
 
    var membersAC = autocompleteCreate($inputElement, matchAll);
 

	
 
    // Handler for selection of an entry
 
    var itemSelectHandler = function (sType, aArgs) {
 
@@ -1175,8 +1175,7 @@ var MembersAutoComplete = function ($inp
 
    membersAC.itemSelectEvent.subscribe(itemSelectHandler);
 
}
 

	
 
var MentionsAutoComplete = function ($inputElement, $container, users_list) {
 

	
 
var MentionsAutoComplete = function ($inputElement, users_list) {
 
    var matchUsers = function (sQuery) {
 
            var org_sQuery = sQuery;
 
            if(this.mentionQuery == null){
 
@@ -1186,7 +1185,7 @@ var MentionsAutoComplete = function ($in
 
            return autocompleteMatchUsers(sQuery, users_list);
 
    }
 

	
 
    var mentionsAC = autocompleteCreate($inputElement, $container, matchUsers);
 
    var mentionsAC = autocompleteCreate($inputElement, matchUsers);
 
    mentionsAC.suppressInputUpdate = true;
 
    // Overwrite formatResult to take into account mentionQuery
 
    mentionsAC.formatResult = function (oResultData, sQuery, sResultMatch) {
 
@@ -1307,13 +1306,12 @@ var removeReviewMember = function(review
 
}
 

	
 
/* activate auto completion of users as PR reviewers */
 
var PullRequestAutoComplete = function ($inputElement, $container, users_list) {
 

	
 
var PullRequestAutoComplete = function ($inputElement, users_list) {
 
    var matchUsers = function (sQuery) {
 
        return autocompleteMatchUsers(sQuery, users_list);
 
    };
 

	
 
    var reviewerAC = autocompleteCreate($inputElement, $container, matchUsers);
 
    var reviewerAC = autocompleteCreate($inputElement, matchUsers);
 
    reviewerAC.suppressInputUpdate = true;
 

	
 
    // Handler for selection of an entry
 
@@ -1341,15 +1339,13 @@ function addPermAction(perm_type, users_
 
            '<div class="perm_ac" id="perm_ac_{0}">' +
 
                '<input class="yui-ac-input" id="perm_new_member_name_{0}" name="perm_new_member_name_{0}" value="" type="text">' +
 
                '<input id="perm_new_member_type_{0}" name="perm_new_member_type_{0}" value="" type="hidden">' +
 
                '<div id="perm_container_{0}"></div>' +
 
            '</div>' +
 
        '</td>' +
 
        '<td></td>';
 
    var $last_node = $('.last_new_member').last(); // empty tr between last and add
 
    var next_id = $('.new_members').length;
 
    $last_node.before($('<tr class="new_members">').append(template.format(next_id, perm_type)));
 
    MembersAutoComplete($("#perm_new_member_name_"+next_id),
 
            $("#perm_container_"+next_id), users_list, groups_list);
 
    MembersAutoComplete($("#perm_new_member_name_"+next_id), users_list, groups_list);
 
}
 

	
 
function ajaxActionRevokePermission(url, obj_id, obj_type, field_id, extra_data) {
kallithea/templates/admin/repos/repo_edit_settings.html
Show inline comments
 
@@ -44,7 +44,6 @@ ${h.form(url('update_repo', repo_name=c.
 
                    <div class="perm_ac">
 
                       ${h.text('owner',class_='yui-ac-input form-control')}
 
                       <span class="help-block">${_('Change owner of this repository.')}</span>
 
                       <div id="owner_container"></div>
 
                    </div>
 
                </div>
 
             </div>
 
@@ -124,6 +123,6 @@ ${h.form(url('update_repo', repo_name=c.
 

	
 
        // autocomplete
 
        var _USERS_AC_DATA = ${h.js(c.users_array)};
 
        SimpleUserAutoComplete($('#owner'), $('#owner_container'), _USERS_AC_DATA);
 
        SimpleUserAutoComplete($('#owner'), _USERS_AC_DATA);
 
    });
 
</script>
kallithea/templates/changeset/changeset_file_comment.html
Show inline comments
 
@@ -57,7 +57,6 @@
 
        <div class="comment-help">${_('Commenting on line.')}
 
          <span class="text-muted">${_('Comments are in plain text. Use @username inside this text to notify another user.')|n}</span>
 
        </div>
 
        <div class="mentions-container"></div>
 
        <textarea name="text" class="form-control comment-block-ta yui-ac-input"></textarea>
 

	
 
        <div id="status_block_container" class="status-block general-only hidden">
 
@@ -158,10 +157,6 @@
 

	
 
## MAIN COMMENT FORM
 
<%def name="comments(change_status=True)">
 

	
 
## global, shared for all edit boxes
 
<div class="mentions-container" id="mentions_container"></div>
 

	
 
<div class="inline-comments inline-comments-general
 
            ${'show-general-status' if change_status else ''}">
 
  <div id="comments-general-comments" class="">
kallithea/templates/pullrequests/pullrequest_show.html
Show inline comments
 
@@ -140,7 +140,6 @@ ${self.repo_context_bar('showpullrequest
 
          </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 id="owner_completion_container"></div>
 
          </div>
 
        </div>
 

	
 
@@ -243,7 +242,6 @@ ${self.repo_context_bar('showpullrequest
 
          <div class='ac'>
 
            <div class="reviewer_ac">
 
               ${h.text('user', class_='yui-ac-input form-control',placeholder=_('Type name of reviewer to add'))}
 
               <div id="reviewers_container"></div>
 
            </div>
 
          </div>
 
          %endif
 
@@ -360,8 +358,8 @@ ${self.repo_context_bar('showpullrequest
 

	
 
    <script type="text/javascript">
 
      $(document).ready(function(){
 
          PullRequestAutoComplete($('#user'), $('#reviewers_container'), _USERS_AC_DATA);
 
          SimpleUserAutoComplete($('#owner'), $('#owner_completion_container'), _USERS_AC_DATA);
 
          PullRequestAutoComplete($('#user'), _USERS_AC_DATA);
 
          SimpleUserAutoComplete($('#owner'), _USERS_AC_DATA);
 

	
 
          $('.code-difftable').on('click', '.add-bubble', function(e){
 
              show_comment_form($(this));
0 comments (0 inline, 0 general)