Improve the UX of clipboard button

This commit is contained in:
Cotes Chung 2021-09-22 22:21:33 +08:00
parent abb548fcee
commit 1bb54096f4
5 changed files with 14 additions and 9 deletions

View file

@ -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>'

View file

@ -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) {

View file

@ -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;
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long