From cb6391085a3f08a0d3a78f48e8156c9fef2bfd21 Mon Sep 17 00:00:00 2001 From: Vitor Pamplona Date: Wed, 4 Mar 2026 17:37:52 -0500 Subject: [PATCH] Improving the ui for reaction row settings --- .../settings/ReactionsSettingsScreen.kt | 78 ++++++++++++------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/ReactionsSettingsScreen.kt b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/ReactionsSettingsScreen.kt index 968b6beff..0471f74db 100644 --- a/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/ReactionsSettingsScreen.kt +++ b/amethyst/src/main/java/com/vitorpamplona/amethyst/ui/screen/loggedIn/settings/ReactionsSettingsScreen.kt @@ -21,8 +21,10 @@ package com.vitorpamplona.amethyst.ui.screen.loggedIn.settings import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.foundation.gestures.detectDragGesturesAfterLongPress +import androidx.compose.foundation.ScrollState +import androidx.compose.foundation.gestures.detectDragGestures import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer @@ -31,10 +33,9 @@ import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size -import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.DragHandle +import androidx.compose.material.icons.filled.DragIndicator import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme @@ -56,17 +57,32 @@ import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.layout.onGloballyPositioned import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.zIndex import androidx.lifecycle.compose.collectAsStateWithLifecycle import com.vitorpamplona.amethyst.R import com.vitorpamplona.amethyst.model.ReactionRowAction import com.vitorpamplona.amethyst.model.ReactionRowItem +import com.vitorpamplona.amethyst.ui.navigation.navs.EmptyNav import com.vitorpamplona.amethyst.ui.navigation.navs.INav import com.vitorpamplona.amethyst.ui.navigation.topbars.TopBarWithBackButton import com.vitorpamplona.amethyst.ui.screen.loggedIn.AccountViewModel +import com.vitorpamplona.amethyst.ui.screen.loggedIn.mockAccountViewModel import com.vitorpamplona.amethyst.ui.stringRes import com.vitorpamplona.amethyst.ui.theme.Size20dp +import com.vitorpamplona.amethyst.ui.theme.ThemeComparisonRow + +@Composable +@Preview(device = "spec:width=2100px,height=2340px,dpi=440") +fun ReactionsSettingsScreenPreview() { + ThemeComparisonRow { + ReactionsSettingsScreen( + mockAccountViewModel(), + EmptyNav(), + ) + } +} @Composable fun ReactionsSettingsScreen( @@ -97,13 +113,14 @@ fun ReactionsSettingsContent(accountViewModel: AccountViewModel) { var draggedItemIndex by remember { mutableIntStateOf(-1) } var dragOffset by remember { mutableFloatStateOf(0f) } val itemHeights = remember { mutableStateMapOf() } + val isDragging = draggedItemIndex >= 0 + val scrollState = remember { ScrollState(0) } Column( modifier = Modifier .fillMaxSize() - .padding(horizontal = Size20dp) - .verticalScroll(rememberScrollState()), + .verticalScroll(scrollState, enabled = !isDragging), ) { Spacer(modifier = Modifier.height(16.dp)) @@ -111,7 +128,7 @@ fun ReactionsSettingsContent(accountViewModel: AccountViewModel) { text = stringRes(R.string.reactions_settings_description), style = MaterialTheme.typography.bodyMedium, color = Color.Gray, - modifier = Modifier.padding(bottom = 16.dp), + modifier = Modifier.padding(bottom = 16.dp, start = Size20dp, end = Size20dp), ) items.forEachIndexed { index, item -> @@ -206,7 +223,7 @@ fun ReactionsSettingsContent(accountViewModel: AccountViewModel) { .zIndex(if (isDragging) 1f else 0f), ) if (index < items.lastIndex) { - HorizontalDivider() + HorizontalDivider(modifier = Modifier.padding(horizontal = Size20dp)) } } @@ -238,16 +255,25 @@ private fun ReactionRowItemCard( .fillMaxWidth() .onGloballyPositioned { coordinates -> onMeasured(coordinates.size.height.toFloat()) - } - .graphicsLayer { + }.graphicsLayer { translationY = dragOffsetY shadowElevation = elevation if (isDragging) { scaleX = 1.02f scaleY = 1.02f } - } - .padding(vertical = 8.dp), + }.padding(vertical = 8.dp, horizontal = Size20dp) + .pointerInput(Unit) { + detectDragGestures( + onDragStart = { onDragStart() }, + onDrag = { change, dragAmount -> + change.consume() + onDrag(dragAmount.y) + }, + onDragEnd = { onDragEnd() }, + onDragCancel = { onDragCancel() }, + ) + }, ) { Row( modifier = Modifier.fillMaxWidth(), @@ -270,25 +296,17 @@ private fun ReactionRowItemCard( ) } - Icon( - Icons.Default.DragHandle, - contentDescription = stringRes(R.string.reactions_settings_reorder), - modifier = - Modifier - .size(32.dp) - .pointerInput(Unit) { - detectDragGesturesAfterLongPress( - onDragStart = { onDragStart() }, - onDrag = { change, dragAmount -> - change.consume() - onDrag(dragAmount.y) - }, - onDragEnd = { onDragEnd() }, - onDragCancel = { onDragCancel() }, - ) - }, - tint = MaterialTheme.colorScheme.onSurfaceVariant, - ) + Box( + modifier = Modifier.size(32.dp), + contentAlignment = Alignment.CenterEnd, + ) { + Icon( + Icons.Default.DragIndicator, + contentDescription = stringRes(R.string.reactions_settings_reorder), + modifier = Modifier.size(28.dp), + tint = MaterialTheme.colorScheme.onSurfaceVariant, + ) + } } Spacer(modifier = Modifier.height(8.dp))