From 6a8536fb1b187bd8d53d61fbabb1755ddb1d10ea Mon Sep 17 00:00:00 2001 From: librelad Date: Wed, 26 Aug 2026 03:06:40 +0100 Subject: [PATCH] fix(setup): fill the capacity bar with used space, drop the footer note MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I had the bar filling with FREE space. It was internally consistent with the text next to it and completely wrong in practice: every file manager fills a capacity bar with USED space, so a nearly-empty disk rendered as a nearly-full bar and read as "this drive is full". Windows Explorer is the reference for exactly this pairing — a used-fill bar beside "808 GB free of 912 GB" — so the card now matches it. Amber above 75% used, red above 90%. The cosmetic problem that led me to invert it (a low-usage bar looking like a broken widget rather than an almost-empty one) was the track's contrast, not the direction. Fixed where it belonged, in CSS. Also drops the "Drives that can't hold app data are greyed out" line: the cards and their badges already carry that, so it was a standing sentence explaining something visible. Co-Authored-By: Claude Opus 5 --- .../frontend/core/setup/css/setup-wizard.css | 7 ++-- .../frontend/core/setup/js/setup-wizard.js | 35 ++++++++++--------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/containers/libreportal/frontend/core/setup/css/setup-wizard.css b/containers/libreportal/frontend/core/setup/css/setup-wizard.css index 3911eda..81a10ad 100755 --- a/containers/libreportal/frontend/core/setup/css/setup-wizard.css +++ b/containers/libreportal/frontend/core/setup/css/setup-wizard.css @@ -1325,7 +1325,9 @@ body.setup-wizard-open .eo-modal { z-index: 10000; } /* Capacity meter on a drive card. Inline and small on purpose: it encodes the proportion the text deliberately doesn't repeat, without adding a row. - Filled = free space, so the bar drains as the disk fills. */ + Filled = used space, as in every file manager. The track is deliberately + high-contrast: a barely-used disk shows a tiny sliver, and against a faint + track that read as a broken widget rather than as "almost empty". */ .setup-storage-meter { display: inline-block; vertical-align: middle; @@ -1333,7 +1335,8 @@ body.setup-wizard-open .eo-modal { z-index: 10000; } height: 5px; margin-left: 10px; border-radius: 3px; - background: rgba(255, 255, 255, 0.20); + background: rgba(255, 255, 255, 0.32); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); overflow: hidden; } .setup-storage-meter > span { diff --git a/containers/libreportal/frontend/core/setup/js/setup-wizard.js b/containers/libreportal/frontend/core/setup/js/setup-wizard.js index 8ec6cbb..5d5df8c 100755 --- a/containers/libreportal/frontend/core/setup/js/setup-wizard.js +++ b/containers/libreportal/frontend/core/setup/js/setup-wizard.js @@ -452,23 +452,25 @@ class SetupWizard { // // Which figure matters depends on the question. For "will my data fit?" — // the question this step actually asks — absolute free space decides it: a - // 4 GB disk that is 89% free is still useless for a media library. - // Percentage answers "is this filling up?", a health signal rather than a - // placement one. So the text carries the magnitude and the bar the - // proportion, which is what the eye reads fastest. + // 4 GB disk that is 89% free is still useless for a media library. So the + // text carries the magnitude and the bar the proportion. // - // The bar fills with FREE space, not used. Filling by usage meant a healthy - // 7%-full disk rendered as an almost-empty track that read as a broken - // widget, and it disagreed with the text right beside it. Filled = room to - // spare, draining = filling up, which is the same direction as the words. + // The bar fills with USED space. This is the convention every file manager + // uses (Windows Explorer shows exactly this pairing: a used-fill bar beside + // "808 GB free of 912 GB"), and a filled bar therefore reads as "full". + // Filling it with FREE instead was internally consistent with the text but + // fought that convention hard enough that a nearly-empty disk looked full. + // The cosmetic problem that prompted the inversion — a low-usage bar looking + // like a broken widget — belongs to the track's contrast, fixed in CSS. _storageMeter(c) { const used = Math.max(0, Math.min(100, Number(c.used_pct) || 0)); - const free = 100 - used; - const level = free <= 10 ? ' setup-storage-meter-high' - : (free <= 25 ? ' setup-storage-meter-mid' : ''); + // Keep a sliver visible so a barely-used disk still reads as a measurement. + const width = used > 0 && used < 2 ? 2 : used; + const level = used >= 90 ? ' setup-storage-meter-high' + : (used >= 75 ? ' setup-storage-meter-mid' : ''); return ``; + aria-label="${used}% of this drive used" + title="${used}% used, ${100 - used}% free">`; } // One card, one line. @@ -525,10 +527,11 @@ class SetupWizard { }); if (note) { - // Deliberately not repeating the tooltip: this line carries only what is - // actionable while choosing. + // Only the single-disk case says anything: with drives listed, the cards + // and their badges already carry it, and a standing explanatory line + // under them was noise. note.innerHTML = this.storageCandidates.length - ? 'Drives that can\u2019t hold app data are greyed out \u2014 open Details to see why.' + ? '' : 'No other drives found. You can add one later with libreportal storage.'; } }