rays/ipodderx-rs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Files pane and item buttons are icons, with the words in tooltips

Browse Source 
Save, delete, view and download in the Files pane, and mark read, keep
and open the original under an item's title, are icons now. The word is
in each one's title and aria-label, so it is still there on hover and
for screen readers. Tests find them by title or action, not text.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016HdTEWQNrzyFULijigkmMn
This commit is contained in:
Ray Slakinski
2026-09-11 14:57:03 +00:00
parent 1a2b0d87c6
commit 8a309eb652
3 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/index.html
View File

@@ -214,6 +214,8 @@ a.btn{text-decoration:none;color:inherit}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--ink);font-weight:600}
.btn.primary:hover{filter:brightness(1.08)}
.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}
.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;
@@ -983,9 +985,12 @@ function showDetail(e){
${num?`<span>${num}</span><span class="dot"></span>`:''}
<span>${dateOf(e.published)}</span>
${e.duration?`<span class="dot"></span><span>${clock(e.duration)}</span>`:''}
<button class="btn" data-a="read">Mark ${e.read?'unread':'read'}</button>
<button class="btn" data-a="flag">${e.flagged?'\u2605 Kept':'\u2606 Keep'}</button>
${e.link?`<a class="btn" href="${esc(e.link)}" target="_blank" rel="noopener noreferrer">Open original \u2197</a>`:''}
<button class="btn ico" data-a="read" title="Mark ${e.read?'unread':'read'}"
aria-label="Mark ${e.read?'unread':'read'}">${e.read?'\u25cf':'\u2713'}</button>
<button class="btn ico" data-a="flag" title="${e.flagged?'Kept: never deleted. Stop keeping':'Keep, so it is never deleted'}"
aria-label="${e.flagged?'Stop keeping':'Keep'}">${e.flagged?'\u2605':'\u2606'}</button>
${e.link?`<a class="btn ico" href="${esc(e.link)}" target="_blank" rel="noopener noreferrer"
title="Open the original" aria-label="Open the original">\u2197</a>`:''}
</div>
<div class="dbody">${(e.description&&e.description.trim())||'<em>No show notes.</em>'}</div>
${narrow?encs:''}`;
@@ -1006,16 +1011,19 @@ function encBox(x){
// One file serves everyone reading the feed, so deleting is not a private act.
const f=S.feeds.find(y=>y.id===x.feed_id);
const shared=f&&f.subscribers>1;
const delBtn=`<button class="btn danger" data-a="del" data-enc="${x.id}"${
shared?` title="Shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed"`:''
}>Delete${shared?' for everyone':' file'}</button>`;
// Icons, with the words in the tooltip and for screen readers.
const delLabel=shared
? `Delete for everyone (shared with ${f.subscribers-1} other ${f.subscribers===2?'person':'people'} reading this feed)`
: 'Delete file';
const delBtn=`<button class="btn ico danger" data-a="del" data-enc="${x.id}" title="${delLabel}" aria-label="${delLabel}">🗑</button>`;
const saveBtn=`<a class="btn ico" href="/media/${x.id}" download title="Save to this computer" aria-label="Save to this computer">💾</a>`;
if(x.path && !isPlayable(x)){
// On disk, but not audio or video: view it, keep it, or remove it -- no player.
return `<div class="encbox">
<span class="chip done">${esc(kindOf(x))}</span>
<span class="meta" style="flex:1">downloaded${size?' \u00b7 '+size:''}</span>
<a class="btn" href="/media/${x.id}" target="_blank" rel="noopener noreferrer">View</a>
<a class="btn" href="/media/${x.id}" download>Save</a>
<a class="btn ico" href="/media/${x.id}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">↗</a>
${saveBtn}
${delBtn}
</div>`;
}
@@ -1023,7 +1031,7 @@ function encBox(x){
return `<div class="encbox">
<audio id="audio-${x.id}" controls preload="none" src="/media/${x.id}"></audio>
<span class="meta">${size}</span>
<a class="btn" href="/media/${x.id}" download>Save</a>
${saveBtn}
${delBtn}
</div>`;
}
@@ -1036,8 +1044,8 @@ function encBox(x){
${x.state==='reaped'?'':`<span class="chip ${esc(x.state)}">${x.state==='skipped'?kindOf(x):esc(x.state)}</span>`}
<span class="meta" style="flex:1">${esc(kindOf(x))}${size?' \u00b7 '+size:''}</span>
${x.state==='error'&&x.last_error?`<span class="err">${esc(x.last_error)}</span>`:''}
${viewable?`<a class="btn" href="${esc(x.url)}" target="_blank" rel="noopener noreferrer">View</a>`:''}
<button class="btn" data-a="get" data-enc="${x.id}">Download</button>
${viewable?`<a class="btn ico" href="${esc(x.url)}" target="_blank" rel="noopener noreferrer" title="View in a new tab" aria-label="View in a new tab">↗</a>`:''}
<button class="btn ico" data-a="get" data-enc="${x.id}" title="Download to the server" aria-label="Download to the server">⤓</button>
</div>`;
}