From 10c3aa4345bcd2f7227db5b8ecd8657a4ada2ea8 Mon Sep 17 00:00:00 2001
From: Luis Bocanegra <luisbocanegra@users.noreply.github.com>
Date: Wed, 8 Jan 2025 00:49:35 -0600
Subject: [PATCH] fix: use even spacing to avoid gaps if unified widgets
 feature is used

closes: https://github.com/luisbocanegra/plasma-panel-colorizer/issues/122
---
 package/contents/ui/code/utils.js             |  4 +++
 .../ui/components/FormWidgetSettings.qml      | 34 +++++++++++++------
 .../contents/ui/configUnifiedBackground.qml   |  2 +-
 package/contents/ui/main.qml                  | 19 +++++++----
 4 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/package/contents/ui/code/utils.js b/package/contents/ui/code/utils.js
index aedc6cd..b976836 100644
--- a/package/contents/ui/code/utils.js
+++ b/package/contents/ui/code/utils.js
@@ -490,4 +490,8 @@ function clearOldWidgetConfig(config) {
 function getWidgetConfigIdx(id, name, config) {
   // console.log("getWidgetConfigIdx()")
   return config.findIndex((item) => item.id == id && item.name == name)
+}
+
+function makeEven(n) {
+  return n - n % 2
 }
\ No newline at end of file
diff --git a/package/contents/ui/components/FormWidgetSettings.qml b/package/contents/ui/components/FormWidgetSettings.qml
index ffdfea1..7b1c235 100644
--- a/package/contents/ui/components/FormWidgetSettings.qml
+++ b/package/contents/ui/components/FormWidgetSettings.qml
@@ -209,18 +209,30 @@ ColumnLayout {
         twinFormLayouts: parentLayout
         Layout.fillWidth: true
 
-        SpinBox {
+        RowLayout {
             Kirigami.FormData.label: i18n("Spacing:")
-            id: spacingCheckbox
-            value: configLocal.spacing || 0
-            from: 0
-            to: 999
-            visible: keyName === "widgets" && currentTab === 1
-            enabled: visible
-            onValueModified: {
-                if (!enabled) return
-                configLocal.spacing = value
-                updateConfig()
+            SpinBox {
+                id: spacingCheckbox
+                value: configLocal.spacing || 0
+                from: 0
+                to: 999
+                visible: keyName === "widgets" && currentTab === 1
+                enabled: visible
+                onValueModified: {
+                    if (!enabled) return
+                    configLocal.spacing = value
+                    updateConfig()
+                }
+            }
+
+            Button {
+                visible: spacingCheckbox.value % 2 !== 0 && spacingCheckbox.visible
+                icon.name: "dialog-warning-symbolic"
+                ToolTip.text: i18n("<strong>Odd</strong> values are automatically converted to <strong>evens</strong> if <strong>Unified Background</strong> feature is used.")
+                highlighted: true
+                hoverEnabled: true
+                ToolTip.visible: hovered
+
             }
         }
     }
diff --git a/package/contents/ui/configUnifiedBackground.qml b/package/contents/ui/configUnifiedBackground.qml
index 8300dd8..9203815 100644
--- a/package/contents/ui/configUnifiedBackground.qml
+++ b/package/contents/ui/configUnifiedBackground.qml
@@ -108,7 +108,7 @@ KCM.SimpleKCM {
     Kirigami.FormLayout {
         Kirigami.InlineMessage {
             Layout.fillWidth: true
-            text: i18n("Select start and end of unified background areas, widgets between <b>Start</b> and <b>End</b> must be left Disabled.")
+            text: i18n("Select start and end of unified background areas, widgets between <b>Start</b> and <b>End</b> must be left <b>disabled</b>. Note: <strong>odd</strong> widget spacing values are automatically converted to <strong>evens</strong> when this feature is used.")
             visible: true
             type: Kirigami.MessageType.Information
         }
diff --git a/package/contents/ui/main.qml b/package/contents/ui/main.qml
index 7676c35..31141c5 100644
--- a/package/contents/ui/main.qml
+++ b/package/contents/ui/main.qml
@@ -119,6 +119,13 @@ PlasmoidItem {
         }
     }
     property var widgetSettings: cfg.widgets
+    property var widgetsSpacing: {
+        if (true) {
+            return Utils.makeEven(widgetSettings?.spacing ?? 4)
+        } else {
+            return widgetSettings?.spacing ?? 4
+        }
+    }
     property var panelSettings: cfg.panel
     property var stockPanelSettings: cfg.stockPanelSettings
     property var trayWidgetSettings: cfg.trayWidgets
@@ -507,10 +514,10 @@ PlasmoidItem {
         anchors.centerIn: (isTray || isTrayArrow) ? parent : undefined
         anchors.fill: (isPanel ||isTray || isTrayArrow) ? parent : undefined
 
-        property int extraLSpacing: ((unifyBgType === 2 || unifyBgType === 3) && horizontal ? widgetSettings.spacing : 0) / 2
-        property int extraRSpacing: ((unifyBgType === 1 || unifyBgType === 2) && horizontal ? widgetSettings.spacing : 0) / 2
-        property int extraTSpacing: ((unifyBgType === 2 || unifyBgType === 3) && !horizontal ? widgetSettings.spacing : 0) / 2
-        property int extraBSpacing: ((unifyBgType === 1 || unifyBgType === 2) && !horizontal ? widgetSettings.spacing : 0) / 2
+        property int extraLSpacing: ((unifyBgType === 2 || unifyBgType === 3) && horizontal ? widgetsSpacing : 0) / 2
+        property int extraRSpacing: ((unifyBgType === 1 || unifyBgType === 2) && horizontal ? widgetsSpacing : 0) / 2
+        property int extraTSpacing: ((unifyBgType === 2 || unifyBgType === 3) && !horizontal ? widgetsSpacing : 0) / 2
+        property int extraBSpacing: ((unifyBgType === 1 || unifyBgType === 2) && !horizontal ? widgetsSpacing : 0) / 2
 
         property int marginLeft: (marginEnabled ? cfg.margin.side.left : 0)
             + extraLSpacing
@@ -1074,14 +1081,14 @@ PlasmoidItem {
     Binding {
         target: panelLayout
         property: "columnSpacing"
-        value: widgetSettings.spacing
+        value: widgetsSpacing
         when: !editMode
     }
 
     Binding {
         target: panelLayout
         property: "rowSpacing"
-        value: widgetSettings.spacing
+        value: widgetsSpacing
         when: !editMode
     }