From 2c47c5d052e3ac8a24166e34b9adf8777c19c205 Mon Sep 17 00:00:00 2001
From: rouggy <legreg002@hotmail.com>
Date: Tue, 7 Jul 2026 21:46:52 +0200
Subject: [PATCH] feat: Added additional settings in QSL Design on QSO box
 (opacity, bg color...)

---
 frontend/src/components/qsl/EditorPanel.tsx | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/frontend/src/components/qsl/EditorPanel.tsx b/frontend/src/components/qsl/EditorPanel.tsx
index c95bfd3..5632568 100644
--- a/frontend/src/components/qsl/EditorPanel.tsx
+++ b/frontend/src/components/qsl/EditorPanel.tsx
@@ -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}