mirror of
https://github.com/msfjarvis/compose-lobsters
synced 2025-08-18 00:57:02 +05:30
LobstersItem: split details and button to separate composables
Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
parent
1983f1e864
commit
fa605f5416
1 changed files with 71 additions and 50 deletions
|
@ -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),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue