1 files changed, 72 insertions, 8 deletions

diff --git a/components/controls/StyledScrollBar.qml b/components/controls/StyledScrollBar.qml
index ea895ae..fc641b5 100644
--- a/components/controls/StyledScrollBar.qml
+++ b/components/controls/StyledScrollBar.qml
@@ -2,17 +2,47 @@ import ".."
 import qs.services
 import qs.config
 import QtQuick
-import QtQuick.Controls
+import QtQuick.Templates
 
 ScrollBar {
     id: root
 
-    leftPadding: 0
+    required property Flickable flickable
+    property bool shouldBeActive
+    property real nonAnimPosition
+    property bool animating
+
+    onHoveredChanged: {
+        if (hovered)
+            shouldBeActive = true;
+        else
+            shouldBeActive = flickable.moving;
+    }
+
+    onPositionChanged: {
+        if (position === nonAnimPosition)
+            animating = false;
+        else if (!animating)
+            nonAnimPosition = position;
+    }
+
+    position: nonAnimPosition
+    implicitWidth: Appearance.padding.small
 
     contentItem: StyledRect {
-        x: 0
-        implicitWidth: 6
-        opacity: root.pressed ? 1 : mouse.containsMouse ? 0.8 : root.policy === ScrollBar.AlwaysOn || (root.active && root.size < 1) ? 0.6 : 0
+        anchors.left: parent.left
+        anchors.right: parent.right
+        opacity: {
+            if (root.size === 1)
+                return 0;
+            if (fullMouse.pressed)
+                return 1;
+            if (mouse.containsMouse)
+                return 0.8;
+            if (root.policy === ScrollBar.AlwaysOn || root.shouldBeActive)
+                return 0.6;
+            return 0;
+        }
         radius: Appearance.rounding.full
         color: Colours.palette.m3secondary
 
@@ -30,15 +60,49 @@ ScrollBar {
         }
     }
 
+    Connections {
+        target: root.flickable
+
+        function onMovingChanged(): void {
+            if (root.flickable.moving)
+                root.shouldBeActive = true;
+            else
+                hideDelay.restart();
+        }
+    }
+
+    Timer {
+        id: hideDelay
+
+        interval: 600
+        onTriggered: root.shouldBeActive = root.flickable.moving || root.hovered
+    }
+
     CustomMouseArea {
-        z: -1
+        id: fullMouse
+
         anchors.fill: parent
+        preventStealing: true
+
+        onPressed: event => {
+            root.animating = true;
+            root.nonAnimPosition = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2));
+        }
+
+        onPositionChanged: event => root.nonAnimPosition = Math.max(0, Math.min(1 - root.size, event.y / root.height - root.size / 2))
 
         function onWheel(event: WheelEvent): void {
+            root.animating = true;
             if (event.angleDelta.y > 0)
-                root.decrease();
+                root.nonAnimPosition = Math.max(0, root.nonAnimPosition - 0.1);
             else if (event.angleDelta.y < 0)
-                root.increase();
+                root.nonAnimPosition = Math.min(1 - root.size, root.nonAnimPosition + 0.1);
         }
     }
+
+    Behavior on position {
+        enabled: !fullMouse.pressed
+
+        Anim {}
+    }
 }