Changeset - e4d2fec64955
Parent rev.
Child rev.
[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:
kallithea/public/css/style.css
8
kallithea/public/js/base.js
12
16
kallithea/templates/admin/repos/repo_edit_settings.html
1
2
kallithea/templates/changeset/changeset_file_comment.html
5
kallithea/templates/pullrequests/pullrequest_show.html
2
4
0 comments (0 inline, 0 general)
kallithea/public/css/style.css
➞
Show inline comments
 
@@ -1948,20 +1948,12 @@ table.code-browser i[class^='icon-'] {
 
.yui-overlay, .yui-panel-container {
 
    visibility: hidden;
 
    position: absolute;
 
    z-index: 2;
 
}
 

			




	
	
	
		
 

			




	
	
	
		
 
.mentions-container {

			




	
	
	
		
 
    width: 90% !important;

			




	
	
	
		
 
}

			




	
	
	
		
 
.mentions-container .yui-ac-content {

			




	
	
	
		
 
    width: 100% !important;

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
.ac {

			




	
	
	
		
 
    vertical-align: top;

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
	
		
 
.ac .yui-ac {

			




	
	
	
		
 
    position: inherit;

			




        

    


    
    

    

        

                

                    kallithea/public/js/base.js
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -646,13 +646,12 @@ function _comment_div_append_form($comme

			




	
	
	
		
 
    var $form_div = $('#comment-inline-form-template').children()

			




	
	
	
		
 
        .clone()

			




	
	
	
		
 
        .addClass('comment-inline-form');

			




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

			




	
	
	
		
 

			




	
	
	
		
 
        var text = $textarea.val();

			




	
	
	
		
 
        var review_status = $form.find('input:radio[name=changeset_status]:checked').val();

			




	
	
		
 
@@ -710,13 +709,13 @@ function _comment_div_append_form($comme

			




	
	
	
		
 
    $form.find('.hide-inline-form').click(function(e) {

			




	
	
	
		
 
        comment_div_state($comment_div, f_path, line_no);

			




	
	
	
		
 
    });

			




	
	
	
		
 

			




	
	
	
		
 
    tooltip_activate();

			




	
	
	
		
 
    if ($textarea.length > 0) {

			




	
	
	
		
 
        MentionsAutoComplete($textarea, $mentions_container, _USERS_AC_DATA);

			




	
	
	
		
 
        MentionsAutoComplete($textarea, _USERS_AC_DATA);

			




	
	
	
		
 
    }

			




	
	
	
		
 
    if (f_path) {

			




	
	
	
		
 
        $textarea.focus();

			




	
	
	
		
 
    }

			




	
	
	
		
 
}

			




	
	
	
		
 

			




	
	
		
 
@@ -1110,13 +1109,14 @@ var autocompleteFormatter = function (oR

			




	
	
	
		
 
    } else {

			




	
	
	
		
 
        return '';

			




	
	
	
		
 
    }

			




	
	
	
		
 
};

			




	
	
	
		
 

			




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

			




	
	
	
		
 
    autocomplete.useShadow = false;

			




	
	
	
		
 
    autocomplete.resultTypeList = false;

			




	
	
	
		
 
    autocomplete.animVert = false;

			




	
	
		
 
@@ -1124,39 +1124,39 @@ var autocompleteCreate = function ($inpu

			




	
	
	
		
 
    autocomplete.animSpeed = 0.1;

			




	
	
	
		
 
    autocomplete.formatResult = autocompleteFormatter;

			




	
	
	
		
 

			




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

			




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

			




	
	
	
		
 
}

			




	
	
	
		
 

			




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

			




	
	
	
		
 
        var g = autocompleteMatchGroups(sQuery, groups_list);

			




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

			




	
	
	
		
 
        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

			




	
	
		
 
@@ -1172,24 +1172,23 @@ var MembersAutoComplete = function ($inp

			




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

			




	
	
	
		
 
        }

			




	
	
	
		
 
    };

			




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

			




	
	
	
		
 
                return []

			




	
	
	
		
 
            }

			




	
	
	
		
 
            sQuery = this.mentionQuery;

			




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

			




	
	
	
		
 
        var org_sQuery = sQuery;

			




	
	
	
		
 
        if (this.dataSource.mentionQuery != null) {

			




	
	
	
		
 
            sQuery = this.dataSource.mentionQuery;

			




	
	
		
 
@@ -1304,19 +1303,18 @@ var removeReviewMember = function(review

			




	
	
	
		
 
    $li.find('div div').css("text-decoration", "line-through");

			




	
	
	
		
 
    $li.find('input').prop('name', 'review_members_removed');

			




	
	
	
		
 
    $li.find('.reviewer_member_remove').replaceWith('&nbsp;(remove not saved)');

			




	
	
	
		
 
}

			




	
	
	
		
 

			




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

			




	
	
	
		
 
    if(reviewerAC.itemSelectEvent){

			




	
	
	
		
 
        reviewerAC.itemSelectEvent.subscribe(function (sType, aArgs) {

			




	
	
	
		
 
            var myAC = aArgs[0]; // reference back to the AC instance

			




	
	
		
 
@@ -1338,21 +1336,19 @@ function addPermAction(perm_type, users_

			




	
	
	
		
 
        '<td><input type="radio" value="{1}.write" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +

			




	
	
	
		
 
        '<td><input type="radio" value="{1}.admin" name="perm_new_member_{0}" id="perm_new_member_{0}"></td>' +

			




	
	
	
		
 
        '<td class="ac">' +

			




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

			




	
	
	
		
 
    var success = function (o) {

			




	
	
	
		
 
            $('#' + field_id).remove();

			




	
	
	
		
 
        };

			




        

    


    
    

    

        

                

                    kallithea/templates/admin/repos/repo_edit_settings.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -41,13 +41,12 @@ ${h.form(url('update_repo', repo_name=c.

			




	
	
	
		
 
            <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 id="owner_container"></div>

			




	
	
	
		
 
                    </div>

			




	
	
	
		
 
                </div>

			




	
	
	
		
 
             </div>

			




	
	
	
		
 
            <div class="form-group">

			




	
	
	
		
 
                <label class="control-label" for="repo_description">${_('Description')}:</label>

			




	
	
	
		
 
                <div>

			




	
	
		
 
@@ -121,9 +120,9 @@ ${h.form(url('update_repo', repo_name=c.

			




	
	
	
		
 
        $('#repo_group').select2({

			




	
	
	
		
 
            'dropdownAutoWidth': true

			




	
	
	
		
 
        });

			




	
	
	
		
 

			




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

        

        

            



	
	
		
 
@@ -54,13 +54,12 @@

			




	
	
	
		
 
  %if request.authuser.username != 'default':

			




	
	
	
		
 
    ${h.form('#', class_='inline-form')}

			




	
	
	
		
 
      <div class="well well-sm clearfix">

			




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

			




	
	
	
		
 
                %if c.pull_request is None:

			




	
	
	
		
 
                  ${_('Set changeset status')}:

			




	
	
	
		
 
                %else:

			




	
	
		
 
@@ -155,16 +154,12 @@

			




	
	
	
		
 
    ${comment_count(c.inline_cnt, len(c.comments))}

			




	
	
	
		
 
</div>

			




	
	
	
		
 
</%def>

			




	
	
	
		
 

			




	
	
	
		
 
## 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="">

			




	
	
	
		
 
  ## comment_div for general comments

			




	
	
	
		
 
  </div>

			




	
	
	
		
 
</div>

			




        

    


    
    

    

        

                

                    kallithea/templates/pullrequests/pullrequest_show.html
                

                

                  
                      
                        

                      ➞

                      
                        
                  

                  
                      
                  
                      
                  
                      
                  
                      
                  
                  
                

                

                    Show inline comments
                    
                

        

        

            



	
	
		
 
@@ -137,13 +137,12 @@ ${self.repo_context_bar('showpullrequest

			




	
	
	
		
 
                  ${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 id="owner_completion_container"></div>

			




	
	
	
		
 
          </div>

			




	
	
	
		
 
        </div>

			




	
	
	
		
 

			




	
	
	
		
 
        <div class="form-group">

			




	
	
	
		
 
          <label>${_('Next iteration')}:</label>

			




	
	
	
		
 
            <div>

			




	
	
		
 
@@ -240,13 +239,12 @@ ${self.repo_context_bar('showpullrequest

			




	
	
	
		
 
            </ul>

			




	
	
	
		
 
          </div>

			




	
	
	
		
 
          %if editable:

			




	
	
	
		
 
          <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

			




	
	
	
		
 
        </div>

			




	
	
	
		
 

			




	
	
	
		
 
        %if not c.pull_request_reviewers:

			




	
	
		
 
@@ -357,14 +355,14 @@ ${self.repo_context_bar('showpullrequest

			




	
	
	
		
 

			




	
	
	
		
 
    ## main comment form and it status

			




	
	
	
		
 
    ${comment.comments(change_status=c.allowed_to_change_status)}

			




	
	
	
		
 

			




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

			




	
	
	
		
 
          });

			




	
	
	
		
 

			




	
	
	
		
 
          var avail_jsdata = ${h.js(c.avail_jsdata)};

			




        

    



    


    



    



      

      





    
    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.