https://trello.com/c/GZwvrma5/55-scrollable-lists-should-have-scrollbars-that-come-into-view-when-hovering-over-that-area-the-extreme-right-of-the-list

2 files changed, 42 insertions, 45 deletions

diff --git a/components/DatePicker.qml b/components/DatePicker.qml
index 1f9d8f80..6a56f58d 100644
--- a/components/DatePicker.qml
+++ b/components/DatePicker.qml
@@ -179,22 +179,6 @@ Item {
                 }
             }
         }
-
-//        Rectangle {
-//            anchors.left: parent.left
-//            anchors.bottom: parent.bottom
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//            visible: datePicker.expanded
-//        }
-
-//        Rectangle {
-//            anchors.right: parent.right
-//            anchors.bottom: parent.bottom
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//            visible: datePicker.expanded
-//        }
     }
 
     Rectangle {
@@ -223,20 +207,6 @@ Item {
             height: 1
         }
 
-//        Rectangle {
-//            anchors.left: parent.left
-//            anchors.top: parent.top
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//        }
-
-//        Rectangle {
-//            anchors.right: parent.right
-//            anchors.top: parent.top
-//            height: 3; width: 3
-//            color: "#FFFFFF"
-//        }
-
         Calendar {
             id: calendar
             anchors.left: parent.left
diff --git a/components/Scroll.qml b/components/Scroll.qml
index f0a3027e..25aeee8d 100644
--- a/components/Scroll.qml
+++ b/components/Scroll.qml
@@ -1,29 +1,56 @@
 import QtQuick 2.0
 
-Rectangle {
+Item {
+    id: scrollItem
     property var flickable
-    property int yPos: 0
+    width: 15
+    z: 1
 
     function flickableContentYChanged() {
         if(flickable === undefined)
             return
 
-        var t = flickable.height - height
-        y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t + yPos
+        var t = flickable.height - scroll.height
+        scroll.y = (flickable.contentY / (flickable.contentHeight - flickable.height)) * t
     }
 
-    width: 15
-    height: {
-        var t = (flickable.height * flickable.height) / flickable.contentHeight
-        return t < 20 ? 20 : t
+    MouseArea {
+        id: scrollArea
+        anchors.fill: parent
+        hoverEnabled: true
     }
-    z: 1; y: yPos
-    color: "#DBDBDB"
-    anchors.right: flickable.right
-    opacity: flickable.moving ? 0.5 : 0
-    visible: flickable.contentHeight > flickable.height
 
-    Behavior on opacity {
-        NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+    Rectangle {
+        id: scroll
+
+        width: 15
+        height: {
+            var t = (flickable.height * flickable.height) / flickable.contentHeight
+            return t < 20 ? 20 : t
+        }
+        y: 0; x: 0
+        color: "#DBDBDB"
+        opacity: flickable.moving || handleArea.pressed || scrollArea.containsMouse ? 0.5 : 0
+        visible: flickable.contentHeight > flickable.height
+
+        Behavior on opacity {
+            NumberAnimation { duration: 100; easing.type: Easing.InQuad }
+        }
+
+        MouseArea {
+            id: handleArea
+            anchors.fill: parent
+            drag.target: scroll
+            drag.axis: Drag.YAxis
+            drag.minimumY: 0
+            drag.maximumY: flickable.height - height
+            propagateComposedEvents: true
+
+            onPositionChanged: {
+                if(!pressed) return
+                var dy = scroll.y / (flickable.height - scroll.height)
+                flickable.contentY = (flickable.contentHeight - flickable.height) * dy
+            }
+        }
     }
 }