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

feat(backup): move 'Backup style' preset hint into a tooltip

Browse Source 
Both Backup style controls (global Configuration retention and per-location) now surface the selected preset's description via a tooltip on the label, updated when the preset changes, instead of an always-visible hint line. Also makes the per-location tooltip accurate for non-default presets (it was previously fixed to the inherit text).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-05-22 14:19:53 +01:00
parent 6b07d12bdf
commit 8406355c2d
1 changed files with 7 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
containers/libreportal/frontend/js/components/backup/backup-page.js
View File

@ -945,10 +945,9 @@ class BackupPage {
block.className = 'backup-retention-preset-block';
block.innerHTML = `
<label class="backup-form-row">
<span class="backup-form-label">Backup style</span>
<span class="backup-form-label">Backup style <span class="tooltip" data-retention-tooltip title="${this.escape(meta?.hint || '')}">ℹ️</span></span>
<select class="form-control" data-backup-retention-preset>${presetOptions}</select>
</label>
<div class="backup-retention-hint backup-card-hint">${this.escape(meta?.hint || '')}</div>
`;
const fieldsGrid = section.querySelector('.config-fields');
@ -965,10 +964,10 @@ class BackupPage {
applyVisibility(preset);
const select = block.querySelector('[data-backup-retention-preset]');
const hintEl = block.querySelector('.backup-retention-hint');
const tooltipEl = block.querySelector('[data-retention-tooltip]');
select.addEventListener('change', () => {
const chosen = select.value;
hintEl.textContent = BACKUP_RETENTION_PRESET_META[chosen]?.hint || '';
if (tooltipEl) tooltipEl.title = BACKUP_RETENTION_PRESET_META[chosen]?.hint || '';
applyVisibility(chosen);
if (chosen === 'custom') return;
const p = BACKUP_RETENTION_PRESETS[chosen];
@ -990,6 +989,7 @@ class BackupPage {
"Custom…" is selected. */
formRetention(prefix, values, includeInherit = false) {
const preset = backupRetentionDetectPreset(values, includeInherit);
const meta = BACKUP_RETENTION_PRESET_META[preset];
const presetOptions = Object.entries(BACKUP_RETENTION_PRESET_META)
.filter(([k]) => k !== 'inherit-global' || includeInherit)
.map(([k, v]) => `<option value="${k}" ${k === preset ? 'selected' : ''}>${this.escape(v.label)}</option>`)
@ -1002,7 +1002,7 @@ class BackupPage {
return `
<div class="backup-form-grid backup-retention-block" data-retention-prefix="${this.escape(prefix)}" data-retention-allow-inherit="${includeInherit ? '1' : '0'}">
<label class="backup-form-row">
<span class="backup-form-label">Backup style <span class="tooltip" title="Use whatever the Configuration tab specifies. Pick something else here only when this location needs a different policy.">ℹ️</span></span>
<span class="backup-form-label">Backup style <span class="tooltip" data-retention-tooltip title="${this.escape(meta?.hint || '')}">ℹ️</span></span>
<select class="form-control" data-retention-preset>${presetOptions}</select>
</label>
${customRetentionHidden}
@ -1026,6 +1026,8 @@ class BackupPage {
const prefix = block.dataset.retentionPrefix;
const allowInherit = block.dataset.retentionAllowInherit === '1';
const preset = selectEl.value;
const tooltipEl = block.querySelector('[data-retention-tooltip]');
if (tooltipEl) tooltipEl.title = BACKUP_RETENTION_PRESET_META[preset]?.hint || '';
if (preset === 'custom') {
if (advanced) advanced.hidden = false;