From 457e5fe4af51a0c32a0b81b86fd2f9ebdce7d32d Mon Sep 17 00:00:00 2001
From: Stefan <stefand@status.im>
Date: Wed, 11 May 2022 12:15:48 +0300
Subject: [PATCH] fix(StatusSlider): improve handle draging area

Issues
- The slider only handle mouse events in its own control space.
- In oder to use the entire area it needs to be centered.

Fixes

- Center the content vertically (handle and slider bar)
- Height and implicitHeight defaults to heigh of the handle
- Add note to create awareness about the mouse handling requirements
---
 src/StatusQ/Components/StatusImageCropPanel.qml |  1 -
 src/StatusQ/Controls/StatusSlider.qml           | 11 ++++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/StatusQ/Components/StatusImageCropPanel.qml b/src/StatusQ/Components/StatusImageCropPanel.qml
index d8b31af9..e0431148 100644
--- a/src/StatusQ/Components/StatusImageCropPanel.qml
+++ b/src/StatusQ/Components/StatusImageCropPanel.qml
@@ -257,7 +257,6 @@ Item {
             }
             StatusSlider {
                 Layout.fillWidth: true
-                Layout.preferredHeight: 5
                 Layout.topMargin: 20
                 Layout.bottomMargin: 25
                 Layout.alignment: Qt.AlignVCenter
diff --git a/src/StatusQ/Controls/StatusSlider.qml b/src/StatusQ/Controls/StatusSlider.qml
index 340c6894..2d820a09 100644
--- a/src/StatusQ/Controls/StatusSlider.qml
+++ b/src/StatusQ/Controls/StatusSlider.qml
@@ -6,19 +6,28 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
+/*!
+  /note beware, the slider processes the mouse events only in its control space. So it must be at least as high
+  as the /c handle so user can grab it fully.
+ */
 Slider {
     id: statusSlider
 
     implicitWidth: 360
-    implicitHeight: 4
+    implicitHeight: Math.max(handle.implicitHeight, background.implicitHeight)
 
     leftPadding: 0
 
     background: Rectangle {
         id: bgRect
+
+        x: statusSlider.leftPadding
+        y: statusSlider.topPadding + statusSlider.availableHeight / 2 - height / 2
         implicitWidth: 100
         implicitHeight: 4
+        width: statusSlider.availableWidth
         height: implicitHeight
+
         color: {
             if (statusSlider.value === statusSlider.to) {
                 return Theme.palette.primaryColor1