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