Add button for toggling inline comments in diff view.

This is useful when there are many comments and they're becoming a distraction when trying to read the diff.

5 files changed, 42 insertions, 4 deletions

diff --git a/app/assets/stylesheets/sections/commits.scss b/app/assets/stylesheets/sections/commits.scss
index ff293bc4a00..537ce921d9c 100644
--- a/app/assets/stylesheets/sections/commits.scss
+++ b/app/assets/stylesheets/sections/commits.scss
@@ -60,6 +60,9 @@
     }
 
     table {
+      &.text-file {
+        border-collapse: separate;
+      }
       width: 100%;
       font-family: $monospace_font;
       border: none;
diff --git a/app/assets/stylesheets/sections/notes.scss b/app/assets/stylesheets/sections/notes.scss
index 9f5f1579fbd..52c778aaa85 100644
--- a/app/assets/stylesheets/sections/notes.scss
+++ b/app/assets/stylesheets/sections/notes.scss
@@ -184,13 +184,40 @@ ul.notes {
     }
   }
 }
+
+.file {
+  .discussion-actions {
+    margin-right: 5px;
+    margin-top: 3px;
+
+    .turn-off {
+      display: inherit;
+    }
+    .turn-on {
+      display: none;
+    }
+  }
+
+  &.open .discussion-actions {
+    .turn-off {
+      display: none;
+    }
+    .turn-on {
+      display: inherit;
+    }
+  }
+
+  &[id^="diff"] .content {
+    display: block;
+  }
+}
+
 .file .note .note-actions {
   right: 0;
   top: 0;
 }
 
 
-
 /**
  * Line note button on the side of diffs
  */
diff --git a/app/views/projects/commits/_diffs.html.haml b/app/views/projects/commits/_diffs.html.haml
index a41a89bb972..6713fa20dd9 100644
--- a/app/views/projects/commits/_diffs.html.haml
+++ b/app/views/projects/commits/_diffs.html.haml
@@ -44,7 +44,7 @@
       - file = project.repository.blob_at(@commit.id, diff.new_path)
       - file = project.repository.blob_at(@commit.parent_id, diff.old_path) unless file
       - next unless file
-      .file{id: "diff-#{i}"}
+      .file.js-details-container.js-toggle-container.open{id: "diff-#{i}"}
         .header
           - if diff.deleted_file
             %span= diff.old_path
@@ -62,6 +62,14 @@
               View file @
               %span.commit-short-id= @commit.short_id(6)
 
+          .discussion-actions.pull-right
+            = link_to "javascript:;", class: "js-details-target js-toggle-button turn-on" do
+              %i.icon-eye-close
+              Hide inline discussion
+            = link_to "javascript:;", class: "js-details-target js-toggle-button turn-off" do
+              %i.icon-eye-open
+              Show inline discussion
+
         .content
           -# Skipp all non non-supported blobs
           - next unless file.respond_to?('text?')
diff --git a/app/views/projects/notes/_diff_notes_with_reply.html.haml b/app/views/projects/notes/_diff_notes_with_reply.html.haml
index 9537ab18caa..9acadc6a14e 100644
--- a/app/views/projects/notes/_diff_notes_with_reply.html.haml
+++ b/app/views/projects/notes/_diff_notes_with_reply.html.haml
@@ -1,7 +1,7 @@
 - note = notes.first # example note
 -# Check if line want not changed since comment was left
 - if !defined?(line) || line == note.diff_line
-  %tr.notes_holder
+  %tr.notes_holder.js-toggle-content
     %td.notes_line{ colspan: 2 }
       %span.btn.disabled
         %i.icon-comment
diff --git a/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml b/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
index 936dbb354cd..2012aa021b9 100644
--- a/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
+++ b/app/views/projects/notes/_diff_notes_with_reply_parallel.html.haml
@@ -1,6 +1,6 @@
 - note1 = notes1.first # example note
 - note2 = notes2.first # example note
-%tr.notes_holder
+%tr.notes_holder.js-toggle-content
   -# Check if line want not changed since comment was left
   /- if !defined?(line1) || line1 == note1.diff_line
   - if note1