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

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

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-04-09 23:04:09 +05:30
parent 8ff3890ba8
commit f56522cb8e
4 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/khoj/interface/web/assets/icons/copy-button-success.svg Normal file
View File

@@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M22 11.1V6.9C22 3.4 20.6 2 17.1 2H12.9C9.4 2 8 3.4 8 6.9V8H11.1C14.6 8 16 9.4 16 12.9V16H17.1C20.6 16 22 14.6 22 11.1Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill="#00ff00" d="M16 17.1V12.9C16 9.4 14.6 8 11.1 8H6.9C3.4 8 2 9.4 2 12.9V17.1C2 20.6 3.4 22 6.9 22H11.1C14.6 22 16 20.6 16 17.1Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.08008 14.9998L8.03008 16.9498L11.9201 13.0498" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 829 B

5
src/khoj/interface/web/assets/icons/copy-button.svg Normal file
View File

@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M16 12.9V17.1C16 20.6 14.6 22 11.1 22H6.9C3.4 22 2 20.6 2 17.1V12.9C2 9.4 3.4 8 6.9 8H11.1C14.6 8 16 9.4 16 12.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22 6.9V11.1C22 14.6 20.6 16 17.1 16H16V12.9C16 9.4 14.6 8 11.1 8H8V6.9C8 3.4 9.4 2 12.9 2H17.1C20.6 2 22 3.4 22 6.9Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 669 B

1
src/khoj/interface/web/assets/icons/copy_button.svg
View File

@@ -1 +0,0 @@
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M6 11C6 8.17157 6 6.75736 6.87868 5.87868C7.75736 5 9.17157 5 12 5H15C17.8284 5 19.2426 5 20.1213 5.87868C21 6.75736 21 8.17157 21 11V16C21 18.8284 21 20.2426 20.1213 21.1213C19.2426 22 17.8284 22 15 22H12C9.17157 22 7.75736 22 6.87868 21.1213C6 20.2426 6 18.8284 6 16V11Z" stroke="#1C274C" stroke-width="1.5"></path> <path d="M6 19C4.34315 19 3 17.6569 3 16V10C3 6.22876 3 4.34315 4.17157 3.17157C5.34315 2 7.22876 2 11 2H15C16.6569 2 18 3.34315 18 5" stroke="#1C274C" stroke-width="1.5"></path> </g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 746 B

24
src/khoj/interface/web/chat.html
View File

@@ -30,20 +30,21 @@ To get started, just start typing below. You can also type / to see a list of co
const allowedExtensions = ['text/org', 'text/markdown', 'text/plain', 'text/html', 'application/pdf']; const allowedExtensions = ['text/org', 'text/markdown', 'text/plain', 'text/html', 'application/pdf'];
const allowedFileEndings = ['org', 'md', 'txt', 'html', 'pdf']; const allowedFileEndings = ['org', 'md', 'txt', 'html', 'pdf'];
let chatOptions = []; let chatOptions = [];
function copyProgrammaticOutput(event) { function copyParentText(event) {
// Remove the first 4 characters which are the "Copy" button
const button = event.currentTarget; const button = event.currentTarget;
const programmaticOutput = button.parentNode.textContent.trim(); const textContent = button.parentNode.textContent.trim();
navigator.clipboard.writeText(programmaticOutput).then(() => { navigator.clipboard.writeText(textContent).then(() => {
button.textContent = "✅ Copied to clipboard!"; button.firstChild.src = "/static/assets/icons/copy-button-success.svg";
setTimeout(() => { setTimeout(() => {
button.textContent = "✅"; button.firstChild.src = "/static/assets/icons/copy-button.svg";
}, 1000); }, 1000);
}).catch((error) => { }).catch((error) => {
console.error("Error copying programmatic output to clipboard:", error); console.error("Error copying programmatic output to clipboard:", error);
button.textContent = "⛔️ Failed to copy!"; const originalButtonText = button.innerHTML;
button.innerHTML = "⛔️";
setTimeout(() => { setTimeout(() => {
button.textContent = "⛔️"; button.innerHTML = originalButtonText;
button.firstChild.src = "/static/assets/icons/copy-button.svg";
}, 1000); }, 1000);
}); });
} }
@@ -365,11 +366,12 @@ To get started, just start typing below. You can also type / to see a list of co
// Add a copy button to each element // Add a copy button to each element
let copyButton = document.createElement('button'); let copyButton = document.createElement('button');
copyButton.classList.add("copy-button"); copyButton.classList.add("copy-button");
copyButton.title = "Copy Code";
let copyIcon = document.createElement("img"); let copyIcon = document.createElement("img");
copyIcon.src = "/static/assets/icons/copy_button.svg"; copyIcon.src = "/static/assets/icons/copy-button.svg";
copyIcon.classList.add("copy-icon"); copyIcon.classList.add("copy-icon");
copyButton.appendChild(copyIcon); copyButton.appendChild(copyIcon);
copyButton.addEventListener('click', copyProgrammaticOutput); copyButton.addEventListener('click', copyParentText);
codeElement.prepend(copyButton); codeElement.prepend(copyButton);
}); });
@@ -2183,7 +2185,7 @@ To get started, just start typing below. You can also type / to see a list of co
} }
button.copy-button:hover { button.copy-button:hover {
background-color: black; background-color: var(--primary-hover);
color: #f5f5f5; color: #f5f5f5;
} }