392 lines
14 KiB
Markdown
392 lines
14 KiB
Markdown
# TASK — v0.11.9 UI Polish Fixes
|
|
|
|
## Context
|
|
|
|
These are UI-only fixes for the deploy/settings page backup section introduced in v0.11.8. No backend changes needed. All changes are in `deploy.html` and `style.css`.
|
|
|
|
**Important design principle:** Use minimal emojis in the UI. The project prefers a clean, professional look. Replace emoji indicators with text or CSS-styled elements instead.
|
|
|
|
## Files to modify
|
|
|
|
- `internal/web/templates/deploy.html`
|
|
- `internal/web/templates/style.css`
|
|
- `internal/web/templates/backups.html` (emoji cleanup in cross-drive summary section)
|
|
|
|
---
|
|
|
|
## Fix 1: Spacing between cards and "Automatikusan generált értékek"
|
|
|
|
**Problem:** No clear visual separation between the last card above the deploy form (`deploy-cross-drive` or `deploy-stale-data`) and the "Automatikusan generált értékek" section inside `.deploy-form`.
|
|
|
|
**Root cause:** `.deploy-cross-drive` has `margin-bottom: 1rem` which doesn't provide enough separation before the next card. When stale data card exists without cross-drive, it's also tight.
|
|
|
|
**Fix in `style.css`:**
|
|
|
|
```css
|
|
/* Change margin-bottom from 1rem to 1.5rem */
|
|
.deploy-cross-drive {
|
|
/* ... existing ... */
|
|
margin-bottom: 1.5rem; /* was 1rem */
|
|
}
|
|
```
|
|
|
|
No change needed for `.deploy-stale-data` — it already has `margin-bottom: 1.5rem`. But verify the margin is actually applied (check if another element is overriding it or if the stale data card is inside a container that collapses margins).
|
|
|
|
---
|
|
|
|
## Fix 2: Rename restic method + add info tooltip on "Módszer"
|
|
|
|
**Problem:** "Verziózott mentés (restic)" doesn't highlight the most important differentiator (encryption). Users should also understand the tradeoffs before picking.
|
|
|
|
**Fix in `deploy.html` — method dropdown (around line 16934-16942):**
|
|
|
|
Replace:
|
|
```html
|
|
<div class="settings-row">
|
|
<span class="settings-label">Módszer</span>
|
|
<select name="cross_drive_method" class="form-control" style="max-width:20rem">
|
|
<option value="rsync" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "rsync")}}selected{{end}}>
|
|
Egyszerű másolat (rsync)
|
|
</option>
|
|
<option value="restic" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "restic")}}selected{{end}}>
|
|
Verziózott mentés (restic)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
```
|
|
|
|
With:
|
|
```html
|
|
<div class="settings-row">
|
|
<span class="settings-label">
|
|
Módszer
|
|
<span class="info-tooltip" tabindex="0">
|
|
<span class="info-icon">i</span>
|
|
<span class="info-tooltip-text">
|
|
<strong>Egyszerű másolat (rsync):</strong> Tükörszerű másolat, a fájlok közvetlenül böngészhetők.
|
|
Nem titkosított, nem verziózott — mindig a legfrissebb állapotot tartalmazza.
|
|
<br><br>
|
|
<strong>Titkosított mentés (restic):</strong> Titkosított, tömörített, verziózott mentés.
|
|
Korábbi állapotok visszaállíthatók. Nem böngészhető közvetlenül —
|
|
visszaállításhoz a vezérlőpult szükséges.
|
|
</span>
|
|
</span>
|
|
</span>
|
|
<select name="cross_drive_method" class="form-control" style="max-width:20rem">
|
|
<option value="rsync" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "rsync")}}selected{{end}}>
|
|
Egyszerű másolat (rsync)
|
|
</option>
|
|
<option value="restic" {{if and .CrossDriveConfig (eq .CrossDriveConfig.Method "restic")}}selected{{end}}>
|
|
Titkosított mentés (restic)
|
|
</option>
|
|
</select>
|
|
</div>
|
|
```
|
|
|
|
**Add to `style.css`:**
|
|
|
|
```css
|
|
/* Info tooltip (i icon with hover popup) */
|
|
.info-tooltip {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
margin-left: .35rem;
|
|
cursor: help;
|
|
}
|
|
|
|
.info-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--text-muted);
|
|
color: var(--text-muted);
|
|
font-size: .65rem;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
font-family: Georgia, serif;
|
|
line-height: 1;
|
|
}
|
|
|
|
.info-tooltip-text {
|
|
display: none;
|
|
position: absolute;
|
|
bottom: calc(100% + 8px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 320px;
|
|
padding: .75rem 1rem;
|
|
background: var(--bg-primary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
|
font-size: .8rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: var(--text-secondary);
|
|
z-index: 100;
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Show on hover or focus (for keyboard) */
|
|
.info-tooltip:hover .info-tooltip-text,
|
|
.info-tooltip:focus .info-tooltip-text,
|
|
.info-tooltip:focus-within .info-tooltip-text {
|
|
display: block;
|
|
}
|
|
|
|
/* Arrow pointing down from tooltip */
|
|
.info-tooltip-text::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
border: 6px solid transparent;
|
|
border-top-color: var(--border-color);
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Fix 3: Cursor on "Napi mentésbe foglalás" label
|
|
|
|
**Problem:** The `<label class="toggle">` wrapping the disabled checkbox uses `cursor: pointer` from the `.toggle` class, making it look clickable when it's not.
|
|
|
|
**Fix in `deploy.html` (around line 16886-16890):**
|
|
|
|
Replace:
|
|
```html
|
|
<div class="cross-drive-nightly">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="app-backup-enabled" {{if .AppBackupEnabled}}checked{{end}} disabled>
|
|
<span class="toggle-label">Napi mentésbe foglalás (restic, helyi)</span>
|
|
</label>
|
|
```
|
|
|
|
With:
|
|
```html
|
|
<div class="cross-drive-nightly">
|
|
<div class="cross-drive-nightly-status">
|
|
{{if .AppBackupEnabled}}
|
|
<span class="nightly-status-indicator nightly-enabled"></span>
|
|
{{else}}
|
|
<span class="nightly-status-indicator nightly-disabled"></span>
|
|
{{end}}
|
|
<span class="toggle-label">Napi mentésbe foglalás (restic, helyi)</span>
|
|
</div>
|
|
```
|
|
|
|
This replaces the disabled checkbox with a simple colored dot indicator — green if enabled, gray if not. Not clickable, not a checkbox, no confusing cursor.
|
|
|
|
**Add to `style.css`:**
|
|
|
|
```css
|
|
/* Nightly backup status indicator (non-interactive) */
|
|
.cross-drive-nightly-status {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
}
|
|
|
|
.nightly-status-indicator {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.nightly-enabled {
|
|
background: var(--green);
|
|
box-shadow: 0 0 4px rgba(35, 134, 54, 0.4);
|
|
}
|
|
|
|
.nightly-disabled {
|
|
background: var(--text-muted);
|
|
opacity: 0.5;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Fix 4: Progressive disclosure — disable config fields until enabled
|
|
|
|
**Problem:** Users see the destination/method/schedule dropdowns and might think the backup is already configured/active, even though the "Engedélyezve" checkbox is unchecked.
|
|
|
|
**Fix in `deploy.html` — add JS to toggle field states:**
|
|
|
|
Add `onchange` handler to the enabled checkbox and `disabled` attribute to the select fields:
|
|
|
|
```html
|
|
<div class="settings-row">
|
|
<span class="settings-label">Engedélyezve</span>
|
|
<label class="toggle" style="margin:0">
|
|
<input type="checkbox" name="cross_drive_enabled" id="cross-drive-enabled"
|
|
{{if and .CrossDriveConfig .CrossDriveConfig.Enabled}}checked{{end}}
|
|
onchange="toggleCrossDriveFields()">
|
|
<span class="toggle-label">Igen</span>
|
|
</label>
|
|
</div>
|
|
<div class="settings-row">
|
|
<span class="settings-label">Cél tárhely</span>
|
|
<select name="cross_drive_dest" id="cd-dest" class="form-control cross-drive-field" style="max-width:20rem"
|
|
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
|
|
...options...
|
|
</select>
|
|
</div>
|
|
<div class="settings-row">
|
|
<span class="settings-label">
|
|
Módszer
|
|
<span class="info-tooltip" tabindex="0">...</span>
|
|
</span>
|
|
<select name="cross_drive_method" id="cd-method" class="form-control cross-drive-field" style="max-width:20rem"
|
|
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
|
|
...options...
|
|
</select>
|
|
</div>
|
|
<div class="settings-row">
|
|
<span class="settings-label">Ütemezés</span>
|
|
<select name="cross_drive_schedule" id="cd-schedule" class="form-control cross-drive-field" style="max-width:20rem"
|
|
{{if not (and .CrossDriveConfig .CrossDriveConfig.Enabled)}}disabled{{end}}>
|
|
...options...
|
|
</select>
|
|
</div>
|
|
```
|
|
|
|
Add JS function (inside the existing `<script>` block at the bottom of deploy.html):
|
|
|
|
```javascript
|
|
function toggleCrossDriveFields() {
|
|
var enabled = document.getElementById('cross-drive-enabled').checked;
|
|
var fields = document.querySelectorAll('.cross-drive-field');
|
|
for (var i = 0; i < fields.length; i++) {
|
|
fields[i].disabled = !enabled;
|
|
}
|
|
}
|
|
```
|
|
|
|
**Important:** The `disabled` attribute prevents form submission of those fields. The backend handler for `POST /settings/cross-backup/{name}` must handle missing form values gracefully — if `cross_drive_enabled` is unchecked (not in form data), set `Enabled: false` and preserve existing dest/method/schedule values from settings (don't reset them to empty strings just because they weren't submitted).
|
|
|
|
Check `internal/web/handlers.go` (or `internal/api/router.go`) — the `saveCrossBackupConfig` handler. If it reads form values like:
|
|
```go
|
|
cfg.DestinationPath = req.FormValue("cross_drive_dest")
|
|
cfg.Method = req.FormValue("cross_drive_method")
|
|
```
|
|
|
|
Then when disabled fields aren't submitted, these would be empty strings. Fix: only update those fields if enabled is true, otherwise preserve existing config:
|
|
|
|
```go
|
|
enabled := req.FormValue("cross_drive_enabled") == "on"
|
|
|
|
// Load existing config to preserve values when disabled
|
|
existing := s.settings.GetCrossDriveConfig(name)
|
|
|
|
cfg := settings.CrossDriveBackup{
|
|
Enabled: enabled,
|
|
}
|
|
|
|
if enabled {
|
|
// Read from form
|
|
cfg.DestinationPath = req.FormValue("cross_drive_dest")
|
|
cfg.Method = req.FormValue("cross_drive_method")
|
|
cfg.Schedule = req.FormValue("cross_drive_schedule")
|
|
} else if existing != nil {
|
|
// Preserve existing settings when disabling
|
|
cfg.DestinationPath = existing.DestinationPath
|
|
cfg.Method = existing.Method
|
|
cfg.Schedule = existing.Schedule
|
|
}
|
|
|
|
// Always preserve runtime state
|
|
if existing != nil {
|
|
cfg.LastRun = existing.LastRun
|
|
cfg.LastStatus = existing.LastStatus
|
|
cfg.LastError = existing.LastError
|
|
cfg.LastDuration = existing.LastDuration
|
|
cfg.LastSizeHuman = existing.LastSizeHuman
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## Fix 5: Remove/reduce emojis
|
|
|
|
**Problem:** Too many emoji throughout the UI. Replace with text or CSS-styled elements.
|
|
|
|
### deploy.html changes:
|
|
|
|
| Location | Current | Replace with |
|
|
|----------|---------|-------------|
|
|
| Line ~16884 h4 | `🔒 Biztonsági mentés` | `Biztonsági mentés` |
|
|
| Line ~16902 warning | `⚠️ {{.BackupDestWarning}}` | `{{.BackupDestWarning}}` (the `.alert-warning` class already visually marks it as warning) |
|
|
| Line ~16964 status ok | `✅ Sikeres` | `Sikeres` |
|
|
| Line ~16964 status error | `❌ Hiba:` | `Hiba:` |
|
|
| Line ~16964 status running | `⏳ Fut...` | `Fut...` |
|
|
| Line ~16982 bottom hint | `⚠️ A cél meghajtó legyen...` | `A cél meghajtó legyen...` (already inside form-hint, visually distinct) |
|
|
| Stale data delete button | `🗑️ Korábbi adatok törlése` | `Korábbi adatok törlése` |
|
|
| Stale data h4 | `🗑️ Korábbi adatok` (if emoji present) | `Korábbi adatok` |
|
|
|
|
### backups.html cross-drive summary section changes:
|
|
|
|
| Location | Current | Replace with |
|
|
|----------|---------|-------------|
|
|
| Status ok badge | `✅ {{.LastRunShort}}` | `{{.LastRunShort}}` (use `.meta-badge-ok` class for green) |
|
|
| Status error badge | `❌ Hiba` | `Hiba` (use `.meta-badge-fail` class for red) |
|
|
| Running badge | `⏳ Fut...` | `Fut...` |
|
|
| Schedule badge | `⏰ {{.ScheduleLabel}}` | `{{.ScheduleLabel}}` |
|
|
| Unconfigured apps warning | `⚠️ {{len ...}}` | `{{len ...}}` (already in yellow-colored div) |
|
|
|
|
**Note:** The `.alert-warning` class already provides visual differentiation (yellow/orange background/border), and `.meta-badge-ok`/`.meta-badge-fail` provide green/red colors. Emojis are redundant with these CSS classes.
|
|
|
|
### Also check for any remaining emoji in:
|
|
- `stacks.html` — if any status emojis were left
|
|
- `backups.html` — the existing sections (db dumps, etc.)
|
|
|
|
---
|
|
|
|
## Fix 6 (bonus): "Automatikusan generálva" badge also uses emoji
|
|
|
|
In the auto-generated values section (line ~17031):
|
|
```html
|
|
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
|
|
```
|
|
|
|
This is fine — the checkmark (`✓`) is a Unicode character, not an emoji. Leave as-is.
|
|
|
|
---
|
|
|
|
## Summary of visual outcome
|
|
|
|
**Before (v0.11.8):**
|
|
- Disabled checkbox that looks clickable
|
|
- Pointer cursor on non-interactive label
|
|
- All form fields visible/enabled even when backup disabled
|
|
- Emoji scattered throughout
|
|
- No explanation of rsync vs restic
|
|
- Tight spacing between sections
|
|
|
|
**After (v0.11.9):**
|
|
- Clean green/gray dot indicator for nightly backup status
|
|
- Default cursor on non-interactive elements
|
|
- Dropdowns grayed out until "Engedélyezve" is checked → clear progressive disclosure
|
|
- No emoji — clean professional look using CSS classes for visual feedback
|
|
- Info tooltip on "Módszer" explaining both options clearly
|
|
- Proper spacing between all sections
|
|
- "Titkosított mentés" label better communicates restic's key advantage
|
|
|
|
## Testing
|
|
|
|
1. Visit deployed app page (e.g., `/stacks/immich/deploy`)
|
|
2. Verify spacing between all cards is consistent
|
|
3. Verify no emoji visible in the backup section
|
|
4. Verify nightly backup shows green dot (if enabled) or gray dot (if not)
|
|
5. Verify cursor doesn't change to pointer on the nightly status line
|
|
6. Uncheck "Engedélyezve" → dropdowns should become disabled/grayed
|
|
7. Check "Engedélyezve" → dropdowns should become active
|
|
8. Save with "Engedélyezve" unchecked → verify existing config preserved (check settings.json)
|
|
9. Hover/focus on the (i) icon next to "Módszer" → tooltip appears with explanation
|
|
10. Check backup page → no emoji in cross-drive summary section |