From 42373baa03e95f2bfee4e0cf1201412fcc4297e3 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Sun, 30 Jul 2023 09:51:49 +0200
Subject: [PATCH] Client: Moved form units to tooltip

---
 .../src/components/printing/printingDialog.tsx  | 17 +++++++++++------
 .../printing/qrCodePrintingDialog.tsx           |  3 ++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/client/src/components/printing/printingDialog.tsx b/client/src/components/printing/printingDialog.tsx
index 45e2c54..a0df3af 100644
--- a/client/src/components/printing/printingDialog.tsx
+++ b/client/src/components/printing/printingDialog.tsx
@@ -203,47 +203,51 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
             labelCol={{ span: 14 }}
             wrapperCol={{ span: 10 }}
           >
-            <Form.Item label="Left Margin (mm)">
+            <Form.Item label="Left Margin">
               <Slider
                 min={0}
                 max={50}
+                tooltip={{ formatter: (value) => `${value} mm` }}
                 value={marginLeft}
                 onChange={(value) => {
                   setMarginLeft(value);
                 }}
               />
             </Form.Item>
-            <Form.Item label="Up Margin (mm)">
+            <Form.Item label="Top Margin">
               <Slider
                 min={0}
                 max={50}
+                tooltip={{ formatter: (value) => `${value} mm` }}
                 value={marginTop}
                 onChange={(value) => {
                   setMarginTop(value);
                 }}
               />
             </Form.Item>
-            <Form.Item label="Right Margin (mm)">
+            <Form.Item label="Right Margin">
               <Slider
                 min={0}
                 max={50}
+                tooltip={{ formatter: (value) => `${value} mm` }}
                 value={marginRight}
                 onChange={(value) => {
                   setMarginRight(value);
                 }}
               />
             </Form.Item>
-            <Form.Item label="Bottom Margin (mm)">
+            <Form.Item label="Bottom Margin">
               <Slider
                 min={0}
                 max={50}
+                tooltip={{ formatter: (value) => `${value} mm` }}
                 value={marginBottom}
                 onChange={(value) => {
                   setMarginBottom(value);
                 }}
               />
             </Form.Item>
-            <Form.Item label="Items per Row">
+            <Form.Item label="Columns">
               <Slider
                 min={1}
                 max={5}
@@ -265,10 +269,11 @@ const PrintingDialog: React.FC<PrintingDialogProps> = ({
                 ))}
               </Select>
             </Form.Item>
-            <Form.Item label="Row Height (mm)">
+            <Form.Item label="Row Height">
               <Slider
                 min={30}
                 max={200}
+                tooltip={{ formatter: (value) => `${value} mm` }}
                 value={rowHeight}
                 onChange={(value) => {
                   setRowHeight(value);
diff --git a/client/src/components/printing/qrCodePrintingDialog.tsx b/client/src/components/printing/qrCodePrintingDialog.tsx
index 13d6aac..0b72416 100644
--- a/client/src/components/printing/qrCodePrintingDialog.tsx
+++ b/client/src/components/printing/qrCodePrintingDialog.tsx
@@ -63,9 +63,10 @@ const QRCodePrintingDialog: React.FC<QRCodePrintingDialogProps> = ({
               onChange={(checked) => setShowContent(checked)}
             />
           </Form.Item>
-          <Form.Item label="Content Text Size (mm)">
+          <Form.Item label="Content Text Size">
             <Slider
               disabled={!showContent}
+              tooltip={{ formatter: (value) => `${value} mm` }}
               min={3}
               max={15}
               value={textSize}