fix: use even spacing to avoid gaps if unified widgets feature is used

closes: #122

Author: luisbocanegra

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
 }

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
+
             }
         }
     }

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
         }

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
     }