Merge branch 'improve-diffs' into 'master'

Improve diffs UI

* replace big button with simple toggle for diff comments
* replace diff stats button with link

See merge request !399

6 files changed, 9 insertions, 14 deletions

diff --git a/CHANGELOG b/CHANGELOG
index 22f38024f93..328c672338d 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -6,6 +6,7 @@ v 7.10.0 (unreleased)
   - Add a service to support external wikis (Hannes Rosenögger)
   - List new commits for newly pushed branch in activity view.
   - Add changelog, license and contribution guide links to project sidebar.
+  - Improve diff UI
 
 v 7.9.0 (unreleased)
   - Add HipChat integration documentation (Stan Hu)
diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index c7acde2afe5..fda142293bc 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -169,9 +169,7 @@ $ ->
 
   # Show/hide comments on diff
   $("body").on "click", ".js-toggle-diff-comments", (e) ->
-    $(@).find('i').
-      toggleClass('fa fa-chevron-down').
-      toggleClass('fa fa-chevron-up')
+    $(@).toggleClass('active')
     $(@).closest(".diff-file").find(".notes_holder").toggle()
     e.preventDefault()
 
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 48d4c33ce85..1747f36dcf3 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -1,4 +1,4 @@
-.row
+.row.prepend-top-20.append-bottom-10
   .col-md-8
     = render 'projects/diffs/stats', diffs: diffs
   .col-md-4
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index a9e4d63cd98..860ab096341 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -22,9 +22,8 @@
 
       .diff-btn-group
         - if blob.text?
-          = link_to '#', class: 'js-toggle-diff-comments btn btn-sm' do
-            %i.fa.fa-chevron-down
-            Show/Hide comments
+          = link_to '#', class: 'js-toggle-diff-comments btn btn-sm active has_tooltip', title: "Toggle comments for this file" do
+            %i.fa.fa-comments
            
 
         - if @merge_request && @merge_request.source_project
diff --git a/app/views/projects/diffs/_stats.html.haml b/app/views/projects/diffs/_stats.html.haml
index d387ec2f75c..1625930615a 100644
--- a/app/views/projects/diffs/_stats.html.haml
+++ b/app/views/projects/diffs/_stats.html.haml
@@ -1,17 +1,14 @@
 .js-toggle-container
   .commit-stat-summary
     Showing
-    %strong.cdark #{pluralize(diffs.count, "changed file")}
+    = link_to '#', class: 'js-toggle-button' do
+      %strong #{pluralize(diffs.count, "changed file")}
     - if current_controller?(:commit)
       - unless @commit.has_zero_stats?
         with
         %strong.cgreen #{@commit.stats.additions} additions
         and
         %strong.cred #{@commit.stats.deletions} deletions
-     
-    = link_to '#', class: 'btn btn-sm js-toggle-button' do
-      Show diff stats
-      %i.fa.fa-chevron-down
   .file-stats.js-toggle-content.hide
     %ul.bordered-list
       - diffs.each_with_index do |diff, i|
diff --git a/features/steps/project/merge_requests.rb b/features/steps/project/merge_requests.rb
index 6e2f60972b6..6f6ce439f3e 100644
--- a/features/steps/project/merge_requests.rb
+++ b/features/steps/project/merge_requests.rb
@@ -209,13 +209,13 @@ class Spinach::Features::ProjectMergeRequests < Spinach::FeatureSteps
 
   step 'I click link "Hide inline discussion" of the second file' do
     within '.files [id^=diff]:nth-child(2)' do
-      click_link 'Show/Hide comments'
+      find('.js-toggle-diff-comments').click
     end
   end
 
   step 'I click link "Show inline discussion" of the second file' do
     within '.files [id^=diff]:nth-child(2)' do
-      click_link 'Show/Hide comments'
+      find('.js-toggle-diff-comments').click
     end
   end