msfjarvis/compose-lobsters
1
Fork 0
mirror of https://github.com/msfjarvis/compose-lobsters synced 2025-08-14 21:07:04 +05:30
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(common): tweak LobstersCard layout to improve touch targets

Browse source
This commit is contained in:
Harsh Shandilya 2024-06-13 20:45:30 +05:30
parent cef05306ba
commit 9610241489
1 changed files with 14 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

31
common/src/main/kotlin/dev/msfjarvis/claw/common/posts/LobstersCard.kt
View file

@ -36,6 +36,7 @@ import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.minimumInteractiveComponentSize
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@ -77,7 +78,7 @@ fun LobstersCard(
refresh() refresh()
} }
.background(MaterialTheme.colorScheme.background) .background(MaterialTheme.colorScheme.background)
.padding(start = 8.dp) .padding(start = 8.dp, top = 2.dp, bottom = 2.dp)
) { ) {
Row( Row(
horizontalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
@ -91,7 +92,6 @@ fun LobstersCard(
) )
Column( Column(
modifier = Modifier.wrapContentHeight(), modifier = Modifier.wrapContentHeight(),
verticalArrangement = Arrangement.spacedBy(8.dp),
horizontalAlignment = Alignment.CenterHorizontally, horizontalAlignment = Alignment.CenterHorizontally,
) { ) {
SaveButton( SaveButton(
@ -189,7 +189,7 @@ internal fun Submitter(
@Composable @Composable
private fun SaveButton(isSaved: Boolean, modifier: Modifier = Modifier) { private fun SaveButton(isSaved: Boolean, modifier: Modifier = Modifier) {
Crossfade(targetState = isSaved, label = "save-button") { saved -> Crossfade(targetState = isSaved, label = "save-button") { saved ->
Box(modifier = modifier.padding(vertical = 12.dp)) { Box(modifier = modifier.minimumInteractiveComponentSize()) {
Icon( Icon(
imageVector = if (saved) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder, imageVector = if (saved) Icons.Filled.Favorite else Icons.Filled.FavoriteBorder,
tint = MaterialTheme.colorScheme.secondary, tint = MaterialTheme.colorScheme.secondary,
@ -201,22 +201,19 @@ private fun SaveButton(isSaved: Boolean, modifier: Modifier = Modifier) {
} }
@Composable @Composable
private fun CommentsButton(commentCount: Int?, modifier: Modifier = Modifier) { private fun CommentsButton(commentCount: Int, modifier: Modifier = Modifier) {
BadgedBox( BadgedBox(
modifier = modifier.padding(vertical = 12.dp), modifier = modifier.minimumInteractiveComponentSize(),
badge = { badge = {
if (commentCount != null) { Badge(
Badge( containerColor = MaterialTheme.colorScheme.tertiaryContainer,
containerColor = MaterialTheme.colorScheme.tertiaryContainer, modifier = Modifier.absoluteOffset(y = (-8).dp),
// Required to make the badge label look visually okay ) {
modifier = Modifier.absoluteOffset(y = (-8).dp), Text(
) { text = commentCount.toString(),
Text( color = MaterialTheme.colorScheme.onTertiaryContainer,
text = commentCount.toString(), style = MaterialTheme.typography.labelMedium,
color = MaterialTheme.colorScheme.onTertiaryContainer, )
style = MaterialTheme.typography.labelMedium,
)
}
} }
}, },
) { ) {