add scroll edge fade to some scrolled windows

2025-09-23 11:14:34 +02:00
parent 2b47083c12
commit fc9bda9f7f
8 changed files with 178 additions and 93 deletions
@@ -0,0 +1,59 @@
+import QtQuick
+import qs.modules.common
+import qs.modules.common.functions
+
+Item {
+    id: root
+    z: 99
+    required property Item target
+    property real fadeSize: Appearance.m3colors.darkmode ? 40 : 20
+    property color color: ColorUtils.transparentize(Appearance.colors.colShadow, Appearance.m3colors.darkmode ? 0 : 0.7)
+    property bool vertical: true
+
+    anchors.fill: target
+
+    EndGradient {
+        anchors {
+            top: parent.top
+            left: parent.left
+            right: vertical ? parent.right : undefined
+            bottom: vertical ? undefined : parent.bottom
+        }
+        shown: !(root.vertical ? root.target.atYBeginning : root.target.atXBeginning)
+    }
+
+    EndGradient {
+        anchors {
+            bottom: parent.bottom
+            right: parent.right
+            left: vertical ? parent.left : undefined
+            top: vertical ? undefined : parent.top
+        }
+        shown: !(root.vertical ? root.target.atYEnd : root.target.atXEnd)
+        rotation: 180
+    }
+
+    component EndGradient: Rectangle {
+        required property bool shown
+        height: vertical ? root.fadeSize : parent.height
+        width: vertical ? parent.width : root.fadeSize
+
+        opacity: shown ? 1 : 0
+        visible: opacity > 0
+        Behavior on opacity {
+            animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
+        }
+
+        gradient: Gradient {
+            orientation: root.vertical ? Gradient.Vertical : Gradient.Horizontal
+            GradientStop {
+                position: 0.0
+                color: root.color
+            }
+            GradientStop {
+                position: 1.0
+                color: ColorUtils.transparentize(root.color)
+            }
+        }
+    }
+}