diff --git a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItem.kt b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItem.kt index 9f9fa190ecd5..6964c5a5b02c 100644 --- a/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItem.kt +++ b/WordPress/src/main/java/org/wordpress/android/ui/reader/views/compose/horizontalpostlist/HorizontalPostListItem.kt @@ -7,23 +7,16 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width -import androidx.compose.material.Icon -import androidx.compose.material.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.res.painterResource -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import org.wordpress.android.R import org.wordpress.android.ui.compose.theme.AppColor import org.wordpress.android.ui.compose.theme.AppTheme import org.wordpress.android.ui.compose.unit.Margin @@ -33,9 +26,12 @@ fun HorizontalPostListItem( siteName: String, postDateLine: String, postTitle: String, + postExcerpt: String, onPostSiteImageClick: () -> Unit, - onPostMoreMenuClick: () -> Unit, ) { + val black87AlphaColor = AppColor.Black.copy( + alpha = 0.87F + ) Column(modifier = Modifier.width(240.dp)) { Row( modifier = Modifier.fillMaxWidth(), @@ -56,9 +52,8 @@ fun HorizontalPostListItem( Text( modifier = Modifier.weight(1F), text = siteName, - fontSize = 13.sp, - fontWeight = FontWeight.SemiBold, - color = AppColor.Black, + style = MaterialTheme.typography.labelLarge, + color = black87AlphaColor, maxLines = 1, overflow = TextOverflow.Ellipsis, ) @@ -68,48 +63,33 @@ fun HorizontalPostListItem( horizontal = Margin.Small.value ), text = "•", - fontSize = 13.sp, - fontWeight = FontWeight.Normal, + style = MaterialTheme.typography.bodyMedium, color = secondaryElementColor, ) // Time since it was posted Text( text = postDateLine, - fontSize = 13.sp, - fontWeight = FontWeight.Normal, + style = MaterialTheme.typography.bodyMedium, color = secondaryElementColor, ) - // More menu ("...") - IconButton( - modifier = Modifier - .size(24.dp) - .padding( - horizontal = Margin.Small.value - ), - onClick = { - onPostMoreMenuClick() - }, - ) { - Icon( - painter = painterResource(R.drawable.ic_more_ellipsis_horizontal_squares), - contentDescription = stringResource( - R.string.show_more_desc - ), - tint = secondaryElementColor, - ) - } } // Post title Text( modifier = Modifier.padding(top = Margin.Medium.value), text = postTitle, - fontSize = 20.sp, - style = MaterialTheme.typography.titleLarge, - fontWeight = FontWeight.SemiBold, + style = MaterialTheme.typography.titleMedium, color = AppColor.Black, maxLines = 2, overflow = TextOverflow.Ellipsis, - lineHeight = 25.sp, + ) + // Post excerpt + Text( + modifier = Modifier.padding(top = Margin.Small.value), + text = postExcerpt, + style = MaterialTheme.typography.bodySmall, + color = black87AlphaColor, + maxLines = 2, + overflow = TextOverflow.Ellipsis, ) } } @@ -125,10 +105,13 @@ fun HorizontalPostListItemPreview() { .fillMaxHeight() ) { HorizontalPostListItem( - siteName = "This is a really long site name used for testing", + siteName = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sapien sed" + + " urna fermentum posuere. Vivamus in pretium nisl.", postDateLine = "1h", - postTitle = "This is a really really really long post title used for testing", - onPostMoreMenuClick = {}, + postTitle = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sapien " + + "sed urna fermentum posuere. Vivamus in pretium nisl.", + postExcerpt = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque sapien" + + " sed urna fermentum posuere. Vivamus in pretium nisl.", onPostSiteImageClick = {}, ) }