Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(setup): fill the capacity bar with used space, drop the footer note

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-08-26 03:06:40 +01:00
parent e101764085
commit 6a8536fb1b
2 changed files with 24 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
containers/libreportal/frontend/core/setup/css/setup-wizard.css
View File

@ -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 /* 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. 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 { .setup-storage-meter {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
@ -1333,7 +1335,8 @@ body.setup-wizard-open .eo-modal { z-index: 10000; }
height: 5px; height: 5px;
margin-left: 10px; margin-left: 10px;
border-radius: 3px; 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; overflow: hidden;
} }
.setup-storage-meter > span { .setup-storage-meter > span {

35
containers/libreportal/frontend/core/setup/js/setup-wizard.js
View File

@ -452,23 +452,25 @@ class SetupWizard {
// //
// Which figure matters depends on the question. For "will my data fit?" — // Which figure matters depends on the question. For "will my data fit?" —
// the question this step actually asks — absolute free space decides it: a // 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. // 4 GB disk that is 89% free is still useless for a media library. So the
// Percentage answers "is this filling up?", a health signal rather than a // text carries the magnitude and the bar the proportion.
// placement one. So the text carries the magnitude and the bar the
// proportion, which is what the eye reads fastest.
// //
// The bar fills with FREE space, not used. Filling by usage meant a healthy // The bar fills with USED space. This is the convention every file manager
// 7%-full disk rendered as an almost-empty track that read as a broken // uses (Windows Explorer shows exactly this pairing: a used-fill bar beside
// widget, and it disagreed with the text right beside it. Filled = room to // "808 GB free of 912 GB"), and a filled bar therefore reads as "full".
// spare, draining = filling up, which is the same direction as the words. // 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) { _storageMeter(c) {
const used = Math.max(0, Math.min(100, Number(c.used_pct) || 0)); const used = Math.max(0, Math.min(100, Number(c.used_pct) || 0));
const free = 100 - used; // Keep a sliver visible so a barely-used disk still reads as a measurement.
const level = free <= 10 ? ' setup-storage-meter-high' const width = used > 0 && used < 2 ? 2 : used;
: (free <= 25 ? ' setup-storage-meter-mid' : ''); const level = used >= 90 ? ' setup-storage-meter-high'
: (used >= 75 ? ' setup-storage-meter-mid' : '');
return `<span class="setup-storage-meter${level}" role="img" return `<span class="setup-storage-meter${level}" role="img"
aria-label="${free}% of this drive free" aria-label="${used}% of this drive used"
title="${used}% used, ${free}% free"><span style="width:${free}%"></span></span>`; title="${used}% used, ${100 - used}% free"><span style="width:${width}%"></span></span>`;
} }
// One card, one line. // One card, one line.
@ -525,10 +527,11 @@ class SetupWizard {
}); });
if (note) { if (note) {
// Deliberately not repeating the tooltip: this line carries only what is // Only the single-disk case says anything: with drives listed, the cards
// actionable while choosing. // and their badges already carry it, and a standing explanatory line
// under them was noise.
note.innerHTML = this.storageCandidates.length 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 <code>libreportal storage</code>.'; : 'No other drives found. You can add one later with <code>libreportal storage</code>.';
} }
} }