From 4ed2d5931167569e1ed4b3802715fc1dae018218 Mon Sep 17 00:00:00 2001 From: rays Date: Mon, 28 Sep 2026 23:36:23 +0000 Subject: [PATCH] Toggles show their state the same way everywhere (#74, #75) A sweep of all 24 theme palettes, measuring each icon's drawn colour, found pinned in three colours: accent in the feed list, the text colour on an item's row, and uncoloured on the toolbar, beside the title and on the feed page. The read button showed the action (an envelope on a read item) beside a pin showing the state. Now each toggle shows what is, with aria-pressed, and a pressed one is the accent colour; Classic needs its own rule, as its buttons set their colour at higher specificity. The contrast test checks the accent on the button grounds, where it now draws. Directory's Subscribe button carried the Subscribed tick; it is a plus. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 4 ++++ tests/contrast.js | 1 + web/app.css | 7 ++++++- web/src/dialogs.ts | 2 +- web/src/items.ts | 13 ++++++++----- web/src/util.ts | 1 - 6 files changed, 20 insertions(+), 8 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e98b020..b5e7546 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -30,6 +30,10 @@ 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. +- 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 a second pull meanwhile does nothing, instead of no sign at all that the check started. diff --git a/tests/contrast.js b/tests/contrast.js index 72245e5..df56e58 100644 --- a/tests/contrast.js +++ b/tests/contrast.js @@ -27,6 +27,7 @@ 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 2284605..6548aac 100644 --- a/web/app.css +++ b/web/app.css @@ -817,7 +817,10 @@ 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(--fg)} +.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)} /* 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} @@ -1150,6 +1153,8 @@ 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/dialogs.ts b/web/src/dialogs.ts index e352384..46694e8 100644 --- a/web/src/dialogs.ts +++ b/web/src/dialogs.ts @@ -55,7 +55,7 @@ function listedFeed(p,cls){ `${p.subscribers} subscriber${p.subscribers===1?'':'s'}`+ // Green, as a downloaded file is: it is already yours. Plus, beside it, is the way to get one. (p.subscribed?`${ICON.subbed}` - :``); + :``); // Yours already: the row opens it instead. if(p.subscribed){ el.onclick=()=>{ closeModal(); selectFeed(p.id); }; return el; } $('[data-a="sub"]',el).onclick=async()=>{ diff --git a/web/src/items.ts b/web/src/items.ts index b7e6aed..d08589d 100644 --- a/web/src/items.ts +++ b/web/src/items.ts @@ -68,7 +68,7 @@ function epEl(e){ el.innerHTML=` -
${esc(e.title||'(untitled)')} @@ -220,8 +220,11 @@ const cur=()=>S.entries.find(x=>x.guid===S.sel); 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. - $('#tbRead').innerHTML=e&&e.read?ICON.unread:ICON.check; + // 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). + $('#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; if(e){ $('#tbRead').title=`Mark ${e.read?'unread':'read'}`; @@ -273,9 +276,9 @@ 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}">${ICON.check} + aria-label="${e.flagged?'Unpin':'Pin'}" aria-pressed="${!!e.flagged}">${e.flagged?ICON.pinOn:ICON.pin} ${e.link?`${ICON.open} `:''} diff --git a/web/src/util.ts b/web/src/util.ts index 2339449..b7d334c 100644 --- a/web/src/util.ts +++ b/web/src/util.ts @@ -32,7 +32,6 @@ const ICON={ directory:fa('0 0 448 512',''), // 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