From 1e488285715514f81588cb68bdea6721a5986997 Mon Sep 17 00:00:00 2001
From: Renan Lukas <14964993+RenanLukas@users.noreply.github.com>
Date: Tue, 9 Apr 2024 20:16:28 -0300
Subject: [PATCH] Add post excerpt, update styles

---
 .../HorizontalPostListItem.kt                 | 65 +++++++------------
 1 file changed, 24 insertions(+), 41 deletions(-)

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 = {},
             )
         }