sneak/AutistMask
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add visual flash feedback on click-to-copy elements
All checks were successful
check / check (push) Successful in 10s
Details

Browse Source 
When a user clicks to copy text, the clicked element now briefly
inverts (foreground/background swap) and fades back over 500ms,
providing immediate localized feedback. The existing flash message
is retained for accessibility.

Closes #100
This commit is contained in:
user
2026-02-28 15:51:33 -08:00
parent 812fc01a98
commit 8135b78b5c
9 changed files with 61 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/popup/styles/main.css
View File

@@ -15,6 +15,21 @@
--color-section: #dddddd;
}
@keyframes copy-flash {
0% {
background-color: var(--color-fg);
color: var(--color-bg);
}
100% {
background-color: transparent;
color: inherit;
}
}
.copy-flash {
animation: copy-flash 500ms ease-out;
}
body {
width: 396px;
overflow-x: hidden;

13
src/popup/views/addressDetail.js
View File

@@ -2,6 +2,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
balanceLinesForAddress,
addressDotHtml,
addressTitle,
@@ -237,9 +238,11 @@ function renderTransactions(txs) {
function init(_ctx) {
ctx = _ctx;
$("address-full").addEventListener("click", () => {
const addr = $("address-full").dataset.full;
const el = $("address-full");
const addr = el.dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
@@ -354,17 +357,21 @@ function init(_ctx) {
});
$("export-privkey-value").addEventListener("click", () => {
const key = $("export-privkey-value").textContent;
const el = $("export-privkey-value");
const key = el.textContent;
if (key) {
navigator.clipboard.writeText(key);
flashCopyElement(el);
showFlash("Copied!");
}
});
$("export-privkey-address").addEventListener("click", () => {
const full = $("export-privkey-address").dataset.full;
const el = $("export-privkey-address");
const full = el.dataset.full;
if (full) {
navigator.clipboard.writeText(full);
flashCopyElement(el);
showFlash("Copied!");
}
});

7
src/popup/views/addressToken.js
View File

@@ -5,6 +5,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -313,9 +314,11 @@ function renderTransactions(txs) {
function init(_ctx) {
ctx = _ctx;
$("address-token-full").addEventListener("click", () => {
const addr = $("address-token-full").dataset.full;
const el = $("address-token-full");
const addr = el.dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
@@ -324,6 +327,7 @@ function init(_ctx) {
const copyEl = e.target.closest("[data-copy]");
if (copyEl) {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
}
});
@@ -372,6 +376,7 @@ function init(_ctx) {
if (copyEl) {
copyEl.addEventListener("click", () => {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
});
}

2
src/popup/views/confirmTx.js
View File

@@ -15,6 +15,7 @@ const {
hideError,
showView,
showFlash,
flashCopyElement,
addressTitle,
addressDotHtml,
escapeHtml,
@@ -116,6 +117,7 @@ function show(txInfo) {
if (copyEl) {
copyEl.onclick = () => {
navigator.clipboard.writeText(copyEl.dataset.copy);
flashCopyElement(copyEl);
showFlash("Copied!");
};
}

13
src/popup/views/helpers.js
View File

@@ -76,6 +76,18 @@ function clearFlash() {
$("flash-msg").textContent = "";
}
function flashCopyElement(el) {
el.classList.remove("copy-flash");
// Force reflow so re-adding the class restarts the animation.
void el.offsetWidth;
el.classList.add("copy-flash");
el.addEventListener(
"animationend",
() => el.classList.remove("copy-flash"),
{ once: true },
);
}
function showFlash(msg, duration = 2000) {
clearFlash();
$("flash-msg").textContent = msg;
@@ -265,6 +277,7 @@ module.exports = {
hideError,
showView,
showFlash,
flashCopyElement,
balanceLine,
balanceLinesForAddress,
addressColor,

4
src/popup/views/home.js
View File

@@ -2,6 +2,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
balanceLinesForAddress,
isoDate,
timeAgo,
@@ -85,8 +86,9 @@ function renderActiveAddress() {
el.innerHTML =
`<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
$("active-addr-copy").addEventListener("click", () => {
$("active-addr-copy").addEventListener("click", (e) => {
navigator.clipboard.writeText(addr);
flashCopyElement(e.currentTarget);
showFlash("Copied!");
});
} else {

9
src/popup/views/receive.js
View File

@@ -2,6 +2,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
formatAddressHtml,
addressTitle,
} = require("./helpers");
@@ -61,17 +62,21 @@ function show() {
function init(ctx) {
$("receive-address-block").addEventListener("click", () => {
const addr = $("receive-address-block").dataset.full;
const el = $("receive-address-block");
const addr = el.dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(el);
showFlash("Copied!");
}
});
$("btn-receive-copy").addEventListener("click", () => {
const addr = $("receive-address-block").dataset.full;
const block = $("receive-address-block");
const addr = block.dataset.full;
if (addr) {
navigator.clipboard.writeText(addr);
flashCopyElement(block);
showFlash("Copied!");
}
});

3
src/popup/views/transactionDetail.js
View File

@@ -5,6 +5,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -170,6 +171,7 @@ function render() {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});
@@ -247,6 +249,7 @@ async function loadCalldata(txHash, toAddress) {
container.querySelectorAll("[data-copy]").forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});

2
src/popup/views/txStatus.js
View File

@@ -4,6 +4,7 @@ const {
$,
showView,
showFlash,
flashCopyElement,
addressDotHtml,
addressTitle,
escapeHtml,
@@ -76,6 +77,7 @@ function attachCopyHandlers(viewId) {
.forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
flashCopyElement(el);
showFlash("Copied!");
};
});