Dim quick actions that don't fit the current sleep state
Asleep: everything but Sleep end fades; awake: only Sleep end fades; no sleep history: nothing. Buttons stay clickable — it's a visual nudge for the thumb, not a lockout, so corrections still work.
This commit is contained in:
+17
@@ -1590,12 +1590,28 @@
|
|||||||
if (sleepTitle) sleepTitle.textContent = cfg.name ? `When ${cfg.name} sleeps` : "When sleeping";
|
if (sleepTitle) sleepTitle.textContent = cfg.name ? `When ${cfg.name} sleeps` : "When sleeping";
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Dim the quick actions that don't fit the current sleep state — a nudge
|
||||||
|
// toward the likely next tap, never a block: everything stays clickable so
|
||||||
|
// corrections (a missed sleep-end, a mid-nap pee) are always possible.
|
||||||
|
function renderActionHints(events) {
|
||||||
|
const { state } = currentSleepState(events);
|
||||||
|
document.querySelectorAll("button.action").forEach(btn => {
|
||||||
|
const type = btn.dataset.type;
|
||||||
|
const unlikely =
|
||||||
|
state === "asleep" ? type !== "sleep-end"
|
||||||
|
: state === "awake" ? type === "sleep-end"
|
||||||
|
: false; // no sleep history yet — no hints to give
|
||||||
|
btn.classList.toggle("unlikely", unlikely);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
const events = live();
|
const events = live();
|
||||||
renderHeader();
|
renderHeader();
|
||||||
renderDayBar();
|
renderDayBar();
|
||||||
renderChartWindow();
|
renderChartWindow();
|
||||||
renderBigClock(events);
|
renderBigClock(events);
|
||||||
|
renderActionHints(events);
|
||||||
renderStats(events);
|
renderStats(events);
|
||||||
renderLasts(events);
|
renderLasts(events);
|
||||||
renderTiming(events);
|
renderTiming(events);
|
||||||
@@ -2549,6 +2565,7 @@
|
|||||||
const evs = live();
|
const evs = live();
|
||||||
renderHeader();
|
renderHeader();
|
||||||
renderBigClock(evs);
|
renderBigClock(evs);
|
||||||
|
renderActionHints(evs);
|
||||||
renderStats(evs);
|
renderStats(evs);
|
||||||
renderLasts(evs);
|
renderLasts(evs);
|
||||||
renderTiming(evs);
|
renderTiming(evs);
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
[
|
[
|
||||||
|
{ "date": "2026-07-15", "text": "Quick actions that don't fit right now are dimmed (asleep → everything but Sleep end; awake → Sleep end) — still tappable for corrections" },
|
||||||
{ "date": "2026-07-15", "text": "Editing an event no longer pops the date picker over the whole screen on iPhone" },
|
{ "date": "2026-07-15", "text": "Editing an event no longer pops the date picker over the whole screen on iPhone" },
|
||||||
{ "date": "2026-07-15", "text": "Weight and amount fields no longer show up on events that don't use them (e.g. editing a pee)" },
|
{ "date": "2026-07-15", "text": "Weight and amount fields no longer show up on events that don't use them (e.g. editing a pee)" },
|
||||||
{ "date": "2026-07-15", "text": "The date in the top bar is shorter (no year), so the whole bar fits on smaller iPhones" },
|
{ "date": "2026-07-15", "text": "The date in the top bar is shorter (no year), so the whole bar fits on smaller iPhones" },
|
||||||
|
|||||||
@@ -255,6 +255,9 @@ button.action.eat { background: var(--eat); }
|
|||||||
button.action.pee { background: var(--pee); color: #2b240a; }
|
button.action.pee { background: var(--pee); color: #2b240a; }
|
||||||
button.action.poo { background: var(--poo); }
|
button.action.poo { background: var(--poo); }
|
||||||
button.action.weight { background: var(--weight); }
|
button.action.weight { background: var(--weight); }
|
||||||
|
/* Unlikely given the current sleep state (see renderActionHints) — dimmed
|
||||||
|
but fully tappable, so corrections are never blocked. */
|
||||||
|
button.action.unlikely { opacity: 0.4; }
|
||||||
|
|
||||||
button.ghost {
|
button.ghost {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|||||||
Reference in New Issue
Block a user