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,34 +17,6 @@ var NoteList = {
17 this.reversed = $("#notes-list").is(".reversed"); 17 this.reversed = $("#notes-list").is(".reversed");
18 this.target_params = "target_type=" + this.target_type + "&target_id=" + this.target_id; 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 if(this.reversed) { 20 if(this.reversed) {
49 var textarea = $(".note-text"); 21 var textarea = $(".note-text");
50 $('.note_advanced_opts').hide(); 22 $('.note_advanced_opts').hide();
@@ -55,6 +27,17 @@ var NoteList = { @@ -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 // Setup note preview 41 // Setup note preview
59 $(document).on('click', '#preview-link', function(e) { 42 $(document).on('click', '#preview-link', function(e) {
60 $('#preview-note').text('Loading...'); 43 $('#preview-note').text('Loading...');
@@ -72,12 +55,171 @@ var NoteList = { @@ -72,12 +55,171 @@ var NoteList = {
72 } 55 }
73 56
74 $('#preview-note, #note_note').toggle(); 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 * Handle loading the initial set of notes. 223 * Handle loading the initial set of notes.
82 * And set up loading more notes when scrolling to the bottom of the page. 224 * And set up loading more notes when scrolling to the bottom of the page.
83 */ 225 */
@@ -272,52 +414,3 @@ var NoteList = { @@ -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,12 +194,6 @@
194 -khtml-user-select: none; 194 -khtml-user-select: none;
195 user-select: none; 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 a { 197 a {
204 float: left; 198 float: left;
205 width: 35px; 199 width: 35px;
@@ -227,10 +221,6 @@ @@ -227,10 +221,6 @@
227 background: #fafafa; 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 /** COMMIT BLOCK **/ 226 /** COMMIT BLOCK **/
app/assets/stylesheets/sections/notes.scss
  Diff comments   View file @06ea122
@@ -92,23 +92,58 @@ ul.notes { @@ -92,23 +92,58 @@ ul.notes {
92 } 92 }
93 } 93 }
94 94
95 -.comment-btn {  
96 - @extend .save-btn;  
97 -}  
98 -  
99 .diff_file tr.notes_holder { 95 .diff_file tr.notes_holder {
100 font-family: $sansFontFamily; 96 font-family: $sansFontFamily;
101 font-size: 13px; 97 font-size: 13px;
102 line-height: 18px; 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 .comment-btn { 115 .comment-btn {
110 margin-top: 8px; 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,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 .notes-status { 196 .notes-status {
230 margin: 18px; 197 margin: 18px;
231 } 198 }
@@ -239,62 +206,74 @@ p.notify_controls span{ @@ -239,62 +206,74 @@ p.notify_controls span{
239 font-weight: 700; 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 .input-file { 277 .input-file {
299 font: 500px monospace; 278 font: 500px monospace;
300 opacity: 0; 279 opacity: 0;
app/controllers/notes_controller.rb
  Diff comments   View file @06ea122
@@ -12,11 +12,8 @@ class NotesController &lt; ProjectResourceController @@ -12,11 +12,8 @@ class NotesController &lt; ProjectResourceController
12 @notes = Notes::LoadContext.new(project, current_user, params).execute 12 @notes = Notes::LoadContext.new(project, current_user, params).execute
13 13
14 if params[:target_type] == "merge_request" 14 if params[:target_type] == "merge_request"
15 - @has_diff = true  
16 @mixed_targets = true 15 @mixed_targets = true
17 @discussions = discussions_from_notes 16 @discussions = discussions_from_notes
18 - elsif params[:target_type] == "commit"  
19 - @has_diff = true  
20 end 17 end
21 18
22 respond_with(@notes) 19 respond_with(@notes)
app/views/commit/show.html.haml
  Diff comments   View file @06ea122
1 = render "commits/commit_box" 1 = render "commits/commit_box"
2 = render "commits/diffs", diffs: @commit.diffs 2 = render "commits/diffs", diffs: @commit.diffs
3 = render "notes/notes_with_form", tid: @commit.id, tt: "commit" 3 = render "notes/notes_with_form", tid: @commit.id, tt: "commit"
4 -= render "notes/diff_note_form"  
5 -  
6 4
7 :javascript 5 :javascript
8 $(function(){ 6 $(function(){
9 - PerLineNotes.init();  
10 var w, h; 7 var w, h;
11 $('.diff_file').each(function(){ 8 $('.diff_file').each(function(){
12 $('.image.diff_removed img', this).on('load', $.proxy(function(event){ 9 $('.image.diff_removed img', this).on('load', $.proxy(function(event){
@@ -19,7 +16,5 @@ @@ -19,7 +16,5 @@
19 , h = event.currentTarget.naturalHeight; 16 , h = event.currentTarget.naturalHeight;
20 $('.image.diff_added .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px'); 17 $('.image.diff_added .image-info', this).append(' | <b>W:</b> ' + w + 'px | <b>H:</b> ' + h + 'px');
21 }, this)); 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,8 +21,6 @@
21 = render "merge_requests/show/diffs" if @diffs 21 = render "merge_requests/show/diffs" if @diffs
22 .status 22 .status
23 23
24 -= render "notes/diff_note_form"  
25 -  
26 :javascript 24 :javascript
27 $(function(){ 25 $(function(){
28 MergeRequest.init({ 26 MergeRequest.init({
app/views/merge_requests/diffs.js.haml
  Diff comments   View file @06ea122
1 :plain 1 :plain
2 $(".merge-request-diffs").html("#{escape_javascript(render(partial: "merge_requests/show/diffs"))}"); 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,7 +8,7 @@
8 8
9 = f.hidden_field :noteable_id 9 = f.hidden_field :noteable_id
10 = f.hidden_field :noteable_type 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 #preview-note.preview_note.hide 12 #preview-note.preview_note.hide
13 .hint 13 .hint
14 .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}. 14 .right Comments are parsed with #{link_to "GitLab Flavored Markdown", help_markdown_path, target: '_blank'}.
@@ -16,7 +16,7 @@ @@ -16,7 +16,7 @@
16 16
17 .row.note_advanced_opts 17 .row.note_advanced_opts
18 .span3 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 = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link' 20 = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
21 .span4.notify_opts 21 .span4.notify_opts
22 %h6.left Notify via email: 22 %h6.left Notify via email:
app/views/notes/_create_diff_note.js.haml
  Diff comments   View file @06ea122
1 - if note.valid? 1 - if note.valid?
2 :plain 2 :plain
3 // hide and reset the form 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 } else { 11 } else {
16 // instert new note before reply button 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 = link_to "", 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 title: "Add a comment to this line" 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 %td.notes_line{ colspan: 2 } 3 %td.notes_line{ colspan: 2 }
3 %span.btn.disabled 4 %span.btn.disabled
4 %i.icon-comment 5 %i.icon-comment
@@ -8,11 +9,12 @@ @@ -8,11 +9,12 @@
8 = render notes 9 = render notes
9 10
10 -# reply button 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 %i.icon-comment 19 %i.icon-comment
18 Reply 20 Reply
app/views/notes/_notes_with_form.html.haml
  Diff comments   View file @06ea122
@@ -3,7 +3,9 @@ @@ -3,7 +3,9 @@
3 .notes-status 3 .notes-status
4 4
5 - if can? current_user, :write_note, @project 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 :javascript 10 :javascript
9 $(function(){ 11 $(function(){
app/views/notes/create.js.haml
  Diff comments   View file @06ea122
@@ -2,7 +2,3 @@ @@ -2,7 +2,3 @@
2 = render "create_diff_note", note: @note 2 = render "create_diff_note", note: @note
3 - else 3 - else
4 = render "create_common_note", note: @note 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,7 +16,3 @@
16 - if loading_more_notes? 16 - if loading_more_notes?
17 :plain 17 :plain
18 NoteList.finishedLoadingMore(); 18 NoteList.finishedLoadingMore();
19 -  
20 -- if @has_diff  
21 - :plain  
22 - PerLineNotes.init();