From a5de4ae06cb09debbc19d8495d46628d19de5a17 Mon Sep 17 00:00:00 2001 From: rays Date: Mon, 28 Sep 2026 23:38:59 +0000 Subject: [PATCH] Toggle state in the icon's shape, not the theme's colours (#74) 4ed2d59 drew a pressed toggle in each theme's accent colour; the themes' colours were not to change. Back as they were, pinned rows included. The read button carries its state in its shape instead, as the pin does with outline and solid: a tick when read, the envelope when not, where before it showed the action (the envelope on a read item). Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 5 ++--- tests/contrast.js | 1 - web/app.css | 7 +------ web/src/items.ts | 7 ++++--- web/src/util.ts | 1 + 5 files changed, 8 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b5e7546..ac975d7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,9 +30,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed -- Pinned and read look the same wherever they are shown, in every theme: the button lights up - in the theme's accent colour when it is on. The read button used to show an envelope on a - read item, the opposite of how the pin beside it worked. +- The read button shows whether an item is read, as the pin beside it shows whether it is + pinned: a tick when read, an envelope when not. It used to show the opposite. - In Directory and Popular, Subscribe is a plus again, not the tick that marks a feed you have. - A web page with some non-ASCII characters no longer hides the feed it links, or crashes looking for it. - Pulling the item list down to check for new items shows a spinner for a couple of seconds, and diff --git a/tests/contrast.js b/tests/contrast.js index df56e58..72245e5 100644 --- a/tests/contrast.js +++ b/tests/contrast.js @@ -27,7 +27,6 @@ const RULES = [ ['dim', ['bg', 'panel', 'panel2'], 4.5], // metadata, labels ['faint', ['bg', 'panel', 'panel2'], 4.5], // hints, column headings, the status bar ['accent', ['bg', 'panel'], 4.5], // links, in the list and the reader - ['accent', ['panel2', 'raise'], 3], // a toggle that is on: pinned, read ['ink', ['accent'], 4.5], // a primary button's label ['ink', ['accent2'], 4.5], // the unread count on its badge ['accent2', ['bg', 'panel', 'raise'], 3], // the unread dot, the EQ bars, download bars diff --git a/web/app.css b/web/app.css index 6548aac..2284605 100644 --- a/web/app.css +++ b/web/app.css @@ -817,10 +817,7 @@ body.adminpage #log{max-width:none} icon, so it spilled 3px right of centre and off line with its heading. */ .ep .st,.ep .fl{width:22px;height:22px;padding:0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:var(--accent2)} .ep .fl{color:var(--faint);font-size:13px} -.ep .fl.on{color:var(--accent)} -/* A toggle that is on, the same everywhere: pinned or read, in the toolbar, beside an item's - title and on a feed's page, as the feed list's pin mark already was (#74). */ -.btn.ico[aria-pressed="true"],.tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)} +.ep .fl.on{color:var(--fg)} /* The icon's EQ bars mark what is playing: standing still, and moving only while it plays. A paused animation was tried first; the frames it held were a pixel apart and read as dots. */ .eq{display:inline-flex;align-items:flex-end;gap:2px;width:13px;height:12px;flex:none} @@ -1153,8 +1150,6 @@ body:has(#player.on) #status{padding-bottom:3px} :root[data-theme="classic"] .tgroup a, :root[data-theme="classic"] .btn, :root[data-theme="classic"] .tabs{background:linear-gradient(#ffffff,#d9d9d9);border-color:#8e8e8e;color:#1a1a1a} -:root[data-theme="classic"] .btn.ico[aria-pressed="true"], -:root[data-theme="classic"] .tgroup button[aria-pressed="true"]:not(:disabled){color:var(--accent)} :root[data-theme="classic"] .tabs{border:1px solid #8e8e8e;border-radius:6px} :root[data-theme="classic"] .tgroup button:hover:not(:disabled), :root[data-theme="classic"] .tgroup a:hover, diff --git a/web/src/items.ts b/web/src/items.ts index d08589d..9dc1889 100644 --- a/web/src/items.ts +++ b/web/src/items.ts @@ -221,8 +221,9 @@ function syncTools(e){ $('#tbPlay').disabled=!(e&&e.enclosures.some(isPlayable)); $('#tbRead').disabled=$('#tbFlag').disabled=!e; // The same icons as the item's own buttons beside its title, so the two never disagree. Each - // shows what is, pressed when on, as the pin always did; read showed what a click would do, - // so the two side by side said opposite things (#74). + // shows what is, as the pin always did: read showed what a click would do, so the two side by + // side said opposite things (#74). The shape carries it, not the colour. + $('#tbRead').innerHTML=e&&!e.read?ICON.unread:ICON.check; $('#tbRead').setAttribute('aria-pressed',String(!!(e&&e.read))); $('#tbFlag').setAttribute('aria-pressed',String(!!(e&&e.flagged))); $('#tbFlag').innerHTML=e&&e.flagged?ICON.pinOn:ICON.pin; @@ -276,7 +277,7 @@ function detailHtml(e){ [f&&esc(f.title||f.id), num, dateOf(e.published), e.duration&&clock(e.duration)] .filter(Boolean).map(s=>`${s}`).join('')} + aria-label="Mark ${e.read?'unread':'read'}" aria-pressed="${!!e.read}">${e.read?ICON.check:ICON.unread} ${e.link?`'), // solid/table-list popular:fa('0 0 576 512',''), // solid/star all:fa('0 0 512 512',''), // solid/layer-group + unread:fa('0 0 512 512',''), // solid/envelope: a closed letter, not a record button audio:fa('0 0 448 512',''), // solid/headphones video:fa('0 0 576 512',''), // solid/video image:fa('0 0 448 512',''), // solid/image