Download as
Browse Code »

Commit 06ea1228404e56ee3356739a5e9a935f8d570b05

Authored by Riyad Preukschas
1 parent 39834ec6
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

Refactor diff notes creation

Showing 15 changed files with 321 additions and 283 deletions   Show diff stats
app/assets/javascripts/notes.js
  Diff comments   View file @06ea122
... ... @@ -17,34 +17,6 @@ var NoteList = {
17 17 this.reversed = $("#notes-list").is(".reversed");
18 18 this.target_params = "target_type=" + this.target_type + "&target_id=" + this.target_id;
19 19  
20   - // get initial set of notes
21   - this.getContent();
22   -
23   - $("#notes-list, #new-notes-list").on("ajax:success", ".js-note-delete", function() {
24   - $(this).closest('li').fadeOut(function() {
25   - $(this).remove();
26   - NoteList.updateVotes();
27   - });
28   - });
29   -
30   - $(".note-form-holder").on("ajax:before", function(){
31   - $(".submit_note").disable();
32   - })
33   -
34   - $(".note-form-holder").on("ajax:complete", function(){
35   - $(".submit_note").enable();
36   - $('#preview-note').hide();
37   - $('#note_note').show();
38   - })
39   -
40   - disableButtonIfEmptyField(".note-text", ".submit_note");
41   -
42   - $("#note_attachment").change(function(e){
43   - var val = $('.input-file').val();
44   - var filename = val.replace(/^.*[\\\/]/, '');
45   - $(".file_name").text(filename);
46   - });
47   -
48 20 if(this.reversed) {
49 21 var textarea = $(".note-text");
50 22 $('.note_advanced_opts').hide();
... ... @@ -55,6 +27,17 @@ var NoteList = {
55 27 });
56 28 }
57 29  
  30 + // get initial set of notes
  31 + this.getContent();
  32 +
  33 + disableButtonIfEmptyField(".js-note-text", ".js-comment-button");
  34 +
  35 + $("#note_attachment").change(function(e){
  36 + var val = $('.input-file').val();
  37 + var filename = val.replace(/^.*[\\\/]/, '');
  38 + $(".file_name").text(filename);
  39 + });
  40 +
58 41 // Setup note preview
59 42 $(document).on('click', '#preview-link', function(e) {
60 43 $('#preview-note').text('Loading...');
... ... @@ -72,12 +55,171 @@ var NoteList = {
72 55 }
73 56  
74 57 $('#preview-note, #note_note').toggle();
75   - e.preventDefault();
  58 + });+
  59 +
  60 + $(document).on("click",
  61 + ".js-add-diff-note-button",
  62 + NoteList.addDiffNote);
  63 +
  64 + // reply to diff notes
  65 + $(document).on("click",
  66 + ".js-diff-note-reply-button",
  67 + NoteList.replyToDiffNote);
  68 +
  69 + // hide diff note form
  70 + $(document).on("click",
  71 + ".js-hide-diff-note-form",
  72 + NoteList.removeDiffNoteForm);
  73 +
  74 + // do some diff note specific housekeeping when removing a diff note
  75 + $(document).on("click",
  76 + ".diff_file .js-note-delete",
  77 + NoteList.removeDiffNote);
  78 +
  79 + // remove a note (in general)
  80 + $(document).on("click",
  81 + ".js-note-delete",
  82 + NoteList.removeNote);
  83 +
  84 + // clean up previews for forms
  85 + $(document).on("ajax:complete", ".note-form-holder", function(){
  86 + $(this).find('#preview-note').hide();
  87 + $(this).find('#note_note').show();
76 88 });
77 89 },
78 90  
79 91  
80 92 /**
  93 + * Event handlers
  94 + */
  95 +
  96 +
  97 + /**
  98 + * Called when clicking on the "add a comment" button on the side of a diff line.
  99 + *
  100 + * Inserts a temporary row for the form below the line.
  101 + * Sets up the form and shows it.
  102 + */
  103 + addDiffNote: function(e) {
  104 + // find the form
  105 + var form = $(".js-note-forms .js-diff-note-form");
  106 + var row = $(this).closest("tr");
  107 + var nextRow = row.next();
  108 +
  109 + // does it already have notes?
  110 + if (nextRow.is(".notes_holder")) {
  111 + $.proxy(NoteList.replyToDiffNote,
  112 + nextRow.find(".js-diff-note-reply-button")
  113 + ).call();
  114 + } else {
  115 + // add a notes row and insert the form
  116 + row.after('<tr class="notes_holder js-temp-notes-holder"><td class="notes_line" colspan="2"></td><td class="notes_content"></td></tr>');
  117 + form.clone().appendTo(row.next().find(".notes_content"));
  118 +
  119 + // show the form
  120 + NoteList.setupDiffNoteForm($(this), row.next().find("form"));
  121 + }
  122 +
  123 + e.preventDefault();
  124 + },
  125 +
  126 + /**
  127 + * Called in response to deleting a note on a diff line.
  128 + *
  129 + * Removes the actual note from view.
  130 + * Removes the whole notes row if the last note for that line is being removed.
  131 + *
  132 + * Note: must be called before removeNote()
  133 + */
  134 + removeDiffNote: function() {
  135 + var notes = $(this).closest(".notes");
  136 +
  137 + // check if this is the last note for this line
  138 + if (notes.find(".note").length === 1) {
  139 + notes.closest("tr").remove();
  140 + }
  141 + },
  142 +
  143 + /**
  144 + * Called in response to "cancel" on a diff note form.
  145 + *
  146 + * Shows the reply button again.
  147 + * Removes the form and if necessary it's temporary row.
  148 + */
  149 + removeDiffNoteForm: function(e) {
  150 + var form = $(this).closest("form");
  151 + var row = form.closest("tr");
  152 +
  153 + // show the reply button (will only work for replys)
  154 + form.prev(".js-diff-note-reply-button").show();
  155 +
  156 + if (row.is(".js-temp-notes-holder")) {
  157 + // remove temporary row
  158 + row.remove();
  159 + } else {
  160 + // only remove the form
  161 + form.remove();
  162 + }
  163 +
  164 + e.preventDefault();
  165 + },
  166 +
  167 + /**
  168 + * Called in response to deleting a note of any kind.
  169 + *
  170 + * Removes the actual note from view.
  171 + */
  172 + removeNote: function() {
  173 + $(this).closest(".note").remove();
  174 + NoteList.updateVotes();
  175 + },
  176 +
  177 + /**
  178 + * Called when clicking on the "reply" button for a diff line.
  179 + *
  180 + * Shows the note form below the notes.
  181 + */
  182 + replyToDiffNote: function() {
  183 + // find the form
  184 + var form = $(".js-note-forms .js-diff-note-form");
  185 +
  186 +
  187 + // hide reply button
  188 + $(this).hide();
  189 + // insert the form after the button
  190 + form.clone().insertAfter($(this));
  191 +
  192 + // show the form
  193 + NoteList.setupDiffNoteForm($(this), $(this).next("form"));
  194 + },
  195 +
  196 + /**
  197 + * Shows the diff line form and does some setup.
  198 + *
  199 + * Sets some hidden fields in the form.
  200 + *
  201 + * Note: "this" must have the "discussionId", "lineCode", "noteableType" and
  202 + * "noteableId" data attributes set.
  203 + */
  204 + setupDiffNoteForm: function(data_holder, form) {
  205 + // setup note target
  206 + form.attr("rel", data_holder.data("discussionId"));
  207 + form.find("#note_line_code").val(data_holder.data("lineCode"));
  208 + form.find("#note_noteable_type").val(data_holder.data("noteableType"));
  209 + form.find("#note_noteable_id").val(data_holder.data("noteableId"));
  210 +
  211 + // setup interaction
  212 + disableButtonIfEmptyField(form.find(".js-note-text"), form.find(".js-comment-button"));
  213 + setupGfmAutoComplete();
  214 +
  215 + // cleanup after successfully creating a diff note
  216 + form.on("ajax:success", NoteList.removeDiffNoteForm);
  217 +
  218 + form.show();
  219 + },
  220 +
  221 +
  222 + /**
81 223 * Handle loading the initial set of notes.
82 224 * And set up loading more notes when scrolling to the bottom of the page.
83 225 */
... ... @@ -272,52 +414,3 @@ var NoteList = {
272 414 }
273 415 }
274 416 };
275   -
276   -var PerLineNotes = {
277   - init:
278   - function() {
279   - $(".per_line_form .hide-button").on("click", function(){
280   - $(this).closest(".per_line_form").hide();
281   - return false;
282   - });
283   -
284   - /**
285   - * Called when clicking on the "add note" or "reply" button for a diff line.
286   - *
287   - * Shows the note form below the line.
288   - * Sets some hidden fields in the form.
289   - */
290   - $(".diff_file_content").on("click", ".js-note-add-to-diff-line", function(e) {
291   - var form = $(".per_line_form");
292   - $(this).closest("tr").after(form);
293   - form.find("#note_line_code").val($(this).data("lineCode"));
294   - form.find("#note_noteable_type").val($(this).data("noteableType"));
295   - form.find("#note_noteable_id").val($(this).data("noteableId"));
296   - form.show();
297   - e.preventDefault();
298   - });
299   -
300   - disableButtonIfEmptyField(".line-note-text", ".submit_inline_note");
301   -
302   - /**
303   - * Called in response to successfully deleting a note on a diff line.
304   - *
305   - * Removes the actual note from view.
306   - * Removes the reply button if the last note for that line has been removed.
307   - */
308   - $(".diff_file_content").on("ajax:success", ".js-note-delete", function() {
309   - var trNote = $(this).closest("tr");
310   - trNote.fadeOut(function() {
311   - $(this).remove();
312   - });
313   -
314   - // check if this is the last note for this line
315   - // elements must really be removed for this to work reliably
316   - var trLine = trNote.prev();
317   - var trRpl = trNote.next();
318   - if (trLine.is(".line_holder") && trRpl.is(".reply")) {
319   - trRpl.fadeOut(function() { $(this).remove(); });
320   - }
321   - });
322   - }
323   -}
... ...
app/assets/stylesheets/sections/commits.scss
  Diff comments   View file @06ea122
... ... @@ -194,12 +194,6 @@
194 194 -khtml-user-select: none;
195 195 user-select: none;
196 196  
197   - &.notes_line {
198   - border: 1px solid #ccc;
199   - border-left: none;
200   - text-align: center;
201   - padding: 10px 0;
202   - }
203 197 a {
204 198 float: left;
205 199 width: 35px;
... ... @@ -227,10 +221,6 @@
227 221 background: #fafafa;
228 222 }
229 223 }
230   - .notes_content {
231   - border: 1px solid #ccc;
232   - border-width: 1px 0;
233   - }
234 224 }
235 225  
236 226 /** COMMIT BLOCK **/
... ...
app/assets/stylesheets/sections/notes.scss
  Diff comments   View file @06ea122
... ... @@ -92,23 +92,58 @@ ul.notes {
92 92 }
93 93 }
94 94  
95   -.comment-btn {
96   - @extend .save-btn;
97   -}
98   -
99 95 .diff_file tr.notes_holder {
100 96 font-family: $sansFontFamily;
101 97 font-size: 13px;
102 98 line-height: 18px;
103 99  
104   - td:last-child {
105   - background-color: $white;
106   - padding-top: 0;
  100 + td {
  101 + border: 1px solid #ddd;
  102 + border-left: none;
  103 +
  104 + &.notes_line {
  105 + text-align: center;
  106 + padding: 10px 0;
  107 + }
  108 + &.notes_content {
  109 + background-color: $white;
  110 + border-width: 1px 0;
  111 + padding-top: 0;
  112 + }
107 113 }
108 114  
109 115 .comment-btn {
110 116 margin-top: 8px;
111 117 }
  118 +
  119 + // TODO: start cleanup
  120 + form {
  121 + // hide it by default
  122 + display: none;
  123 + margin: 8px 0;
  124 +
  125 + .note_actions {
  126 + margin:0;
  127 + padding-top: 10px;
  128 +
  129 + .buttons {
  130 + float:left;
  131 + width:300px;
  132 + }
  133 + .options {
  134 + .labels {
  135 + float:left;
  136 + padding-left:10px;
  137 + label {
  138 + padding: 6px 0;
  139 + margin: 0;
  140 + width:120px;
  141 + }
  142 + }
  143 + }
  144 + }
  145 + }
  146 + // TODO: end cleanup
112 147 }
113 148  
114 149 /**
... ... @@ -158,74 +193,6 @@ ul.notes {
158 193 }
159 194 }
160 195  
161   -/*
162   - * New Note Form
163   - */
164   -.new_note {
165   - /* Note textare */
166   - #note_note {
167   - height:80px;
168   - width:99%;
169   - font-size:14px;
170   - }
171   -}
172   -
173   -
174   -#new_note {
175   - .attach_holder {
176   - display: none;
177   - }
178   -}
179   -
180   -.preview_note {
181   - margin: 2px;
182   - border: 1px solid #ddd;
183   - padding: 10px;
184   - min-height: 60px;
185   - background: #f5f5f5;
186   -}
187   -
188   -.note {
189   - padding: 8px 0;
190   - overflow: hidden;
191   - display: block;
192   - position: relative;
193   - img {float: left; margin-right: 10px;}
194   - img.emoji {float: none;margin: 0;}
195   - .note-author cite{font-style: italic;}
196   - p { color: $style_color; }
197   - .note-author { color: $style_color;}
198   -
199   - .note-title { margin-left: 45px; padding-top: 5px;}
200   - .avatar {
201   - margin-top: 3px;
202   - }
203   -
204   - .delete-note {
205   - display: none;
206   - position: absolute;
207   - right: 0;
208   - top: 0;
209   - }
210   -
211   - &:hover {
212   - .delete-note { display: block; }
213   - }
214   -}
215   -#notes-list:not(.reversed) .note,
216   -#new-notes-list:not(.reversed) .note {
217   - border-bottom: 1px solid #eee;
218   -}
219   -#notes-list.reversed .note,
220   -#new-notes-list.reversed .note {
221   - border-top: 1px solid #eee;
222   -}
223   -
224   -/* mark vote notes */
225   -.voting_notes .note {
226   - padding: 8px 0;
227   -}
228   -
229 196 .notes-status {
230 197 margin: 18px;
231 198 }
... ... @@ -239,62 +206,74 @@ p.notify_controls span{
239 206 font-weight: 700;
240 207 }
241 208  
242   -.line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
  209 +/**
  210 + * add line note button on the side of diffs
  211 + */
  212 +.diff_file tr.line_holder {
  213 + .add-diff-note {
  214 + position:absolute;
  215 + margin-left:-70px;
  216 + margin-top:-10px;
  217 + z-index:10;
  218 + background: url("comment_add.png") no-repeat left 0;
  219 + width:32px;
  220 + height:32px;
  221 +
  222 + opacity: 0.0;
  223 + filter: alpha(opacity=0);
243 224  
244   -.per_line_form {
245   - background: #f5f5f5;
246   - border-top: 1px solid #eee;
247   - form { margin: 0; }
248   - td {
249   - border-bottom: 1px solid #ddd;
  225 + &:hover {
  226 + opacity: 1.0;
  227 + filter: alpha(opacity=100);
  228 + }
250 229 }
251   - .note_actions {
252   - margin: 0;
253   - padding-top: 10px;
254 230  
255   - .buttons {
256   - float: left;
257   - width: 300px;
258   - }
259   - .options {
260   - .labels {
261   - float: left;
262   - padding-left: 10px;
263   - label {
264   - padding: 6px 0;
265   - margin: 0;
266   - width: 120px;
267   - }
268   - }
  231 + &:hover > td {
  232 + background: $hover !important;
  233 +
  234 + .add-diff-note {
  235 + opacity: 1.0;
  236 + filter: alpha(opacity=100);
269 237 }
270 238 }
271 239 }
272 240  
273   -td .line_note_link {
274   - position: absolute;
275   - margin-left:-70px;
276   - margin-top:-10px;
277   - z-index: 10;
278   - background: url("comment_add.png") no-repeat left 0;
279   - width: 32px;
280   - height: 32px;
281   -
282   - opacity: 0.0;
283   - filter: alpha(opacity=0);
284   -
285   - &:hover {
286   - opacity: 1.0;
287   - filter: alpha(opacity=100);
  241 +/**
  242 + * Note Forms
  243 + */
  244 +
  245 +.comment-btn {
  246 + @extend .save-btn;
  247 +}
  248 +.new_note {
  249 + textarea {
  250 + height:80px;
  251 + width:99%;
  252 + font-size:14px;
  253 + }
  254 +}
  255 +.note-forms {
  256 + .new_diff_note {
  257 + display: none;
  258 + }
  259 +}
  260 +
  261 +
  262 +#new_note {
  263 + .attach_holder {
  264 + display:none;
288 265 }
289 266 }
290 267  
291   -.diff_file_content tr.line_holder:hover > td { background: $hover !important; }
292   -.diff_file_content tr.line_holder:hover > td .line_note_link {
293   - opacity: 1.0;
294   - filter: alpha(opacity=100);
  268 +.preview_note {
  269 + margin: 2px;
  270 + border: 1px solid #ddd;
  271 + padding: 10px;
  272 + min-height: 60px;
  273 + background:#f5f5f5;
295 274 }
296 275  
297   -.new_note {
  276 +form.new_note {
298 277 .input-file {
299 278 font: 500px monospace;
300 279 opacity: 0;
... ...
app/controllers/notes_controller.rb
  Diff comments   View file @06ea122
... ... @@ -12,11 +12,8 @@ class NotesController &lt; ProjectResourceController
12 12 @notes = Notes::LoadContext.new(project, current_user, params).execute
13 13  
14 14 if params[:target_type] == "merge_request"
15   - @has_diff = true
16 15 @mixed_targets = true
17 16 @discussions = discussions_from_notes
18   - elsif params[:target_type] == "commit"
19   - @has_diff = true
20 17 end
21 18  
22 19 respond_with(@notes)
... ...
app/views/commit/show.html.haml
  Diff comments   View file @06ea122
1 1 = render "commits/commit_box"
2 2 = render "commits/diffs", diffs: @commit.diffs
3 3 = render "notes/notes_with_form", tid: @commit.id, tt: "commit"
4   -= render "notes/diff_note_form"
5   -
6 4  
7 5 :javascript
8 6 $(function(){
9   - PerLineNotes.init();
10 7 var w, h;
11 8 $('.diff_file').each(function(){
12 9 $('.image.diff_removed img', this).on('load', $.proxy(function(event){
... ... @@ -19,7 +16,5 @@
19 16 , h = event.currentTarget.naturalHeight;
20 17 $('.image.diff_added .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
21 18 }, this));
22   -
23 19 });
24   -
25 20 });
... ...
app/views/merge_requests/_show.html.haml
  Diff comments   View file @06ea122
... ... @@ -21,8 +21,6 @@
21 21 = render "merge_requests/show/diffs" if @diffs
22 22 .status
23 23  
24   -= render "notes/diff_note_form"
25   -
26 24 :javascript
27 25 $(function(){
28 26 MergeRequest.init({
... ...
app/views/merge_requests/diffs.js.haml
  Diff comments   View file @06ea122
1 1 :plain
2 2 $(".merge-request-diffs").html("#{escape_javascript(render(partial: "merge_requests/show/diffs"))}");
3 3  
4   - $(function(){
5   - PerLineNotes.init();
6   - });
7   -
... ...
app/views/notes/_common_form.html.haml
  Diff comments   View file @06ea122
... ... @@ -8,7 +8,7 @@
8 8  
9 9 = f.hidden_field :noteable_id
10 10 = f.hidden_field :noteable_type
11   - = f.text_area :note, size: 255, class: 'note-text js-gfm-input'
  11 + = f.text_area :note, size: 255, class: 'js-note-text js-gfm-input'
12 12 #preview-note.preview_note.hide
13 13 .hint
14 14 .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
... ... @@ -16,7 +16,7 @@
16 16  
17 17 .row.note_advanced_opts
18 18 .span3
19   - = f.submit 'Add Comment', class: "btn comment-btn submit_note grouped", id: "submit_note"
  19 + = f.submit 'Add Comment', class: "btn comment-btn grouped js-comment-button"
20 20 = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
21 21 .span4.notify_opts
22 22 %h6.left Notify via email:
... ...
app/views/notes/_create_diff_note.js.haml
  Diff comments   View file @06ea122
1 1 - if note.valid?
2 2 :plain
3 3 // hide and reset the form
4   - $(".per_line_form").hide();
5   - $('.line-note-form-holder textarea').val("");
  4 + var form = $("form[rel='#{note.discussion_id}']");
  5 + var row = form.closest("tr");
6 6  
7   - // find the reply button for this line
8   - // (might not be there if this is the first note)
9   - var trRpl = $(".js-note-add-to-diff-line[data-noteable-type='#{note.noteable_type}'][data-noteable-id='#{note.noteable_id}'][data-line-code='#{note.line_code}']").closest("tr");
10   - if (trRpl.size() == 0) {
11   - // find the commented line ...
12   - var trEl = $(".#{note.line_code}").parent();
13   - // ... and insert the note and the reply button after it
14   - trEl.after("#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}");
  7 + // is this the first note?
  8 + if (row.is(".js-temp-notes-holder")) {
  9 + // insert the note and the reply button after it
  10 + row.after("#{escape_javascript(render "notes/diff_notes_with_reply", notes: [note])}");
15 11 } else {
16 12 // instert new note before reply button
17   - trRpl.before("#{escape_javascript(render "notes/diff_note", note: note)}");
  13 + row.find(".notes").append("#{escape_javascript(render "notes/note", note: note)}");
18 14 }
... ...
app/views/notes/_diff_note_form.html.haml
  Diff comments   View file @06ea122
1   -%table{style: "display:none;"}
2   - %tr.per_line_form
3   - %td{colspan: 3 }
4   - .line-note-form-holder
5   - = form_for [@project, @note], remote: "true", multipart: true do |f|
6   - %h3.page_title Leave a comment
7   - %div.span10
8   - -if @note.errors.any?
9   - .alert-message.block-message.error
10   - - @note.errors.full_messages.each do |msg|
11   - %div= msg
  1 += form_for [@project, @note], remote: true, html: { multipart: true, class: "new_note new_diff_note js-diff-note-form" } do |f|
  2 + .span10
  3 + -if @note.errors.any?
  4 + .alert-message.block-message.error
  5 + - @note.errors.full_messages.each do |msg|
  6 + %div= msg
12 7  
13   - = f.hidden_field :noteable_id
14   - = f.hidden_field :noteable_type
15   - = f.hidden_field :line_code
16   - = f.text_area :note, size: 255, class: 'line-note-text js-gfm-input'
17   - .note_actions
18   - .buttons
19   - = f.submit 'Add Comment', class: "btn save-btn submit_note submit_inline_note", id: "submit_note"
20   - = link_to "Cancel", "javascript:;", class: "btn hide-button"
21   - .options
22   - %h6.left Notify via email:
23   - .labels
24   - = label_tag :notify do
25   - = check_box_tag :notify, 1, @note.noteable_type != "Commit"
26   - %span Project team
  8 + = f.hidden_field :noteable_id
  9 + = f.hidden_field :noteable_type
  10 + = f.hidden_field :line_code
  11 + = f.text_area :note, size: 255, class: 'js-note-text js-gfm-input'
  12 + .note_actions
  13 + .buttons
  14 + = f.submit 'Add Comment', class: "btn save-btn js-comment-button"
  15 + %button.btn.js-hide-diff-note-form Cancel
  16 + .options
  17 + %h6.left Notify via email:
  18 + .labels
  19 + = label_tag :notify do
  20 + = check_box_tag :notify, 1, @note.noteable_type != "Commit"
  21 + %span Project team
27 22  
28   - - if @note.notify_only_author?(current_user)
29   - = label_tag :notify_author do
30   - = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
31   - %span Commit author
  23 + - if @note.notify_only_author?(current_user)
  24 + = label_tag :notify_author do
  25 + = check_box_tag :notify_author, 1 , @note.noteable_type == "Commit"
  26 + %span Commit author
... ...
app/views/notes/_diff_note_link.html.haml
  Diff comments   View file @06ea122
  1 +- note = @project.notes.new(@comments_target.merge({ line_code: line_code }))
1 2 = link_to "",
2   - "#",
3   - id: "add-diff-line-note-#{line_code}",
4   - class: "line_note_link js-note-add-to-diff-line",
5   - data: @comments_target.merge({ line_code: line_code }),
  3 + "javascript:;",
  4 + class: "add-diff-note js-add-diff-note-button",
  5 + data: { noteable_type: note.noteable_type,
  6 + noteable_id: note.noteable_id,
  7 + line_code: note.line_code,
  8 + discussion_id: note.discussion_id },
6 9 title: "Add a comment to this line"
... ...
app/views/notes/_diff_notes_with_reply.html.haml
  Diff comments   View file @06ea122
1   -%tr.notes_holder
  1 +- note = notes.first # example note
  2 +%tr.notes_holder{ data: { :'discussion-id' => note.discussion_id } }
2 3 %td.notes_line{ colspan: 2 }
3 4 %span.btn.disabled
4 5 %i.icon-comment
... ... @@ -8,11 +9,12 @@
8 9 = render notes
9 10  
10 11 -# reply button
11   - - note = notes.first # example note
12   - %button{ class: "btn comment-btn js-note-add-to-diff-line",
13   - data: { line_code: note.line_code,
14   - noteable_type: note.noteable_type,
15   - noteable_id: note.noteable_id },
16   - title: "Add a comment to this line" }
  12 + = link_to "javascript:;",
  13 + class: "btn comment-btn js-diff-note-reply-button",
  14 + data: { noteable_type: note.noteable_type,
  15 + noteable_id: note.noteable_id,
  16 + line_code: note.line_code,
  17 + discussion_id: note.discussion_id },
  18 + title: "Add a comment to this line" do
17 19 %i.icon-comment
18 20 Reply
... ...
app/views/notes/_notes_with_form.html.haml
  Diff comments   View file @06ea122
... ... @@ -3,7 +3,9 @@
3 3 .notes-status
4 4  
5 5 - if can? current_user, :write_note, @project
6   - = render "notes/common_form"
  6 + .note-forms.js-note-forms
  7 + = render "notes/common_form"
  8 + = render "notes/diff_note_form"
7 9  
8 10 :javascript
9 11 $(function(){
... ...
app/views/notes/create.js.haml
  Diff comments   View file @06ea122
... ... @@ -2,7 +2,3 @@
2 2 = render "create_diff_note", note: @note
3 3 - else
4 4 = render "create_common_note", note: @note
5   -
6   --# Enable submit button
7   -:plain
8   - $("#submit_note").removeAttr("disabled");
... ...
app/views/notes/index.js.haml
  Diff comments   View file @06ea122
... ... @@ -16,7 +16,3 @@
16 16 - if loading_more_notes?
17 17 :plain
18 18 NoteList.finishedLoadingMore();
19   -
20   -- if @has_diff
21   - :plain
22   - PerLineNotes.init();
... ...