Unify diff option buttons.

5 files changed, 40 insertions, 24 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index eceff6d91d5..46dc852e308 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -206,12 +206,6 @@ $ ->
     $('.header-content .navbar-collapse').toggle()
     $('.navbar-toggle').toggleClass('active')
 
-  # Show/hide comments on diff
-  $body.on "click", ".js-toggle-diff-comments", (e) ->
-    $(@).toggleClass('active')
-    $(@).closest(".diff-file").find(".notes_holder").toggle()
-    e.preventDefault()
-
   $document.off "click", '.js-confirm-danger'
   $document.on "click", '.js-confirm-danger', (e) ->
     e.preventDefault()
diff --git a/app/assets/javascripts/merge_request_tabs.js.coffee b/app/assets/javascripts/merge_request_tabs.js.coffee
index 86539e0d725..fd8ce9c4bcf 100644
--- a/app/assets/javascripts/merge_request_tabs.js.coffee
+++ b/app/assets/javascripts/merge_request_tabs.js.coffee
@@ -164,6 +164,7 @@ class @MergeRequestTabs
         @diffsLoaded = true
         @scrollToElement("#diffs")
         @highlighSelectedLine()
+        @bindDiffOptionsEvents()
         @filesCommentButton = $('.files .diff-file').filesCommentButton()
 
         $(document)
@@ -174,6 +175,26 @@ class @MergeRequestTabs
             @highlighSelectedLine()
             @scrollToElement("#diffs")
 
+
+  bindDiffOptionsEvents: ->
+
+    $('.inline-parallel-buttons .js-diff-comments-button').on 'click', (e) ->
+      e.preventDefault()
+
+      $el      = $ this
+      state    = $el.data 'state'
+      newState = 'hidden'
+      newLabel = 'Show all comments'
+
+      if state is 'hidden'
+        newLabel = 'Hide all comments'
+        newState = 'visible'
+
+      $("#diffs .notes_holder").toggle()
+      $el.text newLabel
+      $el.data 'state', newState
+
+
   highlighSelectedLine: ->
     $('.hll').removeClass 'hll'
     locationHash = window.location.hash
diff --git a/app/helpers/diff_helper.rb b/app/helpers/diff_helper.rb
index 75b029365f9..52d1f09e82c 100644
--- a/app/helpers/diff_helper.rb
+++ b/app/helpers/diff_helper.rb
@@ -153,9 +153,6 @@ module DiffHelper
   end
 
   def toggle_whitespace_link(url, options)
-    options[:class] ||= ''
-    options[:class] << ' btn btn-default'
-
     link_to "#{hide_whitespace? ? 'Show' : 'Hide'} whitespace changes", url, class: options[:class]
   end
 end
diff --git a/app/views/projects/diffs/_diffs.html.haml b/app/views/projects/diffs/_diffs.html.haml
index 8ae433b4823..0539fb4e6d1 100644
--- a/app/views/projects/diffs/_diffs.html.haml
+++ b/app/views/projects/diffs/_diffs.html.haml
@@ -5,16 +5,25 @@
 - diff_files = safe_diff_files(diffs, diff_refs: diff_refs, repository: project.repository)
 
 .content-block.oneline-block.files-changed
-  .inline-parallel-buttons
-    - if !expand_all_diffs? && diff_files.any? { |diff_file| diff_file.collapsed? }
-      = link_to 'Expand all', url_for(params.merge(expand_all_diffs: 1, format: 'html')), class: 'btn btn-default'
-    - if show_whitespace_toggle
-      - if current_controller?(:commit)
-        = commit_diff_whitespace_link(@project, @commit, class: 'hidden-xs')
-      - elsif current_controller?(:merge_requests)
-        = diff_merge_request_whitespace_link(@project, @merge_request, class: 'hidden-xs')
-      - elsif current_controller?(:compare)
-        = diff_compare_whitespace_link(@project, params[:from], params[:to], class: 'hidden-xs')
+  .inline-parallel-buttons.dropdown
+    %button.btn.btn-default{ type: "button", data: { toggle: "dropdown" } }
+      Options
+      %span.caret
+    %ul.dropdown-menu
+      %li
+        %a.is-unselectable.js-diff-comments-button{ href: "#", data: { state: "visible" } }
+          Hide all comments
+      %li
+        - if show_whitespace_toggle
+          - if current_controller?(:commit)
+            = commit_diff_whitespace_link(@project, @commit, {})
+          - elsif current_controller?(:merge_requests)
+            = diff_merge_request_whitespace_link(@project, @merge_request, {})
+          - elsif current_controller?(:compare)
+            = diff_compare_whitespace_link(@project, params[:from], params[:to])
+      %li
+        - if !expand_all_diffs? && diff_files.any? { |diff_file| diff_file.collapsed? }
+          = link_to 'Expand all', url_for(params.merge(expand_all_diffs: 1, format: 'html')), class: 'is-unselectable'
     .btn-group
       = inline_diff_btn
       = parallel_diff_btn
diff --git a/app/views/projects/diffs/_file.html.haml b/app/views/projects/diffs/_file.html.haml
index c306909fb1a..9af0e768420 100644
--- a/app/views/projects/diffs/_file.html.haml
+++ b/app/views/projects/diffs/_file.html.haml
@@ -4,11 +4,6 @@
 
     - unless diff_file.submodule?
       .file-actions.hidden-xs
-        - if blob_text_viewable?(blob)
-          = link_to '#', class: 'js-toggle-diff-comments btn active has-tooltip btn-file-option', title: "Toggle comments for this file" do
-            = icon('comment')
-          \
-
         - if editable_diff?(diff_file)
           = edit_blob_link(@merge_request.source_project,
               @merge_request.source_branch, diff_file.new_path,