qml: determine resize handle width according to scroll bar width

Resize handle may overlap the scroll bar. In that case, using
scroll bar may be impossible because the resize handle might
have a width that is larger than the width of the scroll bar.

Since scroll bar is not customized, we have no control over
the width of the scroll bar. Therefore, in this patch it is
proposed to set the width of resize handle to half of the
scroll bar's width. This makes both scrolling and resizing
feasible.

modules/gui/qt/style/VLCStyle.qml

@@ -17,6 +17,7 @@
  *****************************************************************************/
 pragma Singleton
 import QtQuick
+import QtQuick.Controls
 import org.videolan.vlc 0.1
 
 QtObject {
@@ -55,6 +56,9 @@ QtObject {
     readonly property double margin_xlarge: MainCtx.dp(32, scale);
     readonly property double margin_xxlarge: MainCtx.dp(36, scale);
 
+    property Component _scrollBarComponent: ScrollBar { }
+    property real resizeHandleWidth
+
     // Borders
     readonly property int border: MainCtx.dp(1, scale)
     readonly property int focus_border: border
@@ -326,4 +330,16 @@ QtObject {
         return Math.floor((width + column_spacing) / (column_width + column_spacing))
     }
 
+    Component.onCompleted: {
+        {
+            // Resize handle width setting:
+            const scrollBarObject = _scrollBarComponent.createObject()
+            console.assert(scrollBarObject)
+            const scrollBarWidth = scrollBarObject.width
+            scrollBarObject.destroy()
+
+            _scrollBarComponent = null
+            resizeHandleWidth = (scrollBarWidth / 2)
+        }
+    }
 }

modules/gui/qt/widgets/qml/HorizontalResizeHandle.qml

@@ -39,7 +39,7 @@ MouseArea {
     property int _previousX
 
     cursorShape: Qt.SplitHCursor
-    width: VLCStyle.dp(8, VLCStyle.scale)
+    width: VLCStyle.resizeHandleWidth
     acceptedButtons: Qt.LeftButton
 
     onPressed: (mouse) => {