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

feat(setup): drop the system disk's checkbox, group the rest under a divider

Browse Source 
The system disk rendered as a checked-and-disabled checkbox, which reads
as "a choice that is locked". It isn't a choice at all — apps fall back
to it whatever happens — so it now carries no control, and is a <div>
rather than a <label> since there is nothing to label. A spacer keeps its
text aligned with the real checkboxes below.

An "Additional drives" divider separates the two kinds of row: above it
is where apps go regardless, below it is what you can opt into. It only
renders when there is something to divide, so the single-disk case is
still one card and a line of text.

Verified both states.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
librelad 2026-08-26 03:13:08 +01:00
parent 6a8536fb1b
commit 731b787ce5
2 changed files with 47 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1315,8 +1315,9 @@ body.setup-wizard-open .eo-modal { z-index: 10000; }
/* The system drive: ticked and non-interactive, because apps fall back to it
and it therefore cannot be deselected. Kept at full opacity — unlike a
refused drive, it is not a lesser option, it is the default one. */
/* Not a choice, so not clickable and not dimmed: it is the default, not a
lesser option. Kept visually distinct from the selectable cards below. */
.setup-storage-locked { opacity: 1; cursor: default; }
.setup-storage-locked input[type=checkbox] { cursor: default; }
.setup-storage-badge-ok {
background: rgba(90, 220, 150, 0.18);
color: #86ecb6;
@ -1347,3 +1348,29 @@ body.setup-wizard-open .eo-modal { z-index: 10000; }
}
.setup-storage-meter-mid > span { background: rgba(255, 206, 110, 0.9); }
.setup-storage-meter-high > span { background: rgba(255, 138, 138, 0.95); }
/* The system disk has no checkbox, so this keeps its text aligned with the
drives below that do. Same footprint as .setup-app input[type=checkbox]. */
.setup-storage-spacer {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* Divider between "where apps go regardless" and "what you can opt into". */
.setup-storage-divider {
display: flex;
align-items: center;
gap: 10px;
margin: 14px 2px 10px;
font-size: 0.78em;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.72;
}
.setup-storage-divider::after {
content: "";
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.16);
}

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

@ -492,9 +492,20 @@ class SetupWizard {
const title = o.locked ? 'System disk' : c.path;
// The system disk carries NO checkbox — not even a disabled one. Apps fall
// back to it whatever happens, so it is not a choice, and a control that
// can never change state reads as "locked option" rather than "this is
// simply where things go". It is a <div> for the same reason: a <label>
// with nothing to label is wrong. A spacer keeps the text aligned with the
// real checkboxes below it.
const control = o.locked
? '<span class="setup-storage-spacer" aria-hidden="true"></span>'
: `<input type="checkbox" data-storage-path="${this.escapeHtml(c.path)}" ${refused ? 'disabled' : ''}>`;
const tag = o.locked ? 'div' : 'label';
return `
<label class="setup-app setup-storage-card${refused ? ' setup-storage-disabled' : ''}${o.locked ? ' setup-storage-locked' : ''}">
<input type="checkbox" ${o.locked ? 'checked disabled data-storage-system="1"' : `data-storage-path="${this.escapeHtml(c.path)}"`} ${refused ? 'disabled' : ''}>
<${tag} class="setup-app setup-storage-card${refused ? ' setup-storage-disabled' : ''}${o.locked ? ' setup-storage-locked' : ''}">
${control}
<span class="setup-app-body">
<span class="setup-app-name">${this.escapeHtml(title)} ${badge}</span>
<span class="setup-app-desc">
@ -503,7 +514,7 @@ class SetupWizard {
</span>
</span>
<button type="button" class="setup-storage-details" data-storage-details="${this.escapeHtml(key)}">Details</button>
</label>`;
</${tag}>`;
}
renderStorage() {
@ -515,6 +526,11 @@ class SetupWizard {
if (this.storageSystem) {
html += this._storageCard(this.storageSystem, 'system', { locked: true });
}
// Separate the fixed fact from the actual choice: above the divider is
// where apps go regardless, below it is what you can opt into.
if (this.storageCandidates.length) {
html += '<div class="setup-storage-divider"><span>Additional drives</span></div>';
}
html += this.storageCandidates.map((c, i) => this._storageCard(c, String(i), {})).join('');
list.innerHTML = html;