Add support for side-by-side inline comments

app/assets/stylesheets/sections/diff.scss

@@ -63,23 +63,14 @@
       }
     }
 
-    .text-file-parallel div {
-      display: inline-block;
-      padding-bottom: 16px;
-    }
-    .diff-side {
-      overflow-x: scroll;
-      width: 508px;
-    }
-    .diff-side.diff-side-left{
-      overflow-y:hidden;
+    tr.line_holder.parallel{
+      .old_line, .new_line, .diff_line {
+        min-width: 50px;
       }
-    .diff-side table, td.diff-middle table {
+
+      td.line_content.parallel{
+        width: 50%;
       }
-    .diff-middle {
-      width: 114px;
-      vertical-align: top;
-      overflow: hidden
     }
 
     .old_line, .new_line, .diff_line {

app/assets/stylesheets/sections/notes.scss

@@ -139,6 +139,7 @@ ul.notes {
       background-color: #fff;
       border-width: 1px 0;
       padding-top: 0;
+      vertical-align: top;
 
       li {
         padding: 5px;

app/views/projects/commits/_parallel_view.html.haml

@@ -2,54 +2,37 @@
 - old_lines, new_lines = parallel_diff_lines(project, @commit, diff, file)
 - num_lines = old_lines.length
 
-%div.text-file-parallel
-  %div.diff-side.diff-side-left
-    %table
-      - old_lines.each do |line|
-
-        %tr.line_holder.parallel
-          - if line.type == :file_created
-            %td.line_content.parallel= "File was created"
-          - elsif line.type == :deleted
-            %td.line_content{class: "parallel noteable_line old #{line.code}", "line_code" => line.code }= line.content
-          - else line.type == :no_change
-            %td.line_content.parallel= line.content
-
-  %div.diff-middle
+%div.text-file
   %table
     - num_lines.times do |index|
-        %tr
-          - if old_lines[index].type == :deleted
-            %td.old_line.old= old_lines[index].num
-          - else
-            %td.old_line= old_lines[index].num
-
-          %td.diff_line=""
-
-          - if new_lines[index].type == :added
-            %td.new_line.new= new_lines[index].num
-          - else
-            %td.new_line= new_lines[index].num
-
-  %div.diff-side.diff-side-right
-    %table
-      - new_lines.each do |line|
-
+      - new_line = new_lines[index]
+      - old_line = old_lines[index]
       %tr.line_holder.parallel
-          - if line.type == :file_deleted
+        -# For old line
+        - if old_line.type == :file_created
+          %td.old_line= old_line.num
+          %td.line_content.parallel= "File was created"
+        - elsif old_line.type == :deleted
+          %td.old_line.old= old_line.num
+          %td.line_content{class: "parallel noteable_line old #{old_line.code}", "line_code" => old_line.code}= old_line.content
+        - else old_line.type == :no_change
+          %td.old_line= old_line.num
+          %td.line_content.parallel= old_line.content
+
+        -# For new line
+        - if new_line.type == :file_deleted
+          %td.new_line= new_line.num
           %td.line_content.parallel= "File was deleted"
-          - elsif line.type == :added
-            %td.line_content{class: "parallel noteable_line new #{line.code}", "line_code" => line.code }= line.content
-          - else line.type == :no_change
-            %td.line_content.parallel= line.content
-
-:javascript
-  $('.diff-side-right').on('scroll', function(){
-    $('.diff-side-left, .diff-middle').scrollTop($(this).scrollTop());
-    $('.diff-side-left').scrollLeft($(this).scrollLeft());
-  });
+        - elsif new_line.type == :added
+          %td.new_line.new= new_line.num
+          %td.line_content{class: "parallel noteable_line new #{new_line.code}", "line_code" => new_line.code}= new_line.content
+        - else new_line.type == :no_change
+          %td.new_line= new_line.num
+          %td.line_content.parallel= new_line.content
+
+      - if @reply_allowed
+        - comments1 = @line_notes.select { |n| n.line_code == old_line.code }.sort_by(&:created_at)
+        - comments2 = @line_notes.select { |n| n.line_code == new_line.code }.sort_by(&:created_at)
+        - unless comments1.empty? and comments2.empty?
+          = render "projects/notes/diff_notes_with_reply_parallel", notes1: comments1, notes2: comments2
 
-  $('.diff-side-left').on('scroll', function(){
-    $('.diff-side-right, .diff-middle').scrollTop($(this).scrollTop()); // might never be relevant
-    $('.diff-side-right').scrollLeft($(this).scrollLeft());
-  });

app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml

 - note1 = notes1.first # example note
 - note2 = notes2.first # example note
+-# Check if line want not changed since comment was left
+/- if !defined?(line) || line == note.diff_line
 %tr.notes_holder.js-toggle-content
-  -# Check if line want not changed since comment was left
-  /- if !defined?(line1) || line1 == note1.diff_line
   - if note1
+    %td.notes_line
+      %span.btn.disabled
+        %i.icon-comment
+        = notes1.count
     %td.notes_content
       %ul.notes{ rel: note1.discussion_id }
         = render notes1
+
       = render "projects/notes/discussion_reply_button", note: note1
-    %td.notes_line2
-      %span.btn.disabled.parallel-comment
-        %i.icon-comment
-        = notes1.count
   - else
     %td= ""
     %td= ""
 
-  %td= ""
-
-  -# Check if line want not changed since comment was left
-  /- if !defined?(line2) || line2 == note2.diff_line
   - if note2
     %td.notes_line
-      %span.btn.disabled.parallel-comment
+      %span.btn.disabled
         %i.icon-comment
         = notes2.count
     %td.notes_content
       %ul.notes{ rel: note2.discussion_id }
         = render notes2
+
       = render "projects/notes/discussion_reply_button", note: note2
   - else
     %td= ""
     %td= ""
+