fix(catalog/webui): replace the official-hide warning wall-of-text with a ✓/✗ checklist
Feedback: the removal warning was an overwhelming paragraph and made it look like updates might break. Keep the official catalog removable, but present the effects as a clear two-part list instead of prose: ✓ Still works: system updates & hotfixes, installed apps, re-enabling any time ✕ What changes: official apps hidden from the App Center "Available" list Backed by a new optional messageHtml arg on the shared confirmation dialog (dev- controlled HTML body) + styles for the effect groups. Required tickbox kept. Signed-off-by: librelad <librelad@digitalangels.vip> Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
librelad
parent
2c67b9b622
commit
d571018b9f
@ -25,10 +25,10 @@ class CatalogManager {
|
||||
</div>`;
|
||||
}
|
||||
|
||||
// The pinned official row (source #1). Renders the official URL in a read-only
|
||||
// input — same element (and height) as the third-party rows — with the badge
|
||||
// overlaid. The hidden CFG_CATALOG_OFFICIAL_ENABLED input carries its on/off
|
||||
// state so it saves with the rest on "Save Config".
|
||||
// The pinned official row (source #1). Read-only URL input (same element/height
|
||||
// as the third-party rows) with the badge overlaid. It can be hidden from
|
||||
// browsing via the × (opens a clear ✓/✗ confirmation); the hidden
|
||||
// CFG_CATALOG_OFFICIAL_ENABLED input carries that state so it saves on "Save".
|
||||
_officialRow(base, enabled) {
|
||||
const url = base || '';
|
||||
const off = enabled === false;
|
||||
@ -193,14 +193,32 @@ window.officialCatalogActionHTML = function (enabled) {
|
||||
|
||||
window.deleteOfficialCatalog = function () {
|
||||
const apply = () => window._setOfficialCatalog(false);
|
||||
const body = `
|
||||
<p class="catalog-effects-lead">Hiding the official catalog only changes <strong>app browsing</strong>.</p>
|
||||
<div class="catalog-effects">
|
||||
<div class="catalog-effect-group ok">
|
||||
<div class="catalog-effect-title">Still works</div>
|
||||
<ul>
|
||||
<li>System updates & security hotfixes</li>
|
||||
<li>Apps you already have installed</li>
|
||||
<li>Re-enabling the official catalog any time</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="catalog-effect-group no">
|
||||
<div class="catalog-effect-title">What changes</div>
|
||||
<ul>
|
||||
<li>Official apps are hidden from the App Center's "Available" list</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>`;
|
||||
if (window.showConfirmation) {
|
||||
window.showConfirmation(
|
||||
'Remove the official catalog?',
|
||||
'This hides the official LibrePortal catalog’s apps from the App Center. Your system updates and hotfixes are NOT affected — they always use the official release host. You can re-enable it any time. Click Save Config to apply.',
|
||||
apply, 'Remove from browsing', 'Cancel', 'danger', true,
|
||||
'I understand this only hides official apps from browsing, not system updates'
|
||||
'Hide the official catalog?',
|
||||
'', apply, 'Hide from browsing', 'Cancel', 'danger', true,
|
||||
'I understand updates keep working — this only hides official apps from browsing',
|
||||
body
|
||||
);
|
||||
} else if (window.confirm('Remove the official catalog from browsing?')) {
|
||||
} else if (window.confirm('Hide the official catalog from browsing?')) {
|
||||
apply();
|
||||
}
|
||||
};
|
||||
|
||||
@ -31,7 +31,7 @@ class ConfirmationDialog {
|
||||
|
||||
}
|
||||
|
||||
show(title, message, onConfirm, confirmText = 'Confirm', cancelText = 'Cancel', confirmClass = 'primary', showDataLossCheckbox = false, checkboxText = 'I understand I will lose all my data and it cannot be undone') {
|
||||
show(title, message, onConfirm, confirmText = 'Confirm', cancelText = 'Cancel', confirmClass = 'primary', showDataLossCheckbox = false, checkboxText = 'I understand I will lose all my data and it cannot be undone', messageHtml = '') {
|
||||
|
||||
this.callback = onConfirm;
|
||||
|
||||
@ -44,7 +44,7 @@ class ConfirmationDialog {
|
||||
<div class="confirmation-body">
|
||||
<div class="confirmation-content">
|
||||
<div class="confirmation-icon">⚠️</div>
|
||||
<div class="confirmation-text">${this.escapeHtml(message)}</div>
|
||||
<div class="confirmation-text">${messageHtml || this.escapeHtml(message)}</div>
|
||||
</div>
|
||||
${showDataLossCheckbox ? `
|
||||
<div class="confirmation-checkbox">
|
||||
@ -142,12 +142,12 @@ function initConfirmationDialog() {
|
||||
// initConfirmationDialog() will be called centrally
|
||||
|
||||
// Global function
|
||||
window.showConfirmation = (title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText) => {
|
||||
window.showConfirmation = (title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText, messageHtml) => {
|
||||
// Ensure dialog is initialized
|
||||
initConfirmationDialog();
|
||||
|
||||
if (confirmationDialog) {
|
||||
confirmationDialog.show(title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText);
|
||||
confirmationDialog.show(title, message, onConfirm, confirmText, cancelText, confirmClass, showDataLossCheckbox, checkboxText, messageHtml);
|
||||
} else {
|
||||
// Fallback to native confirm
|
||||
if (confirm(message)) {
|
||||
|
||||
@ -935,6 +935,45 @@ html[data-theme="nebula"]::after {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Structured ✓/✗ effect list for confirmations (e.g. hiding the official catalog). */
|
||||
.catalog-effects-lead {
|
||||
margin: 0 0 12px;
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
.catalog-effects {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
text-align: left;
|
||||
}
|
||||
.catalog-effect-group {
|
||||
background: rgba(0, 0, 0, 0.20);
|
||||
border: 1px solid var(--border-color);
|
||||
border-left: 3px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
.catalog-effect-group.ok { border-left-color: #2ecc71; }
|
||||
.catalog-effect-group.no { border-left-color: var(--status-warning); }
|
||||
.catalog-effect-title {
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.catalog-effect-group.ok .catalog-effect-title { color: #2ecc71; }
|
||||
.catalog-effect-group.ok .catalog-effect-title::before { content: "✓ "; }
|
||||
.catalog-effect-group.no .catalog-effect-title { color: var(--status-warning); }
|
||||
.catalog-effect-group.no .catalog-effect-title::before { content: "✕ "; }
|
||||
.catalog-effects ul {
|
||||
margin: 0;
|
||||
padding-left: 18px;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-secondary, rgba(255, 255, 255, 0.8));
|
||||
}
|
||||
.catalog-effects li { margin: 2px 0; }
|
||||
|
||||
.confirmation-checkbox {
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid var(--border-strong);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user