Improve the UX of clipboard button
This commit is contained in:
parent
abb548fcee
commit
1bb54096f4
5 changed files with 14 additions and 9 deletions
|
@ -133,7 +133,7 @@
|
|||
{% assign _new_content = _new_content | append: _snippet
|
||||
| append: '<div class="code-header">'
|
||||
| append: _label
|
||||
| append: '<button aria-label="copy" data-original-title="'
|
||||
| append: '<button aria-label="copy" title-succeed="'
|
||||
| append: site.data.locales[lang].post.button.copy_code.succeed
|
||||
| append: '"><i class="far fa-clipboard"></i></button></div>'
|
||||
| append: '<div class="highlight"><code>'
|
||||
|
|
|
@ -41,7 +41,7 @@ $(function() {
|
|||
});
|
||||
|
||||
$(btnSelector).tooltip({
|
||||
trigger: 'click',
|
||||
trigger: 'hover',
|
||||
placement: 'left'
|
||||
});
|
||||
|
||||
|
@ -53,11 +53,12 @@ $(function() {
|
|||
const ICON_DEFAULT = getIcon(btnSelector);
|
||||
|
||||
function showTooltip(btn) {
|
||||
$(btn).tooltip('show');
|
||||
const succeedTitle = $(btn).attr('title-succeed');
|
||||
$(btn).attr('data-original-title', succeedTitle).tooltip('show');
|
||||
}
|
||||
|
||||
function hideTooltip(btn) {
|
||||
$(btn).tooltip('hide');
|
||||
$(btn).tooltip('hide').removeAttr('data-original-title');
|
||||
}
|
||||
|
||||
function setSuccessIcon(btn) {
|
||||
|
|
|
@ -214,15 +214,19 @@ div {
|
|||
@extend %cursor-pointer;
|
||||
|
||||
&[timeout] {
|
||||
border-color: var(--clipboard-checked-color);
|
||||
&:hover {
|
||||
border-color: var(--clipboard-checked-color);
|
||||
}
|
||||
|
||||
i {
|
||||
color: var(--clipboard-checked-color);
|
||||
}
|
||||
}
|
||||
|
||||
&:not([timeout]):hover {
|
||||
background-color: gray;
|
||||
> i {
|
||||
background-color: rgba(128, 128, 128, 0.37);
|
||||
|
||||
i {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
2
assets/js/dist/page.min.js
vendored
2
assets/js/dist/page.min.js
vendored
File diff suppressed because one or more lines are too long
2
assets/js/dist/post.min.js
vendored
2
assets/js/dist/post.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue