Administrator/Multi-Hoster-Upload
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 205 Wiki Activity

ux(css): scope queue-row background transition to :hover only

Browse Source 
The .queue-row rule had transition: background 0.15s applied
unconditionally. Every status flip (queued → getting-server →
uploading → done) on every visible row therefore animated for 150 ms,
and with 30+ rows changing state in close succession the compositor
ran overlapping tweens that ate paint time during heavy upload bursts.

Move the transition into the :hover rule. Hover-enter and hover-leave
keep their smooth fade — that's where transitions actually help the
user. Status changes now snap to the new background colour instantly,
which is what the queue table really wants: it conveys progress, not
animation.

No JS change. 97/97 tests still green.
This commit is contained in:
Administrator 2026-04-28 05:39:14 +02:00
parent 1c03a3f2e7
commit 3865a0fe33
2 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
renderer/styles.css
View File

@ -305,8 +305,12 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
.virtual-spacer td { padding: 0 !important; border: none !important; } .virtual-spacer td { padding: 0 !important; border: none !important; }
/* Queue Row States */ /* Queue Row States */
.queue-row { transition: background 0.15s; cursor: pointer; } /* Transition only on hover-enter/leave so that status flips during a busy
.queue-row:hover { background: rgba(255, 255, 255, 0.04); } upload (queued→getting-server→uploading→done) don't trigger compositor
repaints with 150ms tweens for every visible row. With 30+ rows flipping
simultaneously the overlapping transitions cost real GPU time. */
.queue-row { cursor: pointer; }
.queue-row:hover { background: rgba(255, 255, 255, 0.04); transition: background 0.15s; }
.queue-row.selected { background: rgba(102, 126, 234, 0.12) !important; } .queue-row.selected { background: rgba(102, 126, 234, 0.12) !important; }
.queue-row.status-uploading { background: rgba(102, 126, 234, 0.08); } .queue-row.status-uploading { background: rgba(102, 126, 234, 0.08); }

2
tasks/todo.md
View File

@ -7,6 +7,7 @@
- ✅ 3.3.3 — `_jobLogCollector` Cap auf 1000 tracked jobs (FIFO-eviction beim Überschreiten) - ✅ 3.3.3 — `_jobLogCollector` Cap auf 1000 tracked jobs (FIFO-eviction beim Überschreiten)
- ✅ 3.3.4 — `applyQueueSelectionClasses` + `applyRecentSelectionClasses` nutzen `getElementsByClassName` (live HTMLCollection statt querySelectorAll re-query bei jedem Klick) - ✅ 3.3.4 — `applyQueueSelectionClasses` + `applyRecentSelectionClasses` nutzen `getElementsByClassName` (live HTMLCollection statt querySelectorAll re-query bei jedem Klick)
- ✅ 3.3.5 — Log-Rotation extrahiert nach `lib/log-rotation.js` + 10 neue Unit-Tests (cap, shift, eviction, idempotency, maxBackups=1, invalid input, no-extension) - ✅ 3.3.5 — Log-Rotation extrahiert nach `lib/log-rotation.js` + 10 neue Unit-Tests (cap, shift, eviction, idempotency, maxBackups=1, invalid input, no-extension)
- ✅ 3.3.6 — CSS `.queue-row` transition nur noch auf `:hover` (kein 150ms compositor-tween bei status-flips)
## Open items (priorisiert) ## Open items (priorisiert)
@ -15,7 +16,6 @@
- [ ] sortQueueJobs dynamic-throttle (3.3.0) — modul-state-abhängig im renderer; deferred - [ ] sortQueueJobs dynamic-throttle (3.3.0) — modul-state-abhängig im renderer; deferred
### UX-Politur ### UX-Politur
- [ ] **CSS `.queue-row` transition** auf `:hover` scopen (aktuell auf jedem row → unnötiger Repaint bei Status-Flip).
- [ ] Module-level Sets `_sessionTrackedJobs`/`_sessionDoneJobs`/`_completedUploadKeys` werden nie geleert — minor memory growth. - [ ] Module-level Sets `_sessionTrackedJobs`/`_sessionDoneJobs`/`_completedUploadKeys` werden nie geleert — minor memory growth.
## Loop-Notes ## Loop-Notes