Mercurial > kallithea

changeset 6788:e4d2fec64955

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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.
author Mads Kiilerich <mads@kiilerich.com>
date Fri, 11 Aug 2017 02:48:15 +0200
parents eb4bdc324875
children 4d04ac08fff7
files kallithea/public/css/style.css kallithea/public/js/base.js kallithea/templates/admin/repos/repo_edit_settings.html kallithea/templates/changeset/changeset_file_comment.html kallithea/templates/pullrequests/pullrequest_show.html
diffstat 5 files changed, 15 insertions(+), 35 deletions(-) [+]
line wrap: on
line diff
--- a/kallithea/public/css/style.css	Mon Aug 07 23:15:30 2017 +0200
+++ b/kallithea/public/css/style.css	Fri Aug 11 02:48:15 2017 +0200
@@ -1951,14 +1951,6 @@
     z-index: 2;
 }
 
-
-.mentions-container {
-    width: 90% !important;
-}
-.mentions-container .yui-ac-content {
-    width: 100% !important;
-}
-
 .ac {
     vertical-align: top;
 }
--- a/kallithea/public/js/base.js	Mon Aug 07 23:15:30 2017 +0200
+++ b/kallithea/public/js/base.js	Fri Aug 11 02:48:15 2017 +0200
@@ -649,7 +649,6 @@
     $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 @@
 
     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 @@
 };
 
 // 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 @@
     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 @@
     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 @@
         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 @@
     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 @@
             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 @@
 }
 
 /* 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 @@
             '<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) {
--- a/kallithea/templates/admin/repos/repo_edit_settings.html	Mon Aug 07 23:15:30 2017 +0200
+++ b/kallithea/templates/admin/repos/repo_edit_settings.html	Fri Aug 11 02:48:15 2017 +0200
@@ -44,7 +44,6 @@
                     <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 @@
 
         // autocomplete
         var _USERS_AC_DATA = ${h.js(c.users_array)};
-        SimpleUserAutoComplete($('#owner'), $('#owner_container'), _USERS_AC_DATA);
+        SimpleUserAutoComplete($('#owner'), _USERS_AC_DATA);
     });
 </script>
--- a/kallithea/templates/changeset/changeset_file_comment.html	Mon Aug 07 23:15:30 2017 +0200
+++ b/kallithea/templates/changeset/changeset_file_comment.html	Fri Aug 11 02:48:15 2017 +0200
@@ -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="">
--- a/kallithea/templates/pullrequests/pullrequest_show.html	Mon Aug 07 23:15:30 2017 +0200
+++ b/kallithea/templates/pullrequests/pullrequest_show.html	Fri Aug 11 02:48:15 2017 +0200
@@ -140,7 +140,6 @@
           </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 @@
           <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 @@
 
     <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));