file manager: an enabled inactive read pill is outlined, not grey

The Read decoded pill used the same grey fill as a disabled control, so
an enabled pill looked unavailable (reported live).  The inactive-but-
enabled state is now an outlined button (blue on white/slate) and the
grey fill plus dimming are reserved for the actually disabled state.
The active pill keeps a border of the same width so the row does not
shift.

Pinned in fs_edit.test.js.  1022 Python + 1058 frontend; simple-v469.
This commit is contained in:
2026-10-23 17:06:50 +03:00
parent 87bf4acbbc
commit d5e67360fe
4 changed files with 25 additions and 7 deletions
+10
View File
@@ -117,12 +117,19 @@ test('Read raw / Read decoded pills switch the view and read the file', () => {
assert.strictEqual(h.reads(), 0, 'skipRead updates the pills only');
assert.ok(h.pill('raw').classList.contains('bg-blue-600'));
assert.ok(!h.pill('dec').classList.contains('bg-blue-600'));
// an enabled inactive pill is outlined, not grey: the grey fill reads as
// "disabled" although the pill is clickable (reported live)
assert.ok(h.pill('dec').classList.contains('bg-white'));
assert.ok(h.pill('dec').classList.contains('text-blue-600'));
assert.ok(!h.pill('dec').classList.contains('bg-gray-200'));
pysimFsSetMode('dec');
assert.strictEqual(pysimFsDecodedMode, true);
assert.strictEqual(h.reads(), 1, 'a pill click reads the selected file');
assert.ok(h.pill('dec').classList.contains('bg-blue-600'));
assert.ok(!h.pill('raw').classList.contains('bg-blue-600'));
assert.ok(h.pill('raw').classList.contains('bg-white'));
assert.ok(!h.pill('raw').classList.contains('bg-gray-200'));
});
test('pill clicks are ignored while editing', () => {
@@ -221,4 +228,7 @@ test('the file manager row exposes the read pills and Edit raw', () => {
assert.ok(html.includes('id="pysim-fs-read-raw-btn"') && html.includes('data-needs="card"'));
const dec = /<button[^>]*id="pysim-fs-read-dec-btn"[^>]*>/.exec(html);
assert.ok(dec && dec[0].includes('data-needs-decoder'), 'the decoded pill is decoder-gated');
// the enabled-inactive look is an outline; the grey fill is for disabled
assert.ok(dec[0].includes('bg-white') && dec[0].includes('text-blue-600'));
assert.ok(!dec[0].includes('bg-gray-200'));
});