diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4370e4..4b28c95 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,7 +34,12 @@ The long form, with what was wrong before and how it was found, is in
- Buttons are icons, with the words in their tooltips: the Files pane (save, delete, view,
download), an item's own buttons (mark read, keep, open the original), the feed header (scan,
download latest, mark all read, settings, unsubscribe), and the Settings, feed settings and
- Download latest dialogs (save, download, cancel).
+ Download latest dialogs (save, download, cancel). The icons are drawn, from one set, rather
+ than font characters: ⟳ ⤓ ↗ and the like came out thin and tiny and differed from font to
+ font. Keep is a flag everywhere, as it was in the original.
+- A file's state and type are icons: a check when it is downloaded, a warning when it failed
+ (the error is in the tooltip), and nothing while it waits; audio, video, image, PDF, torrent
+ and other files each have their own. The DOWNLOADED and PENDING labels are gone.
### Security
diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js
index 19de1a0..03ca1b9 100644
--- a/tests/ui/app.spec.js
+++ b/tests/ui/app.spec.js
@@ -87,7 +87,7 @@ test('the three panes are there and the item text lands in the bottom one', asyn
// Only the downloaded one gets a player, and max_new_per_check is 1, so find it by
// its chip rather than assuming which episode the daemon happened to fetch.
- const downloaded = page.locator('.ep', { hasText: 'downloaded' }).first();
+ const downloaded = page.locator('.ep', { has: page.locator('[title="Downloaded"]') }).first();
await downloaded.click();
await expect(page.locator('#files audio')).toBeVisible();
await expect(page.locator('#files .encbox [title="Save to this computer"]')).toBeVisible();
@@ -110,8 +110,9 @@ test('a downloaded file that is not audio gets no player', async ({ page }) => {
await expect(page.locator('#detail .dt')).toHaveText('An Article');
await expect(page.locator('#files audio')).toHaveCount(0);
- await expect(page.locator('#files .encbox')).toContainText('image');
- await expect(page.locator('#files .encbox')).toContainText('downloaded');
+ // What it is and that it is here, as icons with the words in their tooltips.
+ await expect(page.locator('#files .encbox [title="image"]')).toBeVisible();
+ await expect(page.locator('#files .encbox [title="Downloaded"]')).toBeVisible();
// Still offered as a file, just not as an episode: viewable and keepable.
await expect(page.locator('#files [title="Save to this computer"]')).toBeVisible();
const view = page.locator('#files a[title="View in a new tab"]');
@@ -130,7 +131,7 @@ test('an item with several enclosures lists them all', async ({ page }) => {
await row.click();
// The Files pane lists every one: the audio and the image.
await expect(page.locator('#files .encbox')).toHaveCount(2);
- await expect(page.locator('#files .encbox').nth(1)).toContainText('image');
+ await expect(page.locator('#files .encbox').nth(1).locator('[title="image"]')).toBeVisible();
});
test('the filter tabs change what is listed', async ({ page }) => {
@@ -673,7 +674,7 @@ test('a deleted file looks as if it was never downloaded', async ({ page }) => {
await page.locator('#files button[data-a="del"]').click();
// No "reaped", no chip at all: just the way to get it again.
- await expect(row).not.toContainText('downloaded');
+ await expect(row.locator('[title="Downloaded"]')).toHaveCount(0);
await expect(row).not.toContainText(/reaped/i);
await row.click();
await expect(page.locator('#files')).not.toContainText(/reaped/i);
diff --git a/web/index.html b/web/index.html
index a8b1bac..a2f48c6 100644
--- a/web/index.html
+++ b/web/index.html
@@ -236,6 +236,18 @@ a.btn{text-decoration:none;color:inherit}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
/* An icon in place of a word; the word is in its tooltip. */
.btn.ico{padding:4px 9px;min-width:32px;font-size:14px;line-height:1.25;text-align:center}
+/* A drawn icon: bold strokes in the button's own colour. */
+.i{
+ display:inline-block;width:16px;height:16px;vertical-align:-3px;flex:none;
+ fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
+}
+.i.f{fill:currentColor;stroke:none}
+/* A file's state and type, as icons in place of the old DOWNLOADED / PENDING / audio chips. */
+.fst,.kind{display:inline-grid;place-items:center}
+.fst{color:var(--good)}
+.fst.bad{color:var(--bad)}
+.kind{color:var(--dim)}
+.fhead .art .i{width:22px;height:22px}
.toolbar{
display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap;
position:sticky;top:0;background:var(--bg);padding:6px 0 8px;z-index:3;
@@ -494,7 +506,9 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
:root[data-theme="classic"] .ep.sel .line,
:root[data-theme="classic"] .ep.sel .st,
:root[data-theme="classic"] .ep.sel .fl,
-:root[data-theme="classic"] .ep.sel .file{color:#fff}
+:root[data-theme="classic"] .ep.sel .file,
+:root[data-theme="classic"] .ep.sel .fst,
+:root[data-theme="classic"] .ep.sel .kind{color:#fff}
/* Lists were white in the original; the pale blue-grey belongs to the source list alone. */
:root[data-theme="classic"] .childrow{background:#fff}
:root[data-theme="classic"] .dt{background:linear-gradient(#80aae6,#3f78cf);color:#fff;padding:6px 12px;border-radius:4px}
@@ -502,33 +516,33 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
-
+
';
box.appendChild(pane);
@@ -819,10 +871,10 @@ function renderGroup(f,kids){
${gone?`
${gone} feed${gone===1?' is':'s are'} no longer
listed in this OPML but kept because ${gone===1?'it has':'they have'} downloads.
`:''}
-
-
-
-
+
+
+
+
@@ -903,8 +955,6 @@ function epEl(e){
const has=!!(enc&&enc.path);
const playable=isPlayable(enc);
const others=e.enclosures.length-1;
- // A file deleted to save space reads as if it was never downloaded: no chip, just the ⤓.
- const gone=!!enc&&enc.state==='reaped';
const el=document.createElement('div');
el.className='ep'+(e.read?' read':'')+(S.sel===e.guid?' sel':'')+
(player.guid===e.guid?' playing':'');
@@ -915,7 +965,7 @@ function epEl(e){
+ e.flagged?'Stop keeping':'Keep (never auto-delete)'}">${e.flagged?ICON.flagOn:ICON.flag}
`;
el.onclick=()=>selectEntry(e);
$$('button[data-a]',el).forEach(b=>b.onclick=ev=>{ev.stopPropagation();epAction(b.dataset.a,e,el)});
@@ -968,6 +1017,22 @@ function kindOf(enc){
return (ext && ext.length<=5) ? ext.toLowerCase() : 'file';
}
+/// What a file is, as an icon; the word is in its tooltip.
+function kindIcon(enc){
+ const k=kindOf(enc);
+ const i={audio:ICON.audio,video:ICON.video,image:ICON.image,pdf:ICON.doc,torrent:ICON.torrent}[k]||ICON.file;
+ return `${i}`;
+}
+
+/// Whether a file is here, as an icon: a check when downloaded, a warning when it failed, and
+/// nothing otherwise, so a file waiting to download and one deleted to save space read alike.
+function stateIcon(enc){
+ if(enc.path) return `${ICON.done}`;
+ if(enc.state!=='error') return '';
+ const why=esc(enc.last_error||'Download failed');
+ return `${ICON.alert}`;
+}
+
function feedArt(id=S.feed){ const f=S.feeds.find(x=>x.id===id); return f&&f.image; }
const feedName=id=>{ const f=S.feeds.find(x=>x.id===id); return f?(f.title||f.id):id; };
@@ -1057,11 +1122,11 @@ function showDetail(e){
${dateOf(e.published)}
${e.duration?`${clock(e.duration)}`:''}
+ aria-label="Mark ${e.read?'unread':'read'}">${e.read?ICON.dot:ICON.check}
+ aria-label="${e.flagged?'Stop keeping':'Keep'}">${e.flagged?ICON.flagOn:ICON.flag}
${e.link?`\u2197`:''}
+ title="Open the original" aria-label="Open the original">${ICON.open}`:''}
${(e.description&&e.description.trim())||'No show notes.'}
${narrow?encs:''}`;
@@ -1086,14 +1151,14 @@ function encBox(x){
const delLabel=shared
? `Delete for everyone (shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed)`
: 'Delete file';
- const delBtn=``;
- const saveBtn=`💾`;
+ const delBtn=``;
+ const saveBtn=`${ICON.save}`;
if(x.path && !isPlayable(x)){
// On disk, but not audio or video: view it, keep it, or remove it -- no player.
return `
`;
@@ -1110,13 +1175,12 @@ function encBox(x){
// straight to the publisher's copy in a new tab -- no download, and nothing proxied
// through here, which would make ipx a fetch-anything relay.
const viewable = !isPlayable(x) && x.state !== 'pending';
- // A file deleted to save space reads as if it was never downloaded, so it gets no chip.
return `
`;
}
@@ -1513,8 +1577,8 @@ async function prefsModal(){
Add and remove the people who can sign in, and choose who is an admin.
-
-
`);
+
+
`);
$('#gopml').onclick=opmlModal;
$('#gusers').onclick=usersModal;
$('#gsave').onclick=async()=>{
@@ -1610,8 +1674,8 @@ function settingsModal(f){
Where the files land. There is one copy however many people
subscribe, so this is the same for everyone.