From fe1ec83a2887368826bb66557829b8ffae5a0415 Mon Sep 17 00:00:00 2001 From: daudix Date: Mon, 2 Sep 2024 03:25:26 +0300 Subject: [PATCH] Disable copy button until animation completes, fix the fill animation color, change how animations/transitions are disabled --- CHANGELOG.md | 2 ++ sass/_comments.scss | 6 ++---- sass/_general.scss | 5 ++--- sass/_pre-container.scss | 21 ++++++++++++--------- templates/partials/copy_button.html | 10 ++++++---- 5 files changed, 24 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94a08a9..ede6772 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,8 +28,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add margin between comment author name and timestamp. - Add missing edge highlight to active footer navbar links. - Make comment timestamp more subtle. +- Make the copy button inactive after it is pressed until the animation is complete. - Reduce the target heading transition time. - Reduce top margin of the target heading. +- Set animation/transition duration to 0s with `prefers-reduced-motion' instead of removing them altogether. - Set socials icons as CSS variables and not inline styles. - Show theme switcher if `config.extra.default_theme` is set, even if `config.extra.nav.show_theme_switcher` is not. - Tweak padding of verified instance badge. diff --git a/sass/_comments.scss b/sass/_comments.scss index 94ab209..c6793c5 100644 --- a/sass/_comments.scss +++ b/sass/_comments.scss @@ -21,10 +21,8 @@ margin-block-start: 2rem; #load-comments { - background-image: linear-gradient(to right, - var(--fg-muted-1) 50%, - var(--primary-color-alpha) 75%, - var(--fg-muted-1) 100%); + --shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2)); + background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%); background-size: 200%; background-color: transparent; diff --git a/sass/_general.scss b/sass/_general.scss index 8f1e724..3281b0c 100644 --- a/sass/_general.scss +++ b/sass/_general.scss @@ -84,11 +84,10 @@ body { } @media (prefers-reduced-motion) { - *, *::before, *::after { - animation: none !important; - transition: none !important; + animation-duration: 0s !important; + transition-duration: 0s !important; } } diff --git a/sass/_pre-container.scss b/sass/_pre-container.scss index 23b4c55..3d49de9 100644 --- a/sass/_pre-container.scss +++ b/sass/_pre-container.scss @@ -4,13 +4,9 @@ border-radius: var(--rounded-corner); .header { + --shine: rgb(from var(--primary-color) r g b / calc(var(--color-opacity) * 2)); border-radius: var(--rounded-corner) var(--rounded-corner) 0 0; - background-image: linear-gradient( - to right, - var(--fg-muted-1) 50%, - var(--primary-color-alpha) 75%, - var(--fg-muted-1) 100% - ); + background-image: linear-gradient(to right, var(--fg-muted-1) 50%, var(--shine) 75%, var(--fg-muted-1) 100%); background-size: 200%; padding: 0.25rem; height: 2.5rem; @@ -48,6 +44,14 @@ transform: var(--active); } + &:disabled { + cursor: not-allowed; + + &:active { + transform: none; + } + } + .icon { --icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' height='16' width='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 3c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3 0 .55-.45 1-1 1s-1-.45-1-1c0-.57-.43-1-1-1H3c-.57 0-1 .43-1 1v5c0 .57.43 1 1 1 .55 0 1 .45 1 1s-.45 1-1 1c-1.645 0-3-1.355-3-3zm5 5c0-1.645 1.355-3 3-3h5c1.645 0 3 1.355 3 3v5c0 1.645-1.355 3-3 3H8c-1.645 0-3-1.355-3-3zm2 0v5c0 .57.43 1 1 1h5c.57 0 1-.43 1-1V8c0-.57-.43-1-1-1H8c-.57 0-1 .43-1 1m0 0'/%3E%3C/svg%3E"); -webkit-mask-image: var(--icon); @@ -63,9 +67,8 @@ animation: active-fill var(--transition-long); button { - &:hover { - background-color: var(--primary-color-alpha); - } + box-shadow: var(--edge-highlight); + background-color: var(--primary-color-alpha); .icon { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.883 0q-.486.008-.965.074a7.98 7.98 0 0 0-4.602 2.293 8.01 8.01 0 0 0-1.23 9.664 8.015 8.015 0 0 0 9.02 3.684 8 8 0 0 0 5.89-7.75 1 1 0 1 0-2 .008 5.986 5.986 0 0 1-4.418 5.816 5.996 5.996 0 0 1-6.762-2.766 5.99 5.99 0 0 1 .922-7.25 5.99 5.99 0 0 1 7.239-.984 1 1 0 0 0 1.363-.371c.273-.48.11-1.09-.371-1.367A8 8 0 0 0 9.492.14 8 8 0 0 0 7.882 0m7.15 1.998-.1.002a1 1 0 0 0-.687.34L7.95 9.535 5.707 7.29A1 1 0 0 0 4 8a1 1 0 0 0 .293.707l3 3c.195.195.465.3.742.293.277-.012.535-.133.719-.344l7-8A1 1 0 0 0 16 2.934a1 1 0 0 0-.34-.688 1 1 0 0 0-.627-.248'/%3E%3C/svg%3E"); diff --git a/templates/partials/copy_button.html b/templates/partials/copy_button.html index 638edd3..d205888 100644 --- a/templates/partials/copy_button.html +++ b/templates/partials/copy_button.html @@ -36,22 +36,24 @@ container.appendChild(block); button.addEventListener("click", async () => { - await copyCode(block, header); + await copyCode(block, header, button); // Pass the button here }); } }); - async function copyCode(block, header) { + async function copyCode(block, header, button) { let code = block.querySelector("code"); let text = code.innerText; await navigator.clipboard.writeText(text); header.classList.add("active"); + button.setAttribute("disabled", true); - setTimeout(() => { + header.addEventListener("animationend", () => { header.classList.remove("active"); - }, 800); + button.removeAttribute("disabled"); + }, { once: true }); } });