Commit b7ba5fa0 authored by Rémy Coutable's avatar Rémy Coutable

Merge branch 'copy-to-clipboard-tooltip' into 'master'

Display tooltip for "Copy to Clipboard" button

## What does this MR do?

Add a tooltip to the "Copy to Clipboard" button.

## Are there points in the code the reviewer needs to double check?

Nope.

## Why was this MR needed?

There was no tooltip.

## What are the relevant issue numbers?

fixes #19640, #19682

## Screenshots

(wrong cursor is the fault of my screenshot program)

![after](/uploads/6b89790fa3a32b06b115ef1461cbcd86/after.png)


See merge request !5164
parents 3999b80e f2bf47f4
...@@ -9,6 +9,7 @@ v 8.10.0 (unreleased) ...@@ -9,6 +9,7 @@ v 8.10.0 (unreleased)
- Remove pinTo from Flash and make inline flash messages look nicer !4854 (winniehell) - Remove pinTo from Flash and make inline flash messages look nicer !4854 (winniehell)
- Wrap code blocks on Activies and Todos page. !4783 (winniehell) - Wrap code blocks on Activies and Todos page. !4783 (winniehell)
- Align flash messages with left side of page content !4959 (winniehell) - Align flash messages with left side of page content !4959 (winniehell)
- Display tooltip for "Copy to Clipboard" button !5164 (winniehell)
- Display last commit of deleted branch in push events !4699 (winniehell) - Display last commit of deleted branch in push events !4699 (winniehell)
- Escape file extension when parsing search results !5141 (winniehell) - Escape file extension when parsing search results !5141 (winniehell)
- Apply the trusted_proxies config to the rack request object for use with rack_attack - Apply the trusted_proxies config to the rack request object for use with rack_attack
......
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
font-size: 0; font-size: 0;
} }
.btn-transparent { .btn-clipboard, .btn-transparent {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
......
...@@ -15,29 +15,13 @@ module ButtonHelper ...@@ -15,29 +15,13 @@ module ButtonHelper
# #
# See http://clipboardjs.com/#usage # See http://clipboardjs.com/#usage
def clipboard_button(data = {}) def clipboard_button(data = {})
data = { toggle: 'tooltip', placement: 'bottom', container: 'body' }.merge(data)
content_tag :button, content_tag :button,
icon('clipboard'), icon('clipboard'),
class: "btn btn-clipboard", class: "btn btn-clipboard",
data: data, data: data,
type: :button type: :button,
end title: "Copy to Clipboard"
# Output a "Copy to Clipboard" button with a custom CSS class
#
# data - Data attributes passed to `content_tag`
# css_class - Class passed to the `content_tag`
#
# Examples:
#
# # Define the target element
# clipboard_button_with_class({clipboard_target: "div#foo"}, css_class: "btn-clipboard")
# # => "<button class='btn btn-clipboard' data-clipboard-target='div#foo'>...</button>"
def clipboard_button_with_class(data = {}, css_class: 'btn-clipboard')
content_tag :button,
icon('clipboard'),
class: "btn #{css_class}",
data: data,
type: :button
end end
def http_clone_button(project, placement = 'right', append_link: true) def http_clone_button(project, placement = 'right', append_link: true)
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
.commit-actions.hidden-xs .commit-actions.hidden-xs
- if commit.status - if commit.status
= render_commit_status(commit, cssclass: 'btn btn-transparent') = render_commit_status(commit, cssclass: 'btn btn-transparent')
= clipboard_button_with_class({ clipboard_text: commit.id }, css_class: 'btn-transparent') = clipboard_button(clipboard_text: commit.id)
= link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent" = link_to commit.short_id, namespace_project_commit_path(project.namespace, project, commit), class: "commit-short-id btn btn-transparent"
= link_to_browse_code(project, commit) = link_to_browse_code(project, commit)
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
%p %p
%strong Step 1. %strong Step 1.
Fetch and check out the branch for this merge request Fetch and check out the branch for this merge request
= clipboard_button_with_class({clipboard_target: "pre#merge-info-1"}, css_class: "btn-clipboard") = clipboard_button(clipboard_target: "pre#merge-info-1")
%pre.dark#merge-info-1 %pre.dark#merge-info-1
- if @merge_request.for_fork? - if @merge_request.for_fork?
:preserve :preserve
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
%p %p
%strong Step 3. %strong Step 3.
Merge the branch and fix any conflicts that come up Merge the branch and fix any conflicts that come up
= clipboard_button_with_class({clipboard_target: "pre#merge-info-3"}, css_class: "btn-clipboard") = clipboard_button(clipboard_target: "pre#merge-info-3")
%pre.dark#merge-info-3 %pre.dark#merge-info-3
- if @merge_request.for_fork? - if @merge_request.for_fork?
:preserve :preserve
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
%p %p
%strong Step 4. %strong Step 4.
Push the result of the merge to GitLab Push the result of the merge to GitLab
= clipboard_button_with_class({clipboard_target: "pre#merge-info-4"}, css_class: "btn-clipboard") = clipboard_button(clipboard_target: "pre#merge-info-4")
%pre.dark#merge-info-4 %pre.dark#merge-info-4
:preserve :preserve
git push origin #{h @merge_request.target_branch} git push origin #{h @merge_request.target_branch}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment