Updated commit diff view with some minor visual modifications

Prepared diff view for multiple view modes

Converted commits.js to coffeescript
image info in separate coffeescript file

Added swipe view mode

Added onion skin viewMode

app/views/notes/_discussion.html.haml

@@ -38,7 +38,7 @@
     - if note.for_diff_line?
       - if note.diff
         .content
-          .diff_file= render "notes/discussion_diff", discussion_notes: discussion_notes, note: note
+          .file= render "notes/discussion_diff", discussion_notes: discussion_notes, note: note
       - else
         = link_to 'show outdated discussion', '#', class: 'js-show-outdated-discussion'
         %div.hide.outdated-discussion

app/views/notes/_discussion_diff.html.haml

 - diff = note.diff
-.diff_file_header
+.header
   - if diff.deleted_file
     %span= diff.old_path
   - else
@@ -7,7 +7,7 @@
     - if diff.a_mode && diff.b_mode && diff.a_mode != diff.b_mode
       %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
   %br/
-.diff_file_content
+.content
   %table
     - each_diff_line(diff, note.diff_file_index) do |line, type, line_code, line_new, line_old|
       %tr.line_holder{ id: line_code }

features/steps/shared/diff_note.rb

@@ -2,27 +2,27 @@ module SharedDiffNote
   include Spinach::DSL
   Given 'I cancel the diff comment' do
-    within(".diff_file") do
+    within(".file") do
       find(".js-close-discussion-note-form").trigger("click")
     end
   end
   Given 'I delete a diff comment' do
     sleep 1
-    within(".diff_file") do
+    within(".file") do
       first(".js-note-delete").trigger("click")
     end
   end
   Given 'I haven\'t written any diff comment text' do
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: ""
     end
   end
   Given 'I leave a diff comment like "Typo, please fix"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_29_14.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "Typo, please fix"
       #click_button("Add Comment")
       find(".js-comment-button").trigger("click")
@@ -32,7 +32,7 @@ module SharedDiffNote
   Given 'I preview a diff comment text like "Should fix it :smile:"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_29_14.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "Should fix it :smile:"
       find(".js-note-preview-button").trigger("click")
     end
@@ -40,7 +40,7 @@ module SharedDiffNote
   Given 'I preview another diff comment text like "DRY this up"' do
     find("#586fb7c4e1add2d4d24e27566ed7064680098646_57_41.line_holder .js-add-diff-note-button").trigger("click")
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: "DRY this up"
       find(".js-note-preview-button").trigger("click")
     end
@@ -55,13 +55,13 @@ module SharedDiffNote
   end
   Given 'I write a diff comment like ":-1: I don\'t like this"' do
-    within(".diff_file") do
+    within(".file") do
       fill_in "note[note]", with: ":-1: I don\'t like this"
     end
   end
   Given 'I submit the diff comment' do
-    within(".diff_file") do
+    within(".file") do
       click_button("Add Comment")
     end
   end
@@ -69,49 +69,49 @@ module SharedDiffNote
   Then 'I should not see the diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should_not have_css("form.new_note")
     end
   end
   Then 'I should not see the diff comment preview button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview-button", visible: false)
     end
   end
   Then 'I should not see the diff comment text field' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-text", visible: false)
     end
   end
   Then 'I should only see one diff form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css("form.new_note", count: 1)
     end
   end
   Then 'I should see a diff comment form with ":-1: I don\'t like this"' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_field("note[note]", with: ":-1: I don\'t like this")
     end
   end
   Then 'I should see a diff comment saying "Typo, please fix"' do
-    within(".diff_file .note") do
+    within(".file .note") do
       page.should have_content("Typo, please fix")
     end
   end
   Then 'I should see a discussion reply button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_link("Reply")
     end
   end
   Then 'I should see a temporary diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-temp-notes-holder form.new_note")
     end
   end
@@ -121,37 +121,37 @@ module SharedDiffNote
   end
   Then 'I should see an empty diff comment form' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_field("note[note]", with: "")
     end
   end
   Then 'I should see the cancel comment button' do
-    within(".diff_file form") do
+    within(".file form") do
       page.should have_css(".js-close-discussion-note-form", text: "Cancel")
     end
   end
   Then 'I should see the diff comment preview' do
-    within(".diff_file form") do
+    within(".file form") do
       page.should have_css(".js-note-preview", visible: false)
     end
   end
   Then 'I should see the diff comment edit button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-edit-button", visible: true)
     end
   end
   Then 'I should see the diff comment preview button' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview-button", visible: true)
     end
   end
   Then 'I should see two separate previews' do
-    within(".diff_file") do
+    within(".file") do
       page.should have_css(".js-note-preview", visible: true, count: 2)
       page.should have_content("Should fix it")
       page.should have_content("DRY this up")