diffs: adding inline comment toggle fixes #2884

rhodecode/lib/diffs.py

@@ -55,6 +55,7 @@ def wrap_to_table(str_):
     return '''<table class="code-difftable">
                 <tr class="line no-comment">
                 <td class="add-comment-line tooltip" title="%s"><span class="add-comment-content"></span></td>
+                <td></td>
                 <td class="lineno new"></td>
                 <td class="code no-comment"><pre>%s</pre></td>
                 </tr>
@@ -691,14 +692,14 @@ class DiffProcessor(object):
                         anchor_link = False
 
                     ###########################################################
-                    # COMMENT ICON
+                    # COMMENT ICONS
                     ###########################################################
                     _html.append('''\t<td class="add-comment-line"><span class="add-comment-content">''')
 
                     if enable_comments and change['action'] != Action.CONTEXT:
                         _html.append('''<a href="#"><span class="icon-comment-add"></span></a>''')
 
-                    _html.append('''</span></td>\n''')
+                    _html.append('''</span></td><td class="comment-toggle tooltip" title="Toggle Comments"><i class="icon-comment"></i></td>\n''')
 
                     ###########################################################
                     # OLD LINE NUMBER

rhodecode/public/css/diff.less

@@ -31,6 +31,18 @@ div.diffblock.margined.comm tr {
         }
     }
 
+    .comment-toggle {
+        display: inline-block;
+        visibility: hidden;
+        width: 20px;
+        color: @rcblue;
+
+        &.active {
+            visibility: visible;
+            cursor: pointer;
+        }
+    }
+
     &.line {
         &:hover, &.hover{
             .add-comment-line a{

rhodecode/public/js/src/rhodecode/comments.js

@@ -38,7 +38,8 @@ var tableTr = function(cls, body){
   var comment_id = fromHTML(body).children[0].id.split('comment-')[1];
   var id = 'comment-tr-{0}'.format(comment_id);
   var _html = ('<table><tbody><tr id="{0}" class="{1}">'+
-               '<td class="add-comment-line"><span class="add-comment-content"></span></td>'+
+               '<td class="add-comment-line tooltip tooltip" title="Add Comment"><span class="add-comment-content"></span></td>'+
+               '<td></td>'+
                '<td></td>'+
                '<td></td>'+
                '<td>{2}</td>'+
@@ -303,11 +304,24 @@ var placeInline = function(target_container, lineno, html, show_add_button) {
     if (show_add_button) {
       placeAddButton(root_parent);
     }
+    addCommentToggle(target_line);
   }
 
   return target_line;
 };
 
+var addCommentToggle = function(target_line) {
+  // exposes comment toggle button
+  $(target_line).siblings('.comment-toggle').addClass('active');
+  return;
+};
+
+var bindToggleButtons = function() {
+  $('.comment-toggle').on('click', function() {
+        $(this).parent().nextUntil('tr.line').toggle('inline-comments');
+  });
+};
+
 var linkifyComments = function(comments) {
 
   for (var i = 0; i < comments.length; i++) {

rhodecode/templates/changeset/changeset_file_comment.html

@@ -307,6 +307,6 @@
             "#${form_id}", commitId, pullRequestId, lineNo, true);
 
     mainCommentForm.initStatusChangeSelector();
-
+    bindToggleButtons();
 </script>
 </%def>