Commit 39834ec6409163e3339ed23ccdc9682932f45c9e

Authored by Riyad Preukschas
1 parent 4d2278e7

Move diff notes into the actual diff content column

app/assets/stylesheets/sections/commits.scss
@@ -176,12 +176,14 @@ @@ -176,12 +176,14 @@
176 } 176 }
177 } 177 }
178 } 178 }
179 - .old_line, .new_line {  
180 - margin: 0px;  
181 - padding: 0px;  
182 - border: none;  
183 - background: #EEE;  
184 - color: #666; 179 + .new_line,
  180 + .old_line,
  181 + .notes_line {
  182 + margin:0px;
  183 + padding:0px;
  184 + border:none;
  185 + background:#EEE;
  186 + color:#666;
185 padding: 0px 5px; 187 padding: 0px 5px;
186 border-right: 1px solid #ccc; 188 border-right: 1px solid #ccc;
187 text-align: right; 189 text-align: right;
@@ -191,6 +193,13 @@ @@ -191,6 +193,13 @@
191 moz-user-select: none; 193 moz-user-select: none;
192 -khtml-user-select: none; 194 -khtml-user-select: none;
193 user-select: none; 195 user-select: none;
  196 +
  197 + &.notes_line {
  198 + border: 1px solid #ccc;
  199 + border-left: none;
  200 + text-align: center;
  201 + padding: 10px 0;
  202 + }
194 a { 203 a {
195 float: left; 204 float: left;
196 width: 35px; 205 width: 35px;
@@ -218,6 +227,10 @@ @@ -218,6 +227,10 @@
218 background: #fafafa; 227 background: #fafafa;
219 } 228 }
220 } 229 }
  230 + .notes_content {
  231 + border: 1px solid #ccc;
  232 + border-width: 1px 0;
  233 + }
221 } 234 }
222 235
223 /** COMMIT BLOCK **/ 236 /** COMMIT BLOCK **/
app/assets/stylesheets/sections/notes.scss
1 /** 1 /**
2 * Notes 2 * Notes
3 */ 3 */
4 -#notes-list,  
5 -#new-notes-list { 4 +ul.notes {
6 display: block; 5 display: block;
7 list-style: none; 6 list-style: none;
8 margin: 0px; 7 margin: 0px;
@@ -81,21 +80,36 @@ @@ -81,21 +80,36 @@
81 padding-bottom: 5px; 80 padding-bottom: 5px;
82 } 81 }
83 } 82 }
84 -}  
85 83
86 -#notes-list:not(.reversed) .note,  
87 -#notes-list:not(.reversed) .discussion,  
88 -#new-notes-list:not(.reversed) .note,  
89 -#new-notes-list:not(.reversed) .discussion {  
90 - border-bottom: 1px solid #eee; 84 + // paint top or bottom borders depending on notes direction
  85 + &:not(.reversed) .note,
  86 + &:not(.reversed) .discussion {
  87 + border-bottom: 1px solid #eee;
  88 + }
  89 + &.reversed .note,
  90 + &.reversed .discussion {
  91 + border-top: 1px solid #eee;
  92 + }
91 } 93 }
92 -#notes-list.reversed .note,  
93 -#notes-list.reversed .discussion,  
94 -#new-notes-list.reversed .note,  
95 -#new-notes-list.reversed .discussion {  
96 - border-top: 1px solid #eee; 94 +
  95 +.comment-btn {
  96 + @extend .save-btn;
97 } 97 }
98 98
  99 +.diff_file tr.notes_holder {
  100 + font-family: $sansFontFamily;
  101 + font-size: 13px;
  102 + line-height: 18px;
  103 +
  104 + td:last-child {
  105 + background-color: $white;
  106 + padding-top: 0;
  107 + }
  108 +
  109 + .comment-btn {
  110 + margin-top: 8px;
  111 + }
  112 +}
99 113
100 /** 114 /**
101 * Discussion/Note Actions 115 * Discussion/Note Actions
@@ -225,36 +239,6 @@ p.notify_controls span{ @@ -225,36 +239,6 @@ p.notify_controls span{
225 font-weight: 700; 239 font-weight: 700;
226 } 240 }
227 241
228 -tr.line_notes_row {  
229 - border-bottom: 1px solid #DDD;  
230 - border-left: 7px solid #2A79A3;  
231 -  
232 - &.reply {  
233 - background: #eee;  
234 - border-left: 7px solid #2A79A3;  
235 - border-top: 1px solid #ddd;  
236 - td {  
237 - padding: 7px 10px;  
238 - }  
239 - a.line_note_reply_link {  
240 - border: 1px solid #eaeaea;  
241 - @include border-radius(4px);  
242 - padding: 3px 10px;  
243 - margin-left: 5px;  
244 - color: white;  
245 - background: #2A79A3;  
246 - border-color: #2A79A3;  
247 - }  
248 - }  
249 - ul {  
250 - margin: 0;  
251 - li {  
252 - padding: 0;  
253 - border: none;  
254 - }  
255 - }  
256 -}  
257 -  
258 .line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } 242 .line_notes_row, .per_line_form { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
259 243
260 .per_line_form { 244 .per_line_form {
app/views/commits/_text_diff.html.haml
@@ -17,7 +17,7 @@ @@ -17,7 +17,7 @@
17 %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code 17 %td.new_line= link_to raw(type == "old" ? " " : line_new) , "##{line_code}", id: line_code
18 %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  " 18 %td.line_content{class: "noteable_line #{type} #{line_code}", "line_code" => line_code}= raw "#{line}  "
19 19
20 - - if @reply_allowed  
21 - - comments = @line_notes.select { |n| n.line_code == line_code }.sort_by(&:created_at)  
22 - - unless comments.empty?  
23 - = render "notes/diff_notes_with_reply", notes: comments 20 + - if @reply_allowed
  21 + - comments = @line_notes.select { |n| n.line_code == line_code }.sort_by(&:created_at)
  22 + - unless comments.empty?
  23 + = render "notes/diff_notes_with_reply", notes: comments
app/views/notes/_common_form.html.haml
@@ -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 success submit_note grouped", id: "submit_note" 19 + = f.submit 'Add Comment', class: "btn comment-btn submit_note grouped", id: "submit_note"
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
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 6
7 // find the reply button for this line 7 // find the reply button for this line
8 // (might not be there if this is the first note) 8 // (might not be there if this is the first note)
9 - 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"); 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) { 10 if (trRpl.size() == 0) {
11 // find the commented line ... 11 // find the commented line ...
12 var trEl = $(".#{note.line_code}").parent(); 12 var trEl = $(".#{note.line_code}").parent();
app/views/notes/_diff_note.html.haml
@@ -1,5 +0,0 @@ @@ -1,5 +0,0 @@
1 -%tr.line_notes_row  
2 - %td{colspan: 3}  
3 - %ul  
4 - = render "notes/note", note: note  
5 -  
app/views/notes/_diff_notes_with_reply.html.haml
1 -- notes.each do |note|  
2 - = render "notes/diff_note", note: note 1 +%tr.notes_holder
  2 + %td.notes_line{ colspan: 2 }
  3 + %span.btn.disabled
  4 + %i.icon-comment
  5 + = notes.count
  6 + %td.notes_content
  7 + %ul.notes
  8 + = render notes
3 9
4 --# reply button  
5 -- note = notes.first # example note  
6 -%tr.line_notes_row.reply  
7 - %td{colspan: 3}  
8 - = link_to "javascript:;",  
9 - class: "line_note_reply_link js-note-add-to-diff-line", 10 + -# reply button
  11 + - note = notes.first # example note
  12 + %button{ class: "btn comment-btn js-note-add-to-diff-line",
10 data: { line_code: note.line_code, 13 data: { line_code: note.line_code,
11 noteable_type: note.noteable_type, 14 noteable_type: note.noteable_type,
12 noteable_id: note.noteable_id }, 15 noteable_id: note.noteable_id },
13 - title: "Add a comment to this line" do 16 + title: "Add a comment to this line" }
14 %i.icon-comment 17 %i.icon-comment
15 Reply 18 Reply
app/views/notes/_notes_with_form.html.haml
1 -%ul#notes-list  
2 -%ul#new-notes-list 1 +%ul#notes-list.notes
  2 +%ul#new-notes-list.notes
3 .notes-status 3 .notes-status
4 4
5 - if can? current_user, :write_note, @project 5 - if can? current_user, :write_note, @project
app/views/notes/_reversed_notes_with_form.html.haml
1 - if can? current_user, :write_note, @project 1 - if can? current_user, :write_note, @project
2 = render "notes/common_form" 2 = render "notes/common_form"
3 3
4 -%ul.reversed#new-notes-list  
5 -%ul.reversed#notes-list 4 +%ul#new-notes-list.reversed.notes
  5 +%ul#notes-list.reversed.notes
6 .notes-status 6 .notes-status
7 7
8 :javascript 8 :javascript