klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-05 05:39:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve copy button's icon, hover color & click animation in Desktop UI

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-04-09 23:35:23 +05:30
parent 184873213c
commit 0a5a91619e
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/interface/desktop/chat.html
View File

@@ -13,21 +13,22 @@
<script>
let chatOptions = [];
function copyProgrammaticOutput(event) {
// Remove the first 4 characters which are the "Copy" button
const originalCopyText = event.target.parentNode.textContent.trim().slice(0, 4);
const programmaticOutput = event.target.parentNode.textContent.trim().slice(4);
navigator.clipboard.writeText(programmaticOutput).then(() => {
event.target.textContent = "✅ Copied to clipboard!";
function copyParentText(event) {
const button = event.currentTarget;
const textContent = button.parentNode.textContent.trim();
navigator.clipboard.writeText(textContent).then(() => {
button.firstChild.src = "./assets/icons/copy-button-success.svg";
setTimeout(() => {
event.target.textContent = originalCopyText;
button.firstChild.src = "./assets/icons/copy-button.svg";
}, 1000);
}).catch((error) => {
console.error("Error copying programmatic output to clipboard:", error);
event.target.textContent = "⛔️ Failed to copy!";
console.error("Error copying text to clipboard:", error);
const originalButtonText = button.innerHTML;
button.innerHTML = "⛔️";
setTimeout(() => {
event.target.textContent = originalCopyText;
}, 1000);
button.innerHTML = originalButtonText;
button.firstChild.src = "./assets/icons/copy-button.svg";
}, 2000);
});
}
@@ -338,8 +339,12 @@
// Add a copy button to each element
let copyButton = document.createElement('button');
copyButton.classList.add("copy-button");
copyButton.innerHTML = "Copy";
copyButton.addEventListener('click', copyProgrammaticOutput);
copyButton.title = "Copy Code";
let copyIcon = document.createElement("img");
copyIcon.src = "./assets/icons/copy-button.svg";
copyIcon.classList.add("copy-icon");
copyButton.appendChild(copyIcon);
copyButton.addEventListener('click', copyParentText);
codeElement.prepend(copyButton);
});
@@ -1608,8 +1613,13 @@
transition: 0.5s;
}
img.copy-icon {
width: 16px;
height: 16px;
}
button.copy-button:hover {
background-color: black;
background-color: var(--primary-hover);
color: #f5f5f5;
}