mirror of
https://github.com/willmiao/ComfyUI-Lora-Manager.git
synced 2026-03-24 06:32:12 -03:00
Add update indicator and animation for updated cards in VirtualScroller
This commit is contained in:
@@ -520,4 +520,44 @@
|
|||||||
.card-grid.virtual-scroll {
|
.card-grid.virtual-scroll {
|
||||||
max-width: 2400px;
|
max-width: 2400px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Add after the existing .lora-card:hover styles */
|
||||||
|
|
||||||
|
@keyframes update-pulse {
|
||||||
|
0% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
|
||||||
|
50% { box-shadow: 0 0 0 4px var(--lora-accent-transparent); }
|
||||||
|
100% { box-shadow: 0 0 0 0 var(--lora-accent-transparent); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add semi-transparent version of accent color for animation */
|
||||||
|
:root {
|
||||||
|
--lora-accent-transparent: oklch(var(--lora-accent-l) var(--lora-accent-c) var(--lora-accent-h) / 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.lora-card.updated {
|
||||||
|
animation: update-pulse 1.2s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add a subtle updated tag that fades in and out */
|
||||||
|
.update-indicator {
|
||||||
|
position: absolute;
|
||||||
|
top: 8px;
|
||||||
|
right: 8px;
|
||||||
|
background: var(--lora-accent);
|
||||||
|
color: white;
|
||||||
|
border-radius: var(--border-radius-xs);
|
||||||
|
padding: 3px 6px;
|
||||||
|
font-size: 0.75em;
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
z-index: 4;
|
||||||
|
animation: update-tag 1.8s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes update-tag {
|
||||||
|
0% { opacity: 0; transform: translateY(-5px); }
|
||||||
|
15% { opacity: 1; transform: translateY(0); }
|
||||||
|
85% { opacity: 1; transform: translateY(0); }
|
||||||
|
100% { opacity: 0; transform: translateY(0); }
|
||||||
|
}
|
||||||
@@ -822,6 +822,28 @@ export class VirtualScroller {
|
|||||||
|
|
||||||
// Create and render the updated element
|
// Create and render the updated element
|
||||||
const updatedElement = this.createItemElement(this.items[index], index);
|
const updatedElement = this.createItemElement(this.items[index], index);
|
||||||
|
|
||||||
|
// Add update indicator visual effects
|
||||||
|
updatedElement.classList.add('updated');
|
||||||
|
|
||||||
|
// Add temporary update tag
|
||||||
|
const updateIndicator = document.createElement('div');
|
||||||
|
updateIndicator.className = 'update-indicator';
|
||||||
|
updateIndicator.textContent = 'Updated';
|
||||||
|
updatedElement.querySelector('.card-preview').appendChild(updateIndicator);
|
||||||
|
|
||||||
|
// Automatically remove the updated class after animation completes
|
||||||
|
setTimeout(() => {
|
||||||
|
updatedElement.classList.remove('updated');
|
||||||
|
}, 1500);
|
||||||
|
|
||||||
|
// Automatically remove the indicator after animation completes
|
||||||
|
setTimeout(() => {
|
||||||
|
if (updateIndicator && updateIndicator.parentNode) {
|
||||||
|
updateIndicator.remove();
|
||||||
|
}
|
||||||
|
}, 2000);
|
||||||
|
|
||||||
this.renderedItems.set(index, updatedElement);
|
this.renderedItems.set(index, updatedElement);
|
||||||
this.gridElement.appendChild(updatedElement);
|
this.gridElement.appendChild(updatedElement);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user