rouggy/OpsLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

feat: Added additional settings in QSL Design on QSO box (opacity, bg color...)

Browse Source
This commit is contained in:
rouggy
2026-07-07 21:46:52 +02:00
parent 446888a330
commit 2c47c5d052
1 changed files with 19 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/qsl/EditorPanel.tsx
+19
View File
@@ -170,6 +170,25 @@ export function EditorPanel({ template, sel, presets, fontFamilies, onPatchEleme
onChange={(w) => onPatchBox({ w })} />
<NumberField label="Height" value={box.h} min={120} max={500}
onChange={(h) => onPatchBox({ h })} />
<NumberField label="Opacity %" value={Math.round((box.bg_opacity ?? 1) * 100)} min={0} max={100}
onChange={(v) => onPatchBox({ bg_opacity: Math.max(0, Math.min(100, v)) / 100 })} />
<div className="flex items-center justify-between gap-2">
<Label className="text-xs text-muted-foreground">Background</Label>
<div className="flex items-center gap-2">
<input type="color" className="h-7 w-9 cursor-pointer rounded border border-border bg-transparent p-0"
value={/^#[0-9a-fA-F]{6}$/.test(box.bg ?? '') ? box.bg : '#000000'}
onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
<Input className="h-7 w-32 font-mono text-xs" value={box.bg ?? ''}
onChange={(ev) => onPatchBox({ bg: ev.target.value })} />
</div>
</div>
<NumberField label="Corner radius" value={box.radius ?? 0} min={0} max={80}
onChange={(radius) => onPatchBox({ radius })} />
<div className="flex items-center justify-between gap-2">
<Label className="text-xs text-muted-foreground">Title</Label>
<Input className="h-7 w-44 font-mono text-xs" value={box.title ?? ''}
onChange={(ev) => onPatchBox({ title: ev.target.value })} />
</div>
<div className="flex items-center justify-between gap-2">
<Label className="text-xs text-muted-foreground">Footer</Label>
<Input className="h-7 w-44 font-mono text-xs" value={box.footer}