nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

clipboard: adjust line-breaking for inline code between code and button #175

Browse source
This commit is contained in:
Sören Weber 2022-02-17 19:21:20 +01:00
parent 7c1d85558d
commit 9f7308ca4c
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
5 changed files with 29 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/partials/stylesheet.html
View file

@ -17,10 +17,10 @@
{{- end }}
<style>
{{- if .Site.Params.disableInlineCopyToClipBoard }}
:not(pre) > code.copy-to-clipboard-inline + span.copy-to-clipboard {
:not(pre) > code.copy-to-clipboard-code + span.copy-to-clipboard-button {
display: none;
}
:not(pre) > code.copy-to-clipboard-inline {
:not(pre) > code.copy-to-clipboard-code {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right-width: 1px;

4
static/css/print.css
View file

@ -21,7 +21,7 @@ pre code {
/* remove page padding - this can be set exactly in the print setup */
padding: 0;
}
code.copy-to-clipboard-inline {
code.copy-to-clipboard-code {
border-bottom-right-radius: 2px;
border-top-right-radius: 2px;
border-right-width: 1px;
@ -46,7 +46,7 @@ pre {
#body #breadcrumbs .links {
overflow-x: hidden;
}
.copy-to-clipboard {
.copy-to-clipboard-button {
display: none;
}

18
static/css/theme.css
View file

@ -694,7 +694,11 @@ code {
white-space: nowrap;
}
code.copy-to-clipboard-inline {
.copy-to-clipboard {
display: inline-block;
}
code.copy-to-clipboard-code {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
border-right-width: 0;
@ -1042,7 +1046,7 @@ a[aria-disabled="true"] {
}
}
.copy-to-clipboard {
.copy-to-clipboard-button {
background-color: #fffae9; /* var(--CODE-INLINE-BG-color) */
border: 1px solid #f8e8c8; /* var(--CODE-INLINE-BORDER-color) */
border-radius: 0 2px 2px 0;
@ -1053,24 +1057,24 @@ a[aria-disabled="true"] {
padding-left: 22px;
}
.copy-to-clipboard > i {
.copy-to-clipboard-button > i {
font-family: "Font Awesome 6 Free";
font-size: 92%;
font-weight: 500;
margin-left: -22px;
}
.copy-to-clipboard-inline + .copy-to-clipboard > i {
.copy-to-clipboard-code + .copy-to-clipboard-button > i {
padding-left: 5px;
padding-right: 5px;
}
.copy-to-clipboard:hover {
.copy-to-clipboard-button:hover {
background-color: #5e5e5e; /* var(--CODE-INLINE-color) */
color: #fffae9; /* var(--CODE-INLINE-BG-color) */
}
pre .copy-to-clipboard {
pre .copy-to-clipboard-button {
background-color: rgba( 160, 160, 160, .2 );
border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
border-radius: 2px;
@ -1081,7 +1085,7 @@ pre .copy-to-clipboard {
top: 4px;
}
pre .copy-to-clipboard:hover {
pre .copy-to-clipboard-button:hover {
background-color: #486ac9; /* var(--MAIN-LINK-color) */
border-color: #486ac9; /* var(--MAIN-LINK-color) */
color: #000000; /* var(--CODE-BLOCK-color) */

8
static/css/variant.css
View file

@ -130,23 +130,23 @@ div.featherlight .featherlight-content{
background-color: var(--MAIN-BG-color, #ffffff);
}
.copy-to-clipboard {
.copy-to-clipboard-button {
background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e);
}
.copy-to-clipboard:hover {
.copy-to-clipboard-button:hover {
background-color: var(--CODE-INLINE-color, #5e5e5e);
color: var(--CODE-INLINE-BG-color, #fffae9);
}
pre .copy-to-clipboard {
pre .copy-to-clipboard-button {
border-color: var(--CODE-BLOCK-BORDER-color, #d8d8d8);
color: var(--MAIN-LINK-color, #486ac9);
}
pre .copy-to-clipboard:hover {
pre .copy-to-clipboard-button:hover {
background-color: var(--MAIN-LINK-color, #486ac9);
border-color: var(--MAIN-LINK-color, #486ac9);
color: var(--CODE-BLOCK-BG-color, #f8f8f8);

18
static/js/relearn.js
View file

@ -338,22 +338,21 @@ jQuery(function() {
if (text.length > 5) {
if (!clipInit) {
var text, clip = new ClipboardJS('.copy-to-clipboard', {
var clip = new ClipboardJS('.copy-to-clipboard-button', {
text: function(trigger) {
text = $(trigger).prev('code').text();
var text = $(trigger).prev('code').text();
return text.replace(/^\$\s/gm, '');
}
});
var inPre;
clip.on('success', function(e) {
e.clearSelection();
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
});
clip.on('error', function(e) {
inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
var inPre = $(e.trigger).parent().prop('tagName') == 'PRE';
$(e.trigger).attr('aria-label', fallbackMessage(e.action)).addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
$(document).one('copy', function(){
$(e.trigger).attr('aria-label', 'Copied to clipboard!').addClass('tooltipped tooltipped-' + (inPre ? 'w' : 's'));
@ -363,9 +362,12 @@ jQuery(function() {
clipInit = true;
}
code.addClass('copy-to-clipboard-inline');
code.after('<span class="copy-to-clipboard" title="Copy to clipboard"><i class="fas fa-copy"></i>');
code.next('.copy-to-clipboard').on('mouseleave', function() {
var parent = code.parent();
code.addClass('copy-to-clipboard-code');
code.replaceWith($('<span/>', {'class': 'copy-to-clipboard'}).append(code.clone() ));
code = parent.children('.copy-to-clipboard').last().children('.copy-to-clipboard-code');
code.after('<span class="copy-to-clipboard-button" title="Copy to clipboard"><i class="fas fa-copy"></i>');
code.next('.copy-to-clipboard-button').on('mouseleave', function() {
$(this).attr('aria-label', null).removeClass('tooltipped tooltipped-s tooltipped-w');
});
}