(refs #564) Comment for side-by-side diff available

src/main/twirl/helper/diff.scala.html

@@ -114,6 +114,7 @@ $(function(){
   });
 
   function renderDiffs(viewType){
+    window.viewType = viewType;
     @diffs.zipWithIndex.map { case (diff, i) =>
       @if(diff.newContent != None || diff.oldContent != None){
         if($('#oldText-@i').length > 0){
@@ -122,26 +123,43 @@ $(function(){
       }
     }
     @if(showLineNotes){
+      function getInlineContainer(where) {
+        if (viewType == 0) {
+          if (where === 'new') {
+            return $('<tr class="not-diff"><td colspan="2"></td><td colspan="2" class="comment-box-container"></td></tr>');
+          } else if (where === 'old') {
+            return $('<tr class="not-diff"><td colspan="2" class="comment-box-container"></td><td colspan="2"></td></tr>');
+          }
+        }
+        return $('<tr class="not-diff"><td colspan="3" class="comment-box-container"></td></tr>');
+      }
       $('.inline-comment').each(function(i, v) {
         var $v = $(v), filename = $v.attr('filename'),
-        oldline = $v.attr('oldline'), newline = $v.attr('newline'),
+        oldline = $v.attr('oldline'), newline = $v.attr('newline');
-        tmp = $('<tr class="not-diff"><td colspan="3" style="white-space: initial; line-height: initial; padding: 10px;"></td></tr>');
-        tmp.children('td').html($(this).clone().show());
         if (typeof $('#show-notes')[0] !== 'undefined' && !$('#show-notes')[0].checked) {
           $(this).hide();
         }
         if (typeof oldline !== 'undefined') {
-          $('table[filename="' + filename + '"]').find('table.inlinediff').find('.oldline').filter(function() {
+          var tmp;
-            return new RegExp('^' + oldline + '$').test($(this).text());
+          if (typeof newline !== 'undefined') {
+            tmp = getInlineContainer();
+          } else {
+            tmp = getInlineContainer('old');
+          }
+          tmp.children('td:first').html($(this).clone().show());
+          $('table[filename="' + filename + '"]').find('table.diff').find('.oldline').filter(function() {
+            return new RegExp('^' + oldline + '[\\+]*$').test($(this).text());
           }).parent().nextAll(':not(.not-diff):first').before(tmp);
         } else {
-          $('table[filename="' + filename + '"]').find('table.inlinediff').find('.newline').filter(function() {
+          var tmp = getInlineContainer('new');
+          tmp.children('td:last').html($(this).clone().show());
+          $('table[filename="' + filename + '"]').find('table.diff').find('.newline').filter(function() {
             return new RegExp('^' + newline + '\\+$').test($(this).text());
           }).parent().nextAll(':not(.not-diff):first').before(tmp);
         }
       });
       @if(hasWritePermission) {
-        $('table.diff tr').hover(
+        $('table.diff th').hover(
           function() {
             $(this).find('b').css('display', 'inline-block');
           },
@@ -149,32 +167,54 @@ $(function(){
             $(this).find('b').css('display', 'none');
           }
         );
-      $('.add-comment').click(function() {
+        $('table.diff td').hover(
-        var $this = $(this),
+          function() {
-        $tr = $(this).closest('tr');
+            $(this).prev('th').find('b').css('display', 'inline-block');
-        if (!$tr.nextAll(':not(.not-diff):first').prev().hasClass('inline-comment-form')) {
+          },
-          var commitId = $(this).closest('.table-bordered').attr('commitId'),
+          function() {
-          fileName = $(this).closest('.table-bordered').attr('fileName'),
+            $(this).prev('th').find('b').css('display', 'none');
-          oldLineNumber = $(this).closest('.newline').prev('.oldline').text(),
-          newLineNumber = $(this).closest('.newline').clone().children().remove().end().text(),
-          url = '@url(repository)/commit/' + commitId + '/comment/_form?fileName=' + fileName @if(issueId.isDefined){+ '&issueId=@issueId.get'}
-          if (!isNaN(oldLineNumber) && oldLineNumber != null && oldLineNumber !== '') {
-            url += ('&oldLineNumber=' + oldLineNumber)
           }
-          if (!isNaN(newLineNumber) && newLineNumber != null && newLineNumber !== '') {
+        );
-            url += ('&newLineNumber=' + newLineNumber)
+        $('.add-comment').click(function() {
-          }
+          var $this = $(this),
-          $.get(
+          $tr = $this.closest('tr');
-            url,
+          if (!$tr.nextAll(':not(.not-diff):first').prev().hasClass('inline-comment-form')) {
-            {
+            var commitId = $this.closest('.table-bordered').attr('commitId'),
-              dataType : 'html'
+            fileName = $this.closest('.table-bordered').attr('fileName'),
-            },
+            oldLineNumber, newLineNumber = $this.closest('.newline').clone().children().remove().end().text(),
-            function(responseContent) {
+            url = '@url(repository)/commit/' + commitId + '/comment/_form?fileName=' + fileName @if(issueId.isDefined){+ '&issueId=@issueId.get'};
-              $this.hide();
+            if (viewType == 0) {
-              var tmp = $('<tr class="inline-comment-form not-diff"><td colspan="3" style="white-space: initial; padding: 10px;"></td></tr>');
+              oldLineNumber = $this.closest('.oldline').clone().children().remove().end().text();
-              tmp.children('td').html(responseContent);
+            } else {
-              $tr.nextAll(':not(.not-diff):first').before(tmp);
+              oldLineNumber = $this.closest('tr').find('.oldline').text();
-            });
+            }
+            if (!isNaN(oldLineNumber) && oldLineNumber) {
+              url += ('&oldLineNumber=' + oldLineNumber)
+            }
+            if (!isNaN(newLineNumber) && newLineNumber) {
+              url += ('&newLineNumber=' + newLineNumber)
+            }
+            $.get(
+              url,
+              {
+                dataType : 'html'
+              },
+              function(responseContent) {
+                $this.hide();
+                var tmp;
+                if (!isNaN(oldLineNumber) && oldLineNumber) {
+                  if (!isNaN(newLineNumber) && newLineNumber) {
+                    tmp = getInlineContainer();
+                  } else {
+                    tmp = getInlineContainer('old');
+                  }
+                } else {
+                  tmp = getInlineContainer('new');
+                }
+                tmp.addClass('inline-comment-form').children('.comment-box-container').html(responseContent);
+                $tr.nextAll(':not(.not-diff):first').before(tmp);
+              }
+            );
           }
         });
         $('table.diff').on('click', '.btn-default', function() {

src/main/twirl/repo/commentform.scala.html

@@ -47,7 +47,17 @@
         type: 'POST',
         data: param
       }).done(function(data) {
-        $form.closest('tr').removeClass('inline-comment-form').find('td').html('<td colspan="3"></td>').html(data);
+        var tmp;
+        if (window.viewType == 0) {
+          tmp = '@(oldLineNumber, newLineNumber) match {
+            case (Some(_), None) => {<td colspan="2" class="comment-box-container"></td><td colspan="2"></td>}
+            case (None, Some(_)) => {<td colspan="2"></td><td colspan="2" class="comment-box-container"></td>}
+            case _ => {<td colspan="3" class="comment-box-container"></td>}
+          }'
+        } else {
+          tmp = '<td colspan="3" class="comment-box-container"></td>'
+        }
+        $form.closest('tr').removeClass('inline-comment-form').html(tmp).find('.comment-box-container').html(data);
         $('#comment-list').append(data);
         if (typeof $('#show-notes')[0] !== 'undefined' && !$('#show-notes')[0].checked) {
           $('#comment-list').children('.inline-comment').hide();

src/main/webapp/assets/common/css/gitbucket.css

@@ -1003,6 +1003,12 @@ table.diff tbody tr.not-diff:hover td{
     background-color: #fff;
 }
 
+.not-diff > .comment-box-container {
+    white-space: initial;
+    line-height: initial;
+    padding: 10px;
+}
+
 /****************************************************************************/
 /* Repository Settings */
 /****************************************************************************/

src/main/webapp/assets/vendors/jsdifflib/diffview.js

@@ -116,9 +116,9 @@ diffview = {
 		 * be returned.	 Otherwise, tidx is returned, and two empty cells are added
 		 * to the given row.
 		 */
-		function addCells (row, tidx, tend, textLines, change) {
+		function addCells (row, tidx, tend, textLines, change, thclass) {
 			if (tidx < tend) {
-				row.appendChild(telt("th", (tidx + 1).toString()));
+				row.appendChild(addButton(ctelt("th", thclass, (tidx + 1).toString())));
 				row.appendChild(ctelt("td", change, textLines[tidx].replace(/\t/g, "\u00a0\u00a0\u00a0\u00a0")));
 				return tidx + 1;
 			} else {
@@ -188,8 +188,8 @@ diffview = {
 						if (b < be) changeBase = "delete";
 						if (n < ne) changeNew = "insert";
 					}
-					b = addCells(node, b, be, baseTextLines, changeBase);
+					b = addCells(node, b, be, baseTextLines, changeBase, "oldline");
-					n = addCells(node, n, ne, newTextLines, changeNew);
+					n = addCells(node, n, ne, newTextLines, changeNew, "newline");
 				}
 			}