Material: tweak ScrollBar looks and behavior

Model the Material style scroll bar after the Chrome OS scroll bar.
This adds a hover effect, and makes the transient timeout much longer
to make the scroll bars easier to use on desktop.

Task-number: QTBUG-50003
Change-Id: I5b1798e6c6b04482eab21d56e48935e2a9c69250
Reviewed-by: Mitch Curtis <mitch.curtis@qt.io>

1 files changed, 26 insertions, 16 deletions

diff --git a/src/imports/controls/material/ScrollBar.qml b/src/imports/controls/material/ScrollBar.qml
index 202c234b..9252350b 100644
--- a/src/imports/controls/material/ScrollBar.qml
+++ b/src/imports/controls/material/ScrollBar.qml
@@ -46,33 +46,43 @@ T.ScrollBar {
     implicitHeight: Math.max(background ? background.implicitHeight : 0,
                              contentItem.implicitHeight + topPadding + bottomPadding)
 
-    padding: 2
-    topPadding: padding + (control.orientation === Qt.Horizontal ? 12 : 0)
-    leftPadding: padding + (control.orientation === Qt.Vertical && !control.mirrored ? 12 : 0)
-    rightPadding: padding + (control.orientation === Qt.Vertical && control.mirrored ? 12 : 0)
+    padding: 1
 
     contentItem: Rectangle {
         id: handle
 
-        implicitWidth: 4
-        implicitHeight: 4
+        implicitWidth: 13
+        implicitHeight: 13
 
-        color: control.pressed ? control.Material.scrollBarPressedColor : control.Material.scrollBarColor
+        color: control.pressed ? control.Material.scrollBarPressedColor :
+               control.hovered ? control.Material.scrollBarHoveredColor : control.Material.scrollBarColor
         visible: control.size < 1.0
         opacity: 0.0
+    }
 
-        states: State {
-            name: "active"
-            when: control.active
-            PropertyChanges { target: handle; opacity: 0.75 }
-        }
+    background: Rectangle {
+        implicitWidth: 16
+        implicitHeight: 16
+        color: "#0e000000"
+        opacity: 0.0
+    }
 
-        transitions: Transition {
+    states: State {
+        name: "active"
+        when: control.active
+    }
+
+    transitions: [
+        Transition {
+            to: "active"
+            NumberAnimation { targets: [contentItem, background]; property: "opacity"; to: 1.0 }
+        },
+        Transition {
             from: "active"
             SequentialAnimation {
-                PauseAnimation { duration: 450 }
-                NumberAnimation { target: handle; duration: 200; property: "opacity"; to: 0.0 }
+                PauseAnimation { duration: 2450 }
+                NumberAnimation { targets: [contentItem, background]; property: "opacity"; to: 0.0 }
             }
         }
-    }
+    ]
 }