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

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)

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()
 

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

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

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|

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