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

3
styles.css
View File

@ -355,9 +355,10 @@ body {
align-items: center; align-items: center;
justify-content: 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)); 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; color: #111;
pointer-events: auto; pointer-events: auto;
opacity: 0;
} }
.chart-eye-btn:hover { .chart-eye-btn:hover {