mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność

use <sl-copy-button> (#1535)

pull/1539/head
Cory LaViska 2023-08-22 17:01:00 -04:00 zatwierdzone przez GitHub
rodzic 87ac077b0a
commit b311072d9b
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 4AEE18F83AFDEB23
3 zmienionych plików z 26 dodań i 62 usunięć
Pokaż statystyki Ściągnij plik aktualizacji Ściągnij plik porównania Expand all files Collapse all files

21
docs/_utilities/copy-code-buttons.cjs
Wyświetl plik

@ -1,3 +1,5 @@
let codeBlockId = 0;
/**
* Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
* document will be returned with the appropriate DOM manipulations.
@ -5,19 +7,14 @@
module.exports = function (doc) {
doc.querySelectorAll('pre > code').forEach(code => {
const pre = code.closest('pre');
const button = doc.createElement('button');
button.setAttribute('type', 'button');
button.classList.add('copy-code-button');
button.setAttribute('aria-label', 'Copy');
button.innerHTML = `
<svg class="copy-code-button__copy-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-files" viewBox="0 0 16 16" part="svg">
<path d="M13 0H6a2 2 0 0 0-2 2 2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2 2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 13V4a2 2 0 0 0-2-2H5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1zM3 4a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4z"></path>
</svg>
const button = doc.createElement('sl-copy-button');
<svg class="copy-code-button__copied-icon" style="display: none;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16" part="svg">
<path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"></path>
</svg>
`;
if (!code.id) {
code.id = `code-block-${++codeBlockId}`;
}
button.classList.add('copy-code-button');
button.setAttribute('from', code.id);
pre.append(button);
});

26
docs/assets/scripts/docs.js
Wyświetl plik

@ -163,32 +163,6 @@
});
})();
//
// Copy code buttons
//
(() => {
document.addEventListener('click', event => {
const button = event.target.closest('.copy-code-button');
const pre = button?.closest('pre');
const code = pre?.querySelector('code');
const copyIcon = button?.querySelector('.copy-code-button__copy-icon');
const copiedIcon = button?.querySelector('.copy-code-button__copied-icon');
if (button && code) {
navigator.clipboard.writeText(code.innerText);
copyIcon.style.display = 'none';
copiedIcon.style.display = 'inline';
button.classList.add('copy-code-button--copied');
setTimeout(() => {
copyIcon.style.display = 'inline';
copiedIcon.style.display = 'none';
button.classList.remove('copy-code-button--copied');
}, 1000);
}
});
})();
//
// Smooth links
//

41
docs/assets/styles/docs.css
Wyświetl plik

@ -506,31 +506,31 @@ pre .token.italic {
/* Copy code button */
.copy-code-button {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.5rem;
right: 0.5rem;
background: var(--sl-color-neutral-0);
border-radius: calc(var(--docs-border-radius) * 0.875);
border: solid 1px var(--sl-color-neutral-200);
top: 0;
right: 0;
white-space: normal;
color: var(--sl-color-neutral-800);
text-transform: uppercase;
padding: 0.5rem;
margin: 0;
cursor: pointer;
transition: 100ms opacity, 100ms scale;
transition: 150ms opacity, 150ms scale;
}
.copy-code-button svg {
width: 1rem;
height: 1rem;
.copy-code-button::part(button) {
background-color: var(--sl-color-neutral-50);
border-radius: 0 var(--docs-border-radius) 0 var(--docs-border-radius);
padding: 0.75rem;
}
.copy-code-button::part(button):hover {
background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 3%);
}
.copy-code-button::part(button):active {
background-color: color-mix(in oklch, var(--sl-color-neutral-50), var(--sl-color-neutral-1000) 6%);
}
pre .copy-code-button {
opacity: 0;
scale: 0.9;
scale: 0.75;
}
pre:hover .copy-code-button,
@ -539,13 +539,6 @@ pre:hover .copy-code-button,
scale: 1;
}
pre:hover .copy-code-button:hover,
pre:hover .copy-code-button--copied {
background: var(--sl-color-neutral-200);
border-color: var(--sl-color-neutral-300);
color: var(--sl-color-neutral-900);
}
/* Callouts */
.callout {
position: relative;