diff --git a/CHANGELOG.md b/CHANGELOG.md index 71b31ca..cf9d378 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,8 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changed -- A feed being checked shows a small spinner at the end of its row (and its folder's), instead of - toasts: no more "Scanning…" or "1 new" pop-ups, and none at all for feeds you do not read. A +- A feed being checked shows a small spinner in place of its unread count (and its folder's), + instead of toasts: no more "Scanning…" or "1 new" pop-ups, and none at all for feeds you do not read. A "Downloaded" toast is only for a file on your screen. - "Check every feed" checks every feed you subscribe to, not every feed on the server. diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js index fefc72f..09e983d 100644 --- a/tests/ui/app.spec.js +++ b/tests/ui/app.spec.js @@ -1305,8 +1305,10 @@ test('a feed being checked shows a spinner on its row, and no toast', async ({ p await expect(row).toBeVisible(); await page.evaluate(() => setScanning('test-show', true)); await expect(row).toHaveClass(/\bscanning\b/); + await expect(row.locator('.badge'), 'the spinner stands in for the count').toBeHidden(); await page.evaluate(() => setScanning('test-show', false)); await expect(row).not.toHaveClass(/\bscanning\b/); + await expect(row.locator('.badge')).toBeVisible(); // Checking every feed says so on the rows, not in a toast (issue #37). await page.locator('#scanAll').click(); await page.waitForTimeout(1500); diff --git a/web/app.css b/web/app.css index 184e97a..a6622d7 100644 --- a/web/app.css +++ b/web/app.css @@ -368,9 +368,10 @@ input:focus,select:focus{outline:0;border-color:var(--accent)} } .chev:hover{color:var(--fg)} .chev.bad,.chev.bad:hover{color:var(--bad)} -/* A feed being checked: a small spinner at the row's end, after its count (issue #37). */ +/* A feed being checked: a small spinner in place of its unread count (issue #37). */ +.feed.scanning .badge{display:none} .feed.scanning::after{ - content:"";flex:none;width:12px;height:12px;border-radius:50%; + content:"";flex:none;width:12px;height:12px;margin:0 6px;border-radius:50%; border:2px solid var(--line);border-top-color:var(--accent);animation:ipxspin .8s linear infinite; } @keyframes ipxspin{to{transform:rotate(360deg)}}