diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 09db15b..713b4e2 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -123,7 +123,12 @@ "no": "No", "simple": "Simple", "withIcon": "With Icon" - } + }, + "qrCodePadding": "QR Code Padding", + "qrCodePaddingTooltip": "White space around the QR code for better scanning reliability", + "qrCodeMaxWidth": "QR Code Max Width", + "qrCodeMaxWidthTooltip": "Maximum width of QR code as percentage of label. Set to 0 for automatic sizing.", + "auto": "Auto" }, "spoolSelect": { "title": "Select Spools", diff --git a/client/src/pages/printing/printing.tsx b/client/src/pages/printing/printing.tsx index 9dd37a0..e3cbe89 100644 --- a/client/src/pages/printing/printing.tsx +++ b/client/src/pages/printing/printing.tsx @@ -22,6 +22,8 @@ export interface QRCodePrintSettings { showContent?: boolean; showQRCodeMode?: "no" | "simple" | "withIcon"; textSize?: number; + qrCodePadding?: number; // in mm, default 2 + qrCodeMaxWidth?: number; // percentage 0-100, 0 = no constraint (auto) printSettings: PrintSettings; } diff --git a/client/src/pages/printing/qrCodePrintingDialog.tsx b/client/src/pages/printing/qrCodePrintingDialog.tsx index bea241d..35eb779 100644 --- a/client/src/pages/printing/qrCodePrintingDialog.tsx +++ b/client/src/pages/printing/qrCodePrintingDialog.tsx @@ -41,6 +41,8 @@ const QRCodePrintingDialog: React.FC = ({ const showContent = printSettings?.showContent === undefined ? true : printSettings?.showContent; const showQRCodeMode = printSettings?.showQRCodeMode || "withIcon"; const textSize = printSettings?.textSize || 3; + const qrCodePadding = printSettings?.qrCodePadding ?? 2; + const qrCodeMaxWidth = printSettings?.qrCodeMaxWidth ?? 0; // 0 = auto (no constraint) const elements = items.map((item) => { return ( @@ -155,6 +157,73 @@ const QRCodePrintingDialog: React.FC = ({ + + + + `${value} mm` }} + min={0} + max={5} + value={qrCodePadding} + step={0.5} + onChange={(value) => { + printSettings.qrCodePadding = value; + setPrintSettings(printSettings); + }} + /> + + + { + printSettings.qrCodePadding = value ?? 2; + setPrintSettings(printSettings); + }} + /> + + + + + + + (value === 0 ? t("printing.qrcode.auto") : `${value}%`) }} + min={0} + max={100} + value={qrCodeMaxWidth} + step={5} + onChange={(value) => { + printSettings.qrCodeMaxWidth = value; + setPrintSettings(printSettings); + }} + /> + + + { + printSettings.qrCodeMaxWidth = value ?? 0; + setPrintSettings(printSettings); + }} + /> + + + {extraSettings} @@ -168,14 +237,15 @@ const QRCodePrintingDialog: React.FC = ({ } .print-page .print-qrcode-container { - max-width: ${showContent ? "50%" : "100%"}; + max-width: ${qrCodeMaxWidth > 0 ? `${qrCodeMaxWidth}%` : "fit-content"}; display: flex; + flex-shrink: 0; } .print-page .print-qrcode { width: auto !important; height: auto !important; - padding: 2mm; + padding: ${qrCodePadding}mm; } .print-page .print-qrcode-title {