rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Signals in the needle's orange, and a larger DeadAir tile in the play bar (#268)

Browse Source 
Each Signal's tile, icon or initials, is tinted --accent2 in place of
--accent: the orange point of the Signals folder's own icon, so the
folder and what is in it read as one. The player's DeadAir tile goes
from 22px to 26px in its 30px button.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-16 20:11:25 +00:00
parent fbe7629420
commit 7627af5bc8
3 changed files with 6 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/signals.md
View File

@@ -20,7 +20,7 @@ their Signals that has not heard about the item yet.
the set the page's own icons come from: 2,883 icons, solid, regular and brands, searched by name
and Font Awesome's search terms ("ai" finds the robot). Without one, a Signal shows its initials.
**Auto** asks Jev to choose (#263), and a Signal made without an icon gets Jev's pick by
itself, a moment after it is made. Every Signal's tile is in the accent tint the folder has.
itself, a moment after it is made. Every Signal's tile is in the needle's colour (`--accent2`), the orange point of the folder's icon.
- **Each Signal's row** says "12 items · 3 unread", as a feed's row counts its own.
- **The folder's page** lists the Signals, as an OPML's page lists its feeds, with the + for a new one.
- **A Signal's page** is an ordinary item list: All, Unread, Downloaded and Pinned, search and sort.

2
web/app.css
View File

@@ -779,7 +779,7 @@ body.scan-this .fhead [data-a=scan] .i,body.scan-any .fhead [data-a=scanall] .i,
/* Initials, tinted by a hash of the name so two "TS" in a row can be told apart. Mixed into the
page ground, not --raise: that is also the selected row, and a selected tile vanished into it. */
.art>.tile{width:100%;height:100%;display:block}
#pdead .tile{width:22px;height:22px;border-radius:5px}
#pdead .tile{width:26px;height:26px;border-radius:6px}
.art.ini{background:color-mix(in srgb,var(--tint) 24%,var(--bg));color:var(--tint)}
/* A folder: its first four shows' art, as iTunes built a playlist's from its albums. */
.art.mosaic{grid-template:1fr 1fr/1fr 1fr;place-items:stretch}

7
web/src/signals.ts
View File

@@ -34,11 +34,12 @@ function feedRow(id: string, cls: string, html: string, open: ()=>void){
/// takes nothing else either).
const ICON_ID=/^(solid|regular|brands)\/[a-z0-9-]{1,64}$/;
const iconHTML=(icon: string)=>`<span class="ficon" style="--icon:url('/icons/${icon}.svg')"></span>`;
/// Every Signal in the accent tint the folder has, icon or initials: tinted by a hash of its name,
/// as a feed without art is, one came out a colour of its own for no reason anyone could see (#262).
/// Every Signal in the needle's colour (--accent2), the point of the folder's icon, icon or
/// initials: tinted by a hash of its name, as a feed without art is, one came out a colour of its
/// own for no reason anyone could see (#262).
function signalTile(sg: {name: string, icon: string|null}){
const inner=sg.icon&&ICON_ID.test(sg.icon) ? iconHTML(sg.icon) : esc(initials(sg.name));
return `<div class="art ini sig" style="--tint:var(--accent)">${inner}</div>`;
return `<div class="art ini sig" style="--tint:var(--accent2)">${inner}</div>`;
}
const badgeHTML=(n: number)=>`<span class="badge${n?'':' zero'}" title="${n} unread">${n>999?'999+':n}</span>`;
function signalFolder(list: HTMLElement, q: string){