From 11f6475b9f8282edf96634ba582399b48b45e336 Mon Sep 17 00:00:00 2001
From: Ly-sec <itslysec@gmail.com>
Date: Sun, 14 Sep 2025 21:24:11 +0200
Subject: [PATCH] Some layout fixes to toggle and slider NSlider(withLabel):
 fix some small layout issues NToggle: fix vertical centering of the thumb

---
 Widgets/NSlider.qml          | 18 +++--------
 Widgets/NSliderWithLabel.qml | 61 ++++++++++++++++++++++++++++++++++++
 Widgets/NToggle.qml          |  1 +
 3 files changed, 66 insertions(+), 14 deletions(-)
 create mode 100644 Widgets/NSliderWithLabel.qml

diff --git a/Widgets/NSlider.qml b/Widgets/NSlider.qml
index b48eb17..a1c50d0 100644
--- a/Widgets/NSlider.qml
+++ b/Widgets/NSlider.qml
@@ -44,29 +44,18 @@ Slider {
       height: knobDiameter + cutoutExtra
       radius: width / 2
       color: root.cutoutColor !== undefined ? root.cutoutColor : Color.mSurface
-      x: Math.max(0, Math.min(parent.width - width, root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2))
+      x: Math.max(0, Math.min(parent.width - width, Math.round(root.visualPosition * (parent.width - root.knobDiameter) - cutoutExtra / 2)))
       y: (parent.height - height) / 2
+      anchors.verticalCenter: parent.verticalCenter
     }
   }
 
   handle: Item {
     width: knob.implicitWidth
     height: knob.implicitHeight
-    x: root.leftPadding + root.visualPosition * (root.availableWidth - width)
+    x: root.leftPadding + Math.round(root.visualPosition * (root.availableWidth - width))
     y: root.topPadding + root.availableHeight / 2 - height / 2
 
-    // Subtle shadow for a more polished look
-    MultiEffect {
-      anchors.fill: knob
-      source: knob
-      shadowEnabled: true
-      shadowColor: Color.mShadow
-      shadowOpacity: 0.25
-      shadowHorizontalOffset: 0
-      shadowVerticalOffset: 1
-      shadowBlur: 8
-    }
-
     Rectangle {
       id: knob
       implicitWidth: knobDiameter
@@ -75,6 +64,7 @@ Slider {
       color: root.pressed ? Color.mTertiary : Color.mSurface
       border.color: Color.mPrimary
       border.width: Math.max(1, Style.borderL * scaling)
+      anchors.centerIn: parent
 
       Behavior on color {
         ColorAnimation {
diff --git a/Widgets/NSliderWithLabel.qml b/Widgets/NSliderWithLabel.qml
new file mode 100644
index 0000000..eaa9dc1
--- /dev/null
+++ b/Widgets/NSliderWithLabel.qml
@@ -0,0 +1,61 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+import qs.Commons
+import qs.Services
+import qs.Widgets
+
+RowLayout {
+  id: root
+
+  // Properties that mirror NSlider
+  property real from: 0
+  property real to: 1
+  property real value: 0
+  property real stepSize: 0.01
+  property var cutoutColor
+  property bool snapAlways: true
+  property real heightRatio: 0.75
+  property bool showPercentage: true
+  property string suffix: "%"
+  property int decimalPlaces: 0 // 0 for integers, 1 for one decimal place, etc.
+
+  // Signals
+  signal moved(real value)
+  signal pressedChanged(bool pressed)
+
+  spacing: Style.marginS * scaling
+
+  NSlider {
+    id: slider
+    Layout.fillWidth: true
+    from: root.from
+    to: root.to
+    value: root.value
+    stepSize: root.stepSize
+    cutoutColor: root.cutoutColor
+    snapAlways: root.snapAlways
+    heightRatio: root.heightRatio
+    stableWidth: true
+    minWidth: 200 * scaling
+
+    onMoved: root.moved(value)
+    onPressedChanged: root.pressedChanged(pressed)
+  }
+
+  NText {
+    id: percentageLabel
+    visible: root.showPercentage
+    text: {
+      if (root.decimalPlaces === 0) {
+        return Math.round(slider.value * 100) + root.suffix
+      } else {
+        return (slider.value * 100).toFixed(root.decimalPlaces) + root.suffix
+      }
+    }
+    Layout.alignment: Qt.AlignVCenter
+    Layout.leftMargin: Style.marginS * scaling
+    Layout.preferredWidth: 50 * scaling
+    horizontalAlignment: Text.AlignRight
+  }
+}
diff --git a/Widgets/NToggle.qml b/Widgets/NToggle.qml
index 36e1678..1381213 100644
--- a/Widgets/NToggle.qml
+++ b/Widgets/NToggle.qml
@@ -54,6 +54,7 @@ RowLayout {
       border.color: root.checked ? Color.mSurface : Color.mSurface
       border.width: Math.max(1, Style.borderM * scaling)
       anchors.verticalCenter: parent.verticalCenter
+      anchors.verticalCenterOffset: 0
       x: root.checked ? switcher.width - width - 3 * scaling : 3 * scaling
 
       Behavior on x {