add visual feedback on successful bookmark import/export

This commit is contained in:
Lukas 2025-08-01 18:25:43 +02:00
parent b595a9b8c3
commit 1c11c76081
No known key found for this signature in database
2 changed files with 37 additions and 0 deletions

View File

@ -274,3 +274,25 @@
--bg-empty: var(--md-sys-color-surface-container-low, #24282e);
--border-empty: var(--md-sys-color-outline, #495057);
}
.success-flash {
position: relative;
}
.success-flash::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 1.2em;
color: white;
opacity: 0;
animation: fadeOut 1s ease-in-out;
}
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
}

View File

@ -598,7 +598,19 @@ document.addEventListener('DOMContentLoaded', function() {
}
// Add import/export bookmarks to clipboard functionality
function flashButtonSuccess(button) {
const originalClass = button.className;
button.classList.remove('btn-outline-primary');
button.classList.add('btn-success', 'success-flash');
setTimeout(() => {
button.className = originalClass;
}, 1000);
}
async function importBookmarkStringFromClipboard() {
const button = document.getElementById('importBookmarksBtn');
try {
const newBookmarkDataString = await navigator.clipboard.readText();
const newBookmarkData = JSON.parse(newBookmarkDataString);
@ -610,15 +622,18 @@ document.addEventListener('DOMContentLoaded', function() {
bookmarks = newBookmarkData.map(convertExtractedBookmark);
updateBookmarksUI();
flashButtonSuccess(button);
} catch (error) {
throw new Error(`Failed to import bookmarks: ${error.message}`);
}
}
async function exportBookmarkStringToClipboard() {
const button = document.getElementById('exportBookmarksBtn');
const bookmarkData = bookmarkDataInput.value;
try {
await navigator.clipboard.writeText(bookmarkData);
flashButtonSuccess(button);
} catch (error) {
throw new Error(`Failed to export bookmarks: ${error.message}`);
}