anton/visual-spending
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reduce eye button hide delay to 0.5s with fade animation

Browse Source 
- Changed inactivity timeout from 1 second to 0.5 seconds
- Added smooth 0.2s ease-out opacity transition for gradual fade
- Switched from display:none to opacity for smoother hide effect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Anton Volnuhin 2026-01-30 18:49:51 +03:00
parent e63bcd9a3a
commit 30c2d1db98
2 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app.js
View File

@ -1256,13 +1256,15 @@ function setupHoverEvents(sunburstData) {
chartEyeBtn.style.left = pendingButtonPosition.left;
chartEyeBtn.style.top = pendingButtonPosition.top;
chartEyeBtn.style.transform = pendingButtonPosition.transform;
chartEyeBtn.style.display = 'flex';
chartEyeBtn.style.opacity = '1';
chartEyeBtn.style.pointerEvents = 'auto';
} else if (!isOverEyeButton) {
chartEyeBtn.style.display = 'none';
chartEyeBtn.style.opacity = '0';
chartEyeBtn.style.pointerEvents = 'none';
}
}
// Handle mouse movement on chart - show button while moving, hide after 1 second of inactivity
// Handle mouse movement on chart - show button while moving, hide after 0.5s of inactivity
function onChartMouseMove() {
isMouseMoving = true;
updateButtonVisibility();
@ -1272,11 +1274,11 @@ function setupHoverEvents(sunburstData) {
clearTimeout(mouseMovingTimeout);
}
// Set timeout to hide button after 1 second of no movement
// Set timeout to hide button after 0.5 second of no movement
mouseMovingTimeout = setTimeout(() => {
isMouseMoving = false;
updateButtonVisibility();
}, 1000);
}, 500);
}
// Add mousemove listener to chart container
@ -1339,7 +1341,8 @@ function setupHoverEvents(sunburstData) {
} else {
// Fallback: clear pending position if we can't get layout
pendingButtonPosition = null;
chartEyeBtn.style.display = 'none';
chartEyeBtn.style.opacity = '0';
chartEyeBtn.style.pointerEvents = 'none';
}
}
@ -1360,7 +1363,8 @@ function setupHoverEvents(sunburstData) {
hideButtonTimeout = setTimeout(() => {
// Double-check: don't hide if now over button or still over a chart sector
if (!isOverEyeButton && !isOverChartSector && chartEyeBtn) {
chartEyeBtn.style.display = 'none';
chartEyeBtn.style.opacity = '0';
chartEyeBtn.style.pointerEvents = 'none';
currentHoveredSectorData = null;
currentHoveredSectorParams = null;
}
@ -1374,7 +1378,8 @@ function setupHoverEvents(sunburstData) {
if (currentHoveredSectorData) {
openTransactionModal(currentHoveredSectorData);
// Hide button after opening modal
chartEyeBtn.style.display = 'none';
chartEyeBtn.style.opacity = '0';
chartEyeBtn.style.pointerEvents = 'none';
isOverEyeButton = false;
}
});

3
styles.css
View File

@ -355,9 +355,10 @@ body {
align-items: center;
justify-content: center;
filter: drop-shadow(0 0 2px rgba(255, 255, 255, 1)) drop-shadow(0 0 3px rgba(255, 255, 255, 1)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9));
transition: filter 0.15s;
transition: filter 0.15s, opacity 0.2s ease-out;
color: #111;
pointer-events: auto;
opacity: 0;
}
.chart-eye-btn:hover {