From 80fd94a0736ac9bc0e7278e1558ff83407556070 Mon Sep 17 00:00:00 2001
From: AmirHossein Abdolmotallebi <amir.a1376@gmail.com>
Date: Mon, 2 Dec 2024 04:30:01 +0330
Subject: [PATCH] add scroll fade

---
 .../desktop/pages/home/Actions.kt             | 30 ++++---
 .../utils/compose/widget/ScrolFade.kt         | 84 +++++++++++++++++++
 2 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 shared/app-utils/src/main/kotlin/com/abdownloadmanager/utils/compose/widget/ScrolFade.kt

diff --git a/desktop/app/src/main/kotlin/com/abdownloadmanager/desktop/pages/home/Actions.kt b/desktop/app/src/main/kotlin/com/abdownloadmanager/desktop/pages/home/Actions.kt
index 815c398..51fd32e 100644
--- a/desktop/app/src/main/kotlin/com/abdownloadmanager/desktop/pages/home/Actions.kt
+++ b/desktop/app/src/main/kotlin/com/abdownloadmanager/desktop/pages/home/Actions.kt
@@ -11,13 +11,18 @@ import com.abdownloadmanager.utils.compose.WithContentColor
 import ir.amirab.util.compose.action.MenuItem
 import com.abdownloadmanager.desktop.utils.div
 import androidx.compose.foundation.*
+import androidx.compose.foundation.gestures.Orientation
 import androidx.compose.foundation.layout.*
 import com.abdownloadmanager.desktop.ui.widget.Text
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
+import com.abdownloadmanager.utils.compose.widget.ScrollFade
+import org.http4k.routing.inspect.BackgroundColour
 
 @Composable
 fun Actions(list: List<MenuItem>) {
@@ -31,12 +36,13 @@ fun Actions(list: List<MenuItem>) {
             for (a in list) {
                 when (a) {
                     MenuItem.Separator -> {
-                        Spacer(Modifier
-                            .padding(horizontal = 4.dp)
-                            .fillMaxHeight()
-                            .padding(vertical = 4.dp)
-                            .width(1.dp)
-                            .background(myColors.onBackground / 5)
+                        Spacer(
+                            Modifier
+                                .padding(horizontal = 4.dp)
+                                .fillMaxHeight()
+                                .padding(vertical = 4.dp)
+                                .width(1.dp)
+                                .background(myColors.onBackground / 5)
                         )
                     }
 
@@ -50,13 +56,11 @@ fun Actions(list: List<MenuItem>) {
                 }
             }
         }
-        val adapter = rememberScrollbarAdapter(scrollState)
-        HorizontalScrollbar(
-            modifier = Modifier
-                .align(Alignment.TopCenter)
-                .fillMaxWidth(),
-
-            adapter = adapter
+        ScrollFade(
+            scrollState,
+            Orientation.Horizontal,
+            gradientLength = 0.2f,
+            targetBackground = myColors.background / 0.8f
         )
     }
 }
diff --git a/shared/app-utils/src/main/kotlin/com/abdownloadmanager/utils/compose/widget/ScrolFade.kt b/shared/app-utils/src/main/kotlin/com/abdownloadmanager/utils/compose/widget/ScrolFade.kt
new file mode 100644
index 0000000..fe6d530
--- /dev/null
+++ b/shared/app-utils/src/main/kotlin/com/abdownloadmanager/utils/compose/widget/ScrolFade.kt
@@ -0,0 +1,84 @@
+package com.abdownloadmanager.utils.compose.widget
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ScrollState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.Orientation
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+
+@Composable
+fun BoxScope.ScrollFade(
+    scrollState: ScrollState,
+    orientation: Orientation,
+    gradientLength: Float = 0.2f, // 0f .. 1f
+    targetBackground: Color,
+) {
+    AnimatedVisibility(
+        scrollState.canScrollBackward,
+        modifier = Modifier.matchParentSize(),
+        enter = fadeIn(),
+        exit = fadeOut(),
+    ) {
+        Spacer(
+            Modifier
+                .fillMaxSize()
+                .background(
+                    Brush.gradientOrientation(
+                        colorStops = arrayOf(
+                            0f to targetBackground,
+                            gradientLength to Color.Transparent,
+                            1f to Color.Transparent,
+                        ),
+                        orientation = orientation,
+                    )
+                )
+        )
+    }
+    AnimatedVisibility(
+        scrollState.canScrollForward,
+        modifier = Modifier.matchParentSize(),
+        enter = fadeIn(),
+        exit = fadeOut(),
+    ) {
+        Spacer(
+            Modifier
+                .fillMaxSize()
+                .background(
+                    Brush.gradientOrientation(
+                        colorStops = arrayOf(
+                            0f to Color.Transparent,
+                            (1 - gradientLength) to Color.Transparent,
+                            1f to targetBackground,
+                        ),
+                        orientation = orientation,
+                    )
+                )
+        )
+    }
+}
+
+private fun Brush.Companion.gradientOrientation(
+    vararg colorStops: Pair<Float, Color>,
+    orientation: Orientation,
+): Brush {
+    return when (orientation) {
+        Orientation.Vertical -> Brush.verticalGradient(
+            colorStops = colorStops
+        )
+
+        Orientation.Horizontal -> {
+            Brush.horizontalGradient(
+                colorStops = colorStops
+            )
+        }
+    }
+}