refactor(ui): add fade edge effect to scrollable lists

Author: MovTery

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/components/Dialogs.kt

@@ -14,6 +14,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
@@ -73,7 +74,12 @@ fun SimpleAlertDialog(
             )
         },
         text = {
-            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+            val scrollState = rememberScrollState()
+            Column(
+                modifier = Modifier
+                    .fadeEdge(state = scrollState)
+                    .verticalScroll(state = scrollState)
+            ) {
                 Text(text = text)
             }
         },
@@ -113,7 +119,12 @@ fun SimpleAlertDialog(
             )
         },
         text = {
-            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+            val scrollState = rememberScrollState()
+            Column(
+                modifier = Modifier
+                    .fadeEdge(state = scrollState)
+                    .verticalScroll(state = scrollState)
+            ) {
                 Text(text = text)
             }
         },
@@ -144,7 +155,12 @@ fun SimpleAlertDialog(
             )
         },
         text = {
-            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+            val scrollState = rememberScrollState()
+            Column(
+                modifier = Modifier
+                    .fadeEdge(state = scrollState)
+                    .verticalScroll(state = scrollState)
+            ) {
                 text()
             }
         },
@@ -305,10 +321,12 @@ private fun simpleEditDialogBody(
         style = MaterialTheme.typography.titleMedium
     )
 
+    val scrollState = rememberScrollState()
     Column(
         modifier = Modifier
+            .fadeEdge(state = scrollState)
             .weight(1f, fill = false)
-            .verticalScroll(rememberScrollState())
+            .verticalScroll(state = scrollState)
             .fillMaxWidth(),
         horizontalAlignment = Alignment.CenterHorizontally
     ) {
@@ -440,8 +458,13 @@ fun <T> SimpleListDialog(
                         style = MaterialTheme.typography.titleMedium
                     )
                     Spacer(modifier = Modifier.size(16.dp))
+
+                    val state = rememberLazyListState()
                     LazyColumn(
-                        modifier = Modifier.weight(1f, fill = false)
+                        modifier = Modifier
+                            .fadeEdge(state = state)
+                            .weight(1f, fill = false),
+                        state = state
                     ) {
                         items(items) { item ->
                             SimpleListItem(

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/AccountManageScreen.kt

@@ -141,7 +141,7 @@ fun AccountManageScreen(
                 modifier = Modifier
                     .fillMaxHeight()
                     .padding(all = 12.dp)
-                    .weight(2.5f),
+                    .weight(3f),
                 updateMicrosoftOperation = { microsoftLoginOperation = it },
                 updateLocalLoginOperation = { localLoginOperation = it },
                 updateOtherLoginOperation = { otherLoginOperation = it },
@@ -152,7 +152,7 @@ fun AccountManageScreen(
                 modifier = Modifier
                     .fillMaxHeight()
                     .padding(top = 12.dp, end = 12.dp, bottom = 12.dp)
-                    .weight(7.5f),
+                    .weight(7f),
                 submitError = submitError,
                 onMicrosoftChangeSkin = { account, result ->
                     microsoftChangeSkinOperation = MicrosoftChangeSkinOperation.ImportFile(account, result)
@@ -234,55 +234,50 @@ private fun ServerTypeMenu(
     Card(
         modifier = modifier
             .offset {
-                IntOffset(
-                    x = xOffset.roundToPx(),
-                    y = 0
-                )
+                IntOffset(x = xOffset.roundToPx(), y = 0)
             }
             .fillMaxHeight(),
         shape = MaterialTheme.shapes.extraLarge
     ) {
-        Column {
-            Column(
-                modifier = Modifier
-                    .padding(all = 12.dp)
-                    .verticalScroll(state = rememberScrollState())
-                    .weight(1f)
+        Column(
+            modifier = Modifier
+                .weight(1f)
+                .padding(all = 12.dp)
+                .verticalScroll(state = rememberScrollState())
+        ) {
+            LoginItem(
+                modifier = Modifier.fillMaxWidth(),
+                serverName = stringResource(R.string.account_type_microsoft),
             ) {
-                LoginItem(
-                    modifier = Modifier.fillMaxWidth(),
-                    serverName = stringResource(R.string.account_type_microsoft),
-                ) {
-                    if (!isMicrosoftLogging()) {
-                        updateMicrosoftOperation(MicrosoftLoginOperation.Tip)
-                    }
-                }
-                LoginItem(
-                    modifier = Modifier.fillMaxWidth(),
-                    serverName = stringResource(R.string.account_type_local)
-                ) {
-                    updateLocalLoginOperation(LocalLoginOperation.Edit)
-                }
-
-                val authServers by AccountsManager.authServersFlow.collectAsState()
-                authServers.forEach { server ->
-                    ServerItem(
-                        server = server,
-                        onClick = { updateOtherLoginOperation(OtherLoginOperation.OnLogin(server)) },
-                        onDeleteClick = { updateServerOperation(ServerOperation.Delete(server)) }
-                    )
+                if (!isMicrosoftLogging()) {
+                    updateMicrosoftOperation(MicrosoftLoginOperation.Tip)
                 }
             }
-
-            ScalingActionButton(
-                modifier = Modifier
-                    .padding(PaddingValues(horizontal = 12.dp, vertical = 8.dp))
-                    .fillMaxWidth(),
-                onClick = { updateServerOperation(ServerOperation.AddNew) }
+            LoginItem(
+                modifier = Modifier.fillMaxWidth(),
+                serverName = stringResource(R.string.account_type_local)
             ) {
-                MarqueeText(text = stringResource(R.string.account_add_new_server_button))
+                updateLocalLoginOperation(LocalLoginOperation.Edit)
+            }
+
+            val authServers by AccountsManager.authServersFlow.collectAsState()
+            authServers.forEach { server ->
+                ServerItem(
+                    server = server,
+                    onClick = { updateOtherLoginOperation(OtherLoginOperation.OnLogin(server)) },
+                    onDeleteClick = { updateServerOperation(ServerOperation.Delete(server)) }
+                )
             }
         }
+
+        ScalingActionButton(
+            modifier = Modifier
+                .padding(PaddingValues(horizontal = 12.dp, vertical = 8.dp))
+                .fillMaxWidth(),
+            onClick = { updateServerOperation(ServerOperation.AddNew) }
+        ) {
+            MarqueeText(text = stringResource(R.string.account_add_new_server_button))
+        }
     }
 }
 

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/download/DownloadGameScreen.kt

@@ -41,6 +41,7 @@ import com.movtery.zalithlauncher.notification.NotificationManager
 import com.movtery.zalithlauncher.ui.components.MarqueeText
 import com.movtery.zalithlauncher.ui.components.NotificationCheck
 import com.movtery.zalithlauncher.ui.components.SimpleAlertDialog
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.screens.NestedNavKey
 import com.movtery.zalithlauncher.ui.screens.NormalNavKey
 import com.movtery.zalithlauncher.ui.screens.content.download.common.GameInstallOperation
@@ -255,8 +256,11 @@ private fun GameInstallOperation(
                     Text(text = stringResource(R.string.download_install_error_title))
                 },
                 text = {
+                    val scrollState = rememberScrollState()
                     Column(
-                        modifier = Modifier.verticalScroll(rememberScrollState()),
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .verticalScroll(state = scrollState),
                         verticalArrangement = Arrangement.spacedBy(4.dp)
                     ) {
                         Text(text = stringResource(R.string.download_install_error_message))

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/download/DownloadModPackScreen.kt

@@ -45,6 +45,7 @@ import com.movtery.zalithlauncher.ui.components.MarqueeText
 import com.movtery.zalithlauncher.ui.components.NotificationCheck
 import com.movtery.zalithlauncher.ui.components.SimpleAlertDialog
 import com.movtery.zalithlauncher.ui.components.SimpleEditDialog
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.screens.NestedNavKey
 import com.movtery.zalithlauncher.ui.screens.NormalNavKey
 import com.movtery.zalithlauncher.ui.screens.content.download.assets.download.DownloadAssetsScreen
@@ -320,8 +321,11 @@ private fun ModPackInstallOperation(
                     Text(text = stringResource(R.string.download_install_error_title))
                 },
                 text = {
+                    val scrollState = rememberScrollState()
                     Column(
-                        modifier = Modifier.verticalScroll(rememberScrollState()),
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .verticalScroll(state = scrollState),
                         verticalArrangement = Arrangement.spacedBy(4.dp)
                     ) {
                         Text(text = stringResource(R.string.download_install_error_message))

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/download/assets/elements/_Download.Single.kt

@@ -43,6 +43,7 @@ import com.movtery.zalithlauncher.game.version.installed.Version
 import com.movtery.zalithlauncher.game.version.installed.VersionsManager
 import com.movtery.zalithlauncher.ui.components.MarqueeText
 import com.movtery.zalithlauncher.ui.components.SimpleAlertDialog
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.components.itemLayoutColor
 import com.movtery.zalithlauncher.ui.screens.content.elements.CommonVersionInfoLayout
 
@@ -207,9 +208,9 @@ private fun ChoseGameVersionLayout(
 
             LazyColumn(
                 modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(vertical = 4.dp),
-                contentPadding = PaddingValues(horizontal = 4.dp),
+                    .fadeEdge(state = listState)
+                    .fillMaxWidth(),
+                contentPadding = PaddingValues(all = 4.dp),
                 state = listState
             ) {
                 items(versions) { version ->

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/elements/AccountElements.kt

@@ -95,6 +95,7 @@ import com.movtery.zalithlauncher.ui.components.IconTextButton
 import com.movtery.zalithlauncher.ui.components.MarqueeText
 import com.movtery.zalithlauncher.ui.components.SimpleAlertDialog
 import com.movtery.zalithlauncher.ui.components.SimpleEditDialog
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.components.itemLayoutColor
 import com.movtery.zalithlauncher.utils.animation.getAnimateTween
 import com.movtery.zalithlauncher.utils.logging.Logger.lError
@@ -658,10 +659,12 @@ fun OtherServerLoginDialog(
                     )
                     Spacer(modifier = Modifier.size(16.dp))
 
+                    val scrollState = rememberScrollState()
                     Column(
                         modifier = Modifier
+                            .fadeEdge(state = scrollState)
                             .weight(1f, fill = false)
-                            .verticalScroll(rememberScrollState())
+                            .verticalScroll(state = scrollState)
                             .fillMaxWidth(),
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {
@@ -802,8 +805,12 @@ fun SelectSkinModelDialog(
                         style = MaterialTheme.typography.titleMedium
                     )
 
+                    val scrollState = rememberScrollState()
                     Column(
-                        modifier = Modifier.weight(1f, fill = false).verticalScroll(rememberScrollState()),
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .weight(1f, fill = false)
+                            .verticalScroll(state = scrollState),
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {
                         Text(

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/elements/CommonElements.kt

@@ -20,6 +20,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
@@ -62,6 +63,7 @@ import com.movtery.zalithlauncher.coroutine.TaskSystem
 import com.movtery.zalithlauncher.coroutine.TitledTask
 import com.movtery.zalithlauncher.ui.components.IconTextButton
 import com.movtery.zalithlauncher.ui.components.MarqueeText
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.utils.animation.getAnimateTween
 import com.movtery.zalithlauncher.utils.platform.bytesToMB
 import com.movtery.zalithlauncher.utils.platform.getTotalMemory
@@ -226,8 +228,12 @@ fun TitleTaskFlowDialog(
                     )
                     Spacer(modifier = Modifier.size(16.dp))
 
+                    val scrollState = rememberLazyListState()
                     LazyColumn(
-                        modifier = Modifier.weight(1f, fill = false)
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .weight(1f, fill = false),
+                        state = scrollState
                     ) {
                         items(tasks) { task ->
                             InstallingTaskItem(

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/elements/VersionsManageElements.kt

@@ -68,6 +68,7 @@ import com.movtery.zalithlauncher.ui.components.SimpleEditDialog
 import com.movtery.zalithlauncher.ui.components.SimpleTaskDialog
 import com.movtery.zalithlauncher.ui.components.TextRailItem
 import com.movtery.zalithlauncher.ui.components.desaturate
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.components.itemLayoutColor
 import com.movtery.zalithlauncher.ui.components.secondaryContainerDrawerItemColors
 import com.movtery.zalithlauncher.utils.animation.getAnimateTween
@@ -585,7 +586,12 @@ fun CleanupOperation(
                         )
                     },
                     text = {
-                        Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+                        val scrollState = rememberScrollState()
+                        Column(
+                            modifier = Modifier
+                                .fadeEdge(state = scrollState)
+                                .verticalScroll(state = scrollState)
+                        ) {
                             Text(stringResource(R.string.versions_manage_cleanup_failed_files))
                             error.files.forEach { file ->
                                 Text(file.absolutePath)

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/settings/ControlManageScreen.kt

@@ -897,10 +897,12 @@ private fun CreateNewLayoutDialog(
                         style = MaterialTheme.typography.titleMedium
                     )
 
+                    val scrollState = rememberScrollState()
                     Column(
                         modifier = Modifier
+                            .fadeEdge(state = scrollState)
                             .weight(1f, fill = false)
-                            .verticalScroll(rememberScrollState())
+                            .verticalScroll(state = scrollState)
                             .fillMaxWidth(),
                         horizontalAlignment = Alignment.CenterHorizontally
                     ) {

ZalithLauncher/src/main/java/com/movtery/zalithlauncher/ui/screens/content/versions/elements/ModsScreenElements.kt

@@ -17,6 +17,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.verticalScroll
@@ -53,6 +54,7 @@ import com.movtery.zalithlauncher.game.version.mod.update.ModUpdater
 import com.movtery.zalithlauncher.ui.components.MarqueeText
 import com.movtery.zalithlauncher.ui.components.ProgressDialog
 import com.movtery.zalithlauncher.ui.components.SimpleAlertDialog
+import com.movtery.zalithlauncher.ui.components.fadeEdge
 import com.movtery.zalithlauncher.ui.components.itemLayoutColor
 import com.movtery.zalithlauncher.ui.screens.content.download.assets.elements.AssetsIcon
 import com.movtery.zalithlauncher.ui.screens.content.elements.TitleTaskFlowDialog
@@ -188,8 +190,11 @@ fun ModsUpdateOperation(
                     Text(text = stringResource(R.string.mods_update_failed))
                 },
                 text = {
+                    val scrollState = rememberScrollState()
                     Column(
-                        modifier = Modifier.verticalScroll(rememberScrollState()),
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .verticalScroll(state = scrollState),
                         verticalArrangement = Arrangement.spacedBy(4.dp)
                     ) {
                         Text(text = stringResource(R.string.mods_update_failed_text))
@@ -272,8 +277,12 @@ private fun ModsUpdateListDialog(
                     )
                     Spacer(modifier = Modifier.size(16.dp))
 
+                    val scrollState = rememberLazyListState()
                     LazyColumn(
-                        modifier = Modifier.weight(1f, fill = false),
+                        modifier = Modifier
+                            .fadeEdge(state = scrollState)
+                            .weight(1f, fill = false),
+                        state = scrollState,
                         verticalArrangement = Arrangement.spacedBy(12.dp),
                         contentPadding = PaddingValues(vertical = 12.dp)
                     ) {