LobstersItem: split details and button to separate composables

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
Harsh Shandilya 2021-03-19 14:57:57 +05:30
parent 1983f1e864
commit fa605f5416
No known key found for this signature in database
GPG key ID: 366D7BBAD1031E80

View file

@ -5,6 +5,7 @@ import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.combinedClickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
@ -68,57 +69,77 @@ fun LobstersItem(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,
) { ) {
Column( PostDetails(
modifier = Modifier.fillMaxWidth(), post,
) { )
Text( SaveButton(
text = post.title, isSaved,
color = titleColor, onSaveButtonClick,
fontWeight = FontWeight.Bold, )
modifier = Modifier }
.padding(top = 4.dp), }
) }
TagRow(
tags = post.tags, @Composable
modifier = Modifier fun PostDetails(
.padding(top = 8.dp, bottom = 8.dp, end = 16.dp), post: SavedPost,
) ) {
Row { Column(
CoilImage( modifier = Modifier.fillMaxWidth(),
data = "${LobstersApi.BASE_URL}/${post.submitterAvatarUrl}", ) {
contentDescription = stringResource( Text(
R.string.avatar_content_description, text = post.title,
post.submitterName color = titleColor,
), fontWeight = FontWeight.Bold,
fadeIn = true, modifier = Modifier
requestBuilder = { .padding(top = 4.dp),
transformations(CircleCropTransformation()) )
}, TagRow(
modifier = Modifier tags = post.tags,
.requiredWidth(30.dp) modifier = Modifier
.padding(4.dp), .padding(top = 8.dp, bottom = 8.dp, end = 16.dp),
) )
Text( Row {
text = stringResource(id = R.string.submitted_by, post.submitterName), CoilImage(
modifier = Modifier data = "${LobstersApi.BASE_URL}/${post.submitterAvatarUrl}",
.padding(4.dp), contentDescription = stringResource(
) R.string.avatar_content_description,
} post.submitterName
} ),
IconToggleButton( fadeIn = true,
checked = isSaved, requestBuilder = {
onCheckedChange = { onSaveButtonClick.invoke() }, transformations(CircleCropTransformation())
},
modifier = Modifier modifier = Modifier
.requiredSize(24.dp), .requiredWidth(30.dp)
) { .padding(4.dp),
Crossfade(targetState = isSaved) { saved -> )
IconResource( Text(
resourceId = if (saved) R.drawable.ic_favorite_24px else R.drawable.ic_favorite_border_24px, text = stringResource(id = R.string.submitted_by, post.submitterName),
tint = MaterialTheme.colors.secondary, modifier = Modifier
contentDescription = stringResource(if (saved) R.string.remove_from_saved_posts else R.string.add_to_saved_posts), .padding(4.dp),
) )
} }
} }
}
@Composable
fun SaveButton(
isSaved: Boolean,
onSaveButtonClick: () -> Unit,
) {
IconToggleButton(
checked = isSaved,
onCheckedChange = { onSaveButtonClick.invoke() },
modifier = Modifier
.requiredSize(24.dp),
) {
Crossfade(targetState = isSaved) { saved ->
IconResource(
resourceId = if (saved) R.drawable.ic_favorite_24px else R.drawable.ic_favorite_border_24px,
tint = MaterialTheme.colors.secondary,
contentDescription = stringResource(if (saved) R.string.remove_from_saved_posts else R.string.add_to_saved_posts),
)
} }
} }
} }