Add support for side-by-side inline comments

Chenguang Zhang
1 parent 728bdfc5
Showing 4 changed files with 52 additions and 78 deletions Show diff stats
app/assets/stylesheets/sections/diff.scss
app/assets/stylesheets/sections/notes.scss
app/views/projects/commits/_parallel_view.html.haml
app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
@@ -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;
-    }
-    .diff-side table, td.diff-middle table {
-    }
-    .diff-middle {
-      width: 114px;
-      vertical-align: top;
-      overflow: hidden
+    tr.line_holder.parallel{
+      .old_line, .new_line, .diff_line {
+        min-width: 50px;
+      }
+
+      td.line_content.parallel{
+        width: 50%;
+      }
     }
  
     .old_line, .new_line, .diff_line {
@@ -139,6 +139,7 @@ ul.notes {
       background-color: #fff;
       border-width: 1px 0;
       padding-top: 0;
+      vertical-align: top;
  
       li {
         padding: 5px;
@@ -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|
+%div.text-file
+  %table
+    - num_lines.times do |index|
+      - new_line = new_lines[index]
+      - old_line = old_lines[index]
+      %tr.line_holder.parallel
+        -# 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 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
  
-        %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
-    %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|
-
-        %tr.line_holder.parallel
-          - if line.type == :file_deleted
-            %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());
-  });
-
-  $('.diff-side-left').on('scroll', function(){
-    $('.diff-side-right, .diff-middle').scrollTop($(this).scrollTop()); // might never be relevant
-    $('.diff-side-right').scrollLeft($(this).scrollLeft());
-  });
 - 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= ""
+
...	...	@@ -63,23 +63,14 @@
63	63	}
64	64	}
65	65
66		- .text-file-parallel div {
67		- display: inline-block;
68		- padding-bottom: 16px;
69		- }
70		- .diff-side {
71		- overflow-x: scroll;
72		- width: 508px;
73		- }
74		- .diff-side.diff-side-left{
75		- overflow-y:hidden;
76		- }
77		- .diff-side table, td.diff-middle table {
78		- }
79		- .diff-middle {
80		- width: 114px;
81		- vertical-align: top;
82		- overflow: hidden
	66	+ tr.line_holder.parallel{
	67	+ .old_line, .new_line, .diff_line {
	68	+ min-width: 50px;
	69	+ }
	70	+
	71	+ td.line_content.parallel{
	72	+ width: 50%;
	73	+ }
83	74	}
84	75
85	76	.old_line, .new_line, .diff_line {
...	...
...	...	@@ -139,6 +139,7 @@ ul.notes {
139	139	background-color: #fff;
140	140	border-width: 1px 0;
141	141	padding-top: 0;
	142	+ vertical-align: top;
142	143
143	144	li {
144	145	padding: 5px;
...	...
...	...	@@ -2,54 +2,37 @@
2	2	- old_lines, new_lines = parallel_diff_lines(project, @commit, diff, file)
3	3	- num_lines = old_lines.length
4	4
5		-%div.text-file-parallel
6		- %div.diff-side.diff-side-left
7		- %table
8		- - old_lines.each do \|line\|
	5	+%div.text-file
	6	+ %table
	7	+ - num_lines.times do \|index\|
	8	+ - new_line = new_lines[index]
	9	+ - old_line = old_lines[index]
	10	+ %tr.line_holder.parallel
	11	+ -# For old line
	12	+ - if old_line.type == :file_created
	13	+ %td.old_line= old_line.num
	14	+ %td.line_content.parallel= "File was created"
	15	+ - elsif old_line.type == :deleted
	16	+ %td.old_line.old= old_line.num
	17	+ %td.line_content{class: "parallel noteable_line old #{old_line.code}", "line_code" => old_line.code}= old_line.content
	18	+ - else old_line.type == :no_change
	19	+ %td.old_line= old_line.num
	20	+ %td.line_content.parallel= old_line.content
	21	+
	22	+ -# For new line
	23	+ - if new_line.type == :file_deleted
	24	+ %td.new_line= new_line.num
	25	+ %td.line_content.parallel= "File was deleted"
	26	+ - elsif new_line.type == :added
	27	+ %td.new_line.new= new_line.num
	28	+ %td.line_content{class: "parallel noteable_line new #{new_line.code}", "line_code" => new_line.code}= new_line.content
	29	+ - else new_line.type == :no_change
	30	+ %td.new_line= new_line.num
	31	+ %td.line_content.parallel= new_line.content
	32	+
	33	+ - if @reply_allowed
	34	+ - comments1 = @line_notes.select { \|n\| n.line_code == old_line.code }.sort_by(&:created_at)
	35	+ - comments2 = @line_notes.select { \|n\| n.line_code == new_line.code }.sort_by(&:created_at)
	36	+ - unless comments1.empty? and comments2.empty?
	37	+ = render "projects/notes/diff_notes_with_reply_parallel", notes1: comments1, notes2: comments2
9	38
10		- %tr.line_holder.parallel
11		- - if line.type == :file_created
12		- %td.line_content.parallel= "File was created"
13		- - elsif line.type == :deleted
14		- %td.line_content{class: "parallel noteable_line old #{line.code}", "line_code" => line.code }= line.content
15		- - else line.type == :no_change
16		- %td.line_content.parallel= line.content
17		-
18		- %div.diff-middle
19		- %table
20		- - num_lines.times do \|index\|
21		- %tr
22		- - if old_lines[index].type == :deleted
23		- %td.old_line.old= old_lines[index].num
24		- - else
25		- %td.old_line= old_lines[index].num
26		-
27		- %td.diff_line=""
28		-
29		- - if new_lines[index].type == :added
30		- %td.new_line.new= new_lines[index].num
31		- - else
32		- %td.new_line= new_lines[index].num
33		-
34		- %div.diff-side.diff-side-right
35		- %table
36		- - new_lines.each do \|line\|
37		-
38		- %tr.line_holder.parallel
39		- - if line.type == :file_deleted
40		- %td.line_content.parallel= "File was deleted"
41		- - elsif line.type == :added
42		- %td.line_content{class: "parallel noteable_line new #{line.code}", "line_code" => line.code }= line.content
43		- - else line.type == :no_change
44		- %td.line_content.parallel= line.content
45		-
46		-:javascript
47		- $('.diff-side-right').on('scroll', function(){
48		- $('.diff-side-left, .diff-middle').scrollTop($(this).scrollTop());
49		- $('.diff-side-left').scrollLeft($(this).scrollLeft());
50		- });
51		-
52		- $('.diff-side-left').on('scroll', function(){
53		- $('.diff-side-right, .diff-middle').scrollTop($(this).scrollTop()); // might never be relevant
54		- $('.diff-side-right').scrollLeft($(this).scrollLeft());
55		- });
...	...
1	1	- note1 = notes1.first # example note
2	2	- note2 = notes2.first # example note
	3	+-# Check if line want not changed since comment was left
	4	+/- if !defined?(line) \|\| line == note.diff_line
3	5	%tr.notes_holder.js-toggle-content
4		- -# Check if line want not changed since comment was left
5		- /- if !defined?(line1) \|\| line1 == note1.diff_line
6	6	- if note1
	7	+ %td.notes_line
	8	+ %span.btn.disabled
	9	+ %i.icon-comment
	10	+ = notes1.count
7	11	%td.notes_content
8	12	%ul.notes{ rel: note1.discussion_id }
9	13	= render notes1
	14	+
10	15	= render "projects/notes/discussion_reply_button", note: note1
11		- %td.notes_line2
12		- %span.btn.disabled.parallel-comment
13		- %i.icon-comment
14		- = notes1.count
15	16	- else
16	17	%td= ""
17	18	%td= ""
18	19
19		- %td= ""
20		-
21		- -# Check if line want not changed since comment was left
22		- /- if !defined?(line2) \|\| line2 == note2.diff_line
23	20	- if note2
24	21	%td.notes_line
25		- %span.btn.disabled.parallel-comment
	22	+ %span.btn.disabled
26	23	%i.icon-comment
27	24	= notes2.count
28	25	%td.notes_content
29	26	%ul.notes{ rel: note2.discussion_id }
30	27	= render notes2
	28	+
31	29	= render "projects/notes/discussion_reply_button", note: note2
32	30	- else
33	31	%td= ""
34	32	%td= ""
	33	+
...	...