From 92c8b758c7b1876f59d79bef65ea38dffc41ca4b Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 15 Oct 2026 09:19:46 -0700 Subject: Media pager: the reaction button offers the emoji sheet; the sound button mutes on one tap; a flick flies long, to be caught. Three from Adam, 2026-10-16. (1) "Make the reaction button in media mode give a menu of different emojis": a tap on ♥ opens the feed's own emoji sheet (ui.reactPick → reactPicker) over the pager — the backdrop gets over-pager (z-index 300, above the pager's 200) — the emoji chosen shows on the button (postReactNode, a picture for a :code:), a tap again takes it back, and Escape closes the sheet before it would close the pager. (2) "The mute button, when I click it, immediately unmuted again": under a finger the pager arms a pending tap at touchend and stands it down when the browser's click arrives — but that was judged in a bubbling listener on the pager, and the sound button's own handler stops the bubble, so its click never stood the tap down and the pending tap clicked it again 120 ms later (every button in the pager with stopPropagation; the arrows too). Judged in the capture phase now, before any button's handler; tapDoneAt is set after the pending tap's own click so that click isn't swallowed. (3) "Make it fly longer before it settles… I can slow it down by touching again when I see something I like": a flick coasts 1600 ms' worth (was 800), up to 14 posts, at 260 ms a screen (up to 4 s) — a finger down holds it where it is, and lifting lands it on the nearest post. tools/pager-controls-test.js (one tap mutes and it stays muted; a tap again unmutes; the sheet opens over the pager, on top, with several emoji and a way to more; 🔥 picked shows lit on the button; a tap takes it back; Escape closes the sheet, not the pager); pager-swipe-fly-test adjusted for the longer coast; pager-tap-slop and feed-picture-pager tests pass. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01J1Kon8bxJoHRpJdSzshCkp --- src/style.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index 2608d67..a877e99 100644 --- a/src/style.css +++ b/src/style.css @@ -1535,6 +1535,9 @@ body::after { .mp-counts .i { font-size: 24px; line-height: 1; display: flex; } .mp-counts .i svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } .mp-like.on { color: #ff4d6d; } +.mp-like .i .cemoji { width: 28px; height: 28px; } +/* the emoji sheet over the media pager (z-index 200) */ +.confirm-pop-backdrop.over-pager { z-index: 300; } .mp-zap.on .i { color: #f7b500; } .mp-top { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; right: 10px; -- cgit v1.2.3