Move diff notes into the actual diff content column

app/assets/stylesheets/sections/commits.scss

@@ -176,12 +176,14 @@
       }
     }
   }
-  .old_line, .new_line {
-    margin: 0px;
-    padding: 0px;
-    border: none;
-    background: #EEE;
-    color: #666;
+  .new_line,
+  .old_line,
+  .notes_line {
+    margin:0px;
+    padding:0px;
+    border:none;
+    background:#EEE;
+    color:#666;
     padding: 0px 5px;
     border-right: 1px solid #ccc;
     text-align: right;
@@ -191,6 +193,13 @@
     moz-user-select: none;
     -khtml-user-select: none;
     user-select: none;
+
+    &.notes_line {
+      border: 1px solid #ccc;
+      border-left: none;
+      text-align: center;
+      padding: 10px 0;
+    }
     a {
       float: left;
       width: 35px;
@@ -218,6 +227,10 @@
       background: #fafafa;
     }
   }
+  .notes_content {
+    border: 1px solid #ccc;
+    border-width: 1px 0;
+  }
 }
 
 /** COMMIT BLOCK **/

app/assets/stylesheets/sections/notes.scss

 /**
  * Notes
  */
-#notes-list,
-#new-notes-list {
+ul.notes {
   display: block;
   list-style: none;
   margin: 0px;
@@ -81,21 +80,36 @@
       padding-bottom: 5px;
     }
   }
-}
 
-#notes-list:not(.reversed) .note,
-#notes-list:not(.reversed) .discussion,
-#new-notes-list:not(.reversed) .note,
-#new-notes-list:not(.reversed) .discussion {
-  border-bottom: 1px solid #eee;
+  // paint top or bottom borders depending on notes direction
+  &:not(.reversed) .note,
+  &:not(.reversed) .discussion {
+    border-bottom: 1px solid #eee;
+  }
+  &.reversed .note,
+  &.reversed .discussion {
+    border-top: 1px solid #eee;
+  }
 }
-#notes-list.reversed .note,
-#notes-list.reversed .discussion,
-#new-notes-list.reversed .note,
-#new-notes-list.reversed .discussion {
-  border-top: 1px solid #eee;
+
+.comment-btn {
+  @extend .save-btn;
 }
 
+.diff_file tr.notes_holder {
+  font-family: $sansFontFamily;
+  font-size: 13px;
+  line-height: 18px;
+
+  td:last-child {
+    background-color: $white;
+    padding-top: 0;
+  }
+
+  .comment-btn {
+    margin-top: 8px;
+  }
+}
 
 /**
  * Discussion/Note Actions
@@ -225,36 +239,6 @@ p.notify_controls span{
   font-weight: 700;
 }
 
-tr.line_notes_row {
-  border-bottom: 1px solid #DDD;
-  border-left: 7px solid #2A79A3;
-
-  &.reply {
-    background: #eee;
-    border-left: 7px solid #2A79A3;
-    border-top: 1px solid #ddd;
-    td {
-      padding: 7px 10px;
-    }
-    a.line_note_reply_link {
-      border: 1px solid #eaeaea;
-      @include border-radius(4px);
-      padding: 3px 10px;
-      margin-left: 5px;
-      color: white;
-      background: #2A79A3;
-      border-color: #2A79A3;
-    }
-  }
-  ul {
-    margin: 0;
-    li {
-      padding: 0;
-      border: none;
-    }
-  }
-}
-
 .line_notes_row,  .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
 
 .per_line_form {

app/views/commits/_text_diff.html.haml

@@ -17,7 +17,7 @@
         %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code
         %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
 
-        - if @reply_allowed
-          - comments = @line_notes.select { |n| n.line_code == line_code }.sort_by(&:created_at)
-          - unless comments.empty?
-            = render "notes/diff_notes_with_reply", notes: comments
+    - if @reply_allowed
+      - comments = @line_notes.select { |n| n.line_code == line_code }.sort_by(&:created_at)
+      - unless comments.empty?
+        = render "notes/diff_notes_with_reply", notes: comments

app/views/notes/_common_form.html.haml

@@ -16,7 +16,7 @@
 
     .row.note_advanced_opts
       .span3
-        = f.submit 'Add Comment', class: "btn success submit_note grouped", id: "submit_note"
+        = f.submit 'Add Comment', class: "btn comment-btn submit_note grouped", id: "submit_note"
         = link_to 'Preview', preview_project_notes_path(@project), class: 'btn grouped', id: 'preview-link'
       .span4.notify_opts
         %h6.left Notify via email:

app/views/notes/_create_diff_note.js.haml

@@ -6,7 +6,7 @@
 
     // find the reply button for this line
     // (might not be there if this is the first note)
-    var trRpl = $("a.line_note_reply_link[data-noteable-type='#{note.noteable_type}'][data-noteable-id='#{note.noteable_id}'][data-line-code='#{note.line_code}']").closest("tr");
+    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");
     if (trRpl.size() == 0) {
       // find the commented line ...
       var trEl = $(".#{note.line_code}").parent();

app/views/notes/_diff_note.html.haml

-%tr.line_notes_row
-  %td{colspan: 3}
-    %ul
-      = render "notes/note", note: note
-

app/views/notes/_diff_notes_with_reply.html.haml

-- notes.each do |note|
-  = render "notes/diff_note", note: note
+%tr.notes_holder
+  %td.notes_line{ colspan: 2 }
+    %span.btn.disabled
+      %i.icon-comment
+      = notes.count
+  %td.notes_content
+    %ul.notes
+      = render notes
 
--# reply button
-- note = notes.first # example note
-%tr.line_notes_row.reply
-  %td{colspan: 3}
-    = link_to "javascript:;",
-              class: "line_note_reply_link js-note-add-to-diff-line",
+    -# reply button
+    - note = notes.first # example note
+    %button{  class: "btn comment-btn js-note-add-to-diff-line",
               data: { line_code:     note.line_code,
                       noteable_type: note.noteable_type,
                       noteable_id:   note.noteable_id },
-              title: "Add a comment to this line" do
+              title: "Add a comment to this line" }
       %i.icon-comment
       Reply

app/views/notes/_notes_with_form.html.haml

-%ul#notes-list
-%ul#new-notes-list
+%ul#notes-list.notes
+%ul#new-notes-list.notes
 .notes-status
 
 - if can? current_user, :write_note, @project

app/views/notes/_reversed_notes_with_form.html.haml

 - if can? current_user, :write_note, @project
   = render "notes/common_form"
 
-%ul.reversed#new-notes-list
-%ul.reversed#notes-list
+%ul#new-notes-list.reversed.notes
+%ul#notes-list.reversed.notes
 .notes-status
 
 :javascript