Salastil/odysseus
1
0
Fork 0
mirror of https://github.com/pewdiepie-archdaemon/odysseus.git synced 2026-06-15 17:25:26 -04:00
Code Issues Packages Projects Releases Wiki Activity

Email inbox: visual flash when an email is auto-marked done after sending

Browse Source 
When the email-answered event fires (user just sent a reply, so the
source email auto-marks as done), the row was getting the .active
class instantly with no visible cue beyond the checkbox tick. Add a
brief .email-auto-done-flash class on the row that runs two keyframe
animations:
- email-auto-done-row: tints the row background with the accent for
  ~1.2s then fades to transparent.
- email-auto-done-check: pops the done checkbox to 1.4× with an
  accent ring that expands outward over 0.6s.

Class self-removes after 1.2s so it doesn't replay on re-renders.
This commit is contained in:
pewdiepie-archdaemon
2026-06-10 23:06:42 +09:00
parent 1a4659b7fc
commit 023f1ba575
2 changed files with 21 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/emailInbox.js
+5
View File
@@ -74,6 +74,11 @@ window.addEventListener('email-answered', (e) => {
item.classList.remove('email-unread');
const check = item.querySelector('.email-done-check');
if (check) check.classList.add('active');
// Auto-mark from sending a reply — flash the row so the user sees the
// state change without staring at it. Class self-removes after the
// animation so it doesn't replay on re-renders.
item.classList.add('email-auto-done-flash');
setTimeout(() => item.classList.remove('email-auto-done-flash'), 1200);
});
});
let _loading = false;
static/style.css
+16
View File
@@ -27630,6 +27630,22 @@ button .spinner-whirlpool {
.email-done-check.active svg { display: block; }
.email-done-check svg { display: none; }
/* Auto-done flash: when a row gets marked done because the user just sent
a reply, briefly tint the whole row with the accent and pop the check
so the state change is hard to miss. Self-removes after ~1.2s. */
@keyframes email-auto-done-row {
0% { background: color-mix(in srgb, var(--accent, var(--red)) 22%, transparent); }
60% { background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); }
100% { background: transparent; }
}
@keyframes email-auto-done-check {
0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--red)) 45%, transparent); }
40% { transform: scale(1.4); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, var(--red)) 0%, transparent); }
100% { transform: scale(1); }
}
.email-item.email-auto-done-flash { animation: email-auto-done-row 1.2s ease-out; }
.email-item.email-auto-done-flash .email-done-check { animation: email-auto-done-check 0.6s ease-out; }
/* Email titles that carry a cached AI summary get a thin underline-dot hint
so the user knows a hover-preview is available. */
.memory-item-title.email-card-has-summary {