Merge branch 'rs-clipboard-js' into 'master'

Add "Copy to clipboard" buttons

See #2855

See merge request !1494

app/assets/javascripts/copy_to_clipboard.js.coffee

+#= require clipboard
+
+$ ->
+  clipboard = new Clipboard '.js-clipboard-trigger',
+    text: (trigger) ->
+      $target = $(trigger.nextElementSibling || trigger.previousElementSibling)
+      $target.data('clipboard-text') || $target.text().trim()
+
+  clipboard.on 'success', (e) ->
+    $(e.trigger).
+      tooltip(trigger: 'manual', placement: 'auto bottom', title: 'Copied!').
+      tooltip('show')
+
+    # Clear the selection and blur the trigger so it loses its border
+    e.clearSelection()
+    $(e.trigger).blur()
+
+    # Manually hide the tooltip after 1 second
+    setTimeout(->
+      $(e.trigger).tooltip('hide')
+    , 1000)

app/assets/stylesheets/pages/issuable.scss

@@ -88,3 +88,16 @@
     padding: 13px 0;
   }
 }
+
+.cross-project-reference {
+  text-align: center;
+  width: 100%;
+
+  .slead {
+    padding: 5px;
+  }
+
+  span, button {
+    background-color: $background-color;
+  }
+}

app/assets/stylesheets/pages/merge_requests.scss

@@ -205,6 +205,15 @@
 
 #modal_merge_info .modal-dialog {
   width: 600px;
+
+  .btn-clipboard {
+    @extend .pull-right;
+
+    margin-right: 18px;
+    margin-top: 5px;
+    position: absolute;
+    right: 0;
+  }
 }
 
 .mr-source-target {

app/helpers/clipboard_helper.rb

+module ClipboardHelper
+  def clipboard_button
+    content_tag :button,
+      icon('clipboard'),
+      class: 'btn btn-xs btn-clipboard js-clipboard-trigger',
+      type: :button
+  end
+end

app/views/projects/commits/_commit.html.haml

@@ -21,7 +21,8 @@
           = link_to ci_status_path(ci_commit), class: "c#{ci_status_color(ci_commit)}" do
             = ci_status_icon(ci_commit)
            
-        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id"
+        = clipboard_button
+        = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit_short_id", data: {clipboard_text: commit.id}
 
       .notes_count
         - if note_count > 0

app/views/projects/issues/_discussion.html.haml

@@ -17,8 +17,10 @@
         - @participants.each do |participant|
           = link_to_member(@project, participant, name: false, size: 24)
     .col-md-3
-      %span.slead.has_tooltip{title: 'Cross-project reference'}
-        = cross_project_reference(@project, @issue)
+      .input-group.cross-project-reference
+        %span.slead.has_tooltip{title: 'Cross-project reference'}
+          = cross_project_reference(@project, @issue)
+        = clipboard_button
 
 .row
   %section.col-md-9

app/views/projects/merge_requests/show/_how_to_merge.html.haml

@@ -3,11 +3,12 @@
     .modal-content
       .modal-header
         %a.close{href: "#", "data-dismiss" => "modal"} ×
-        %h3 Check out, review and merge locally
+        %h3 Check out, review, and merge locally
       .modal-body
         %p
-          %strong Step 1. 
+          %strong Step 1.
           Fetch and check out the branch for this merge request
+        = clipboard_button
         %pre.dark
           - if @merge_request.for_fork?
             :preserve
@@ -24,6 +25,7 @@
         %p
           %strong Step 3.
           Merge the branch and fix any conflicts that come up
+        = clipboard_button
         %pre.dark
           - if @merge_request.for_fork?
             :preserve
@@ -36,6 +38,7 @@
         %p
           %strong Step 4.
           Push the result of the merge to GitLab
+        = clipboard_button
         %pre.dark
           :preserve
             git push origin #{h @merge_request.target_branch}