From 1f5015a3e231273d8cc97d3f5fb2951470268767 Mon Sep 17 00:00:00 2001 From: Sasikanth Miriyampalli Date: Tue, 10 Oct 2023 09:26:18 +0530 Subject: [PATCH] Update post list item UI - Added support for clickable post source. Will be useful in filtering posts in home screen --- .../reader/bookmarks/ui/BookmarksScreen.kt | 6 +- .../rss/reader/home/ui/FeaturedPostItem.kt | 19 +++++-- .../rss/reader/home/ui/FeaturedSection.kt | 4 +- .../rss/reader/home/ui/HomeScreen.kt | 5 ++ .../sasikanth/rss/reader/home/ui/PostList.kt | 24 +++++--- .../rss/reader/home/ui/PostMetadata.kt | 55 ++++++++++++------- .../rss/reader/search/ui/SearchScreen.kt | 6 +- 7 files changed, 84 insertions(+), 35 deletions(-) diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/bookmarks/ui/BookmarksScreen.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/bookmarks/ui/BookmarksScreen.kt index f666b6302..1b2b01e05 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/bookmarks/ui/BookmarksScreen.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/bookmarks/ui/BookmarksScreen.kt @@ -103,11 +103,15 @@ internal fun BookmarksScreen( if (post != null) { PostListItem( item = post, + enablePostSource = false, onClick = { openLink(post.link) }, onPostBookmarkClick = { bookmarksPresenter.dispatch(BookmarksEvent.OnPostBookmarkClick(post)) }, - onPostCommentsClick = { openLink(post.commentsLink!!) } + onPostCommentsClick = { openLink(post.commentsLink!!) }, + onPostSourceClick = { + // no-op + } ) if (index != bookmarks.itemCount - 1) { Divider( diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedPostItem.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedPostItem.kt index 76553bada..d17df86be 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedPostItem.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedPostItem.kt @@ -66,7 +66,8 @@ internal fun FeaturedPostItem( pagerState: PagerState, onClick: () -> Unit, onBookmarkClick: () -> Unit, - onCommentsClick: () -> Unit + onCommentsClick: () -> Unit, + onSourceClick: () -> Unit ) { val isLargeScreenLayout = LocalWindowSizeClass.current.widthSizeClass == WindowWidthSizeClass.Expanded @@ -77,7 +78,8 @@ internal fun FeaturedPostItem( page = page, pagerState = pagerState, onBookmarkClick = onBookmarkClick, - onCommentsClick = onCommentsClick + onCommentsClick = onCommentsClick, + onSourceClick = onSourceClick ) } else { DefaultFeaturedPostItem( @@ -85,7 +87,8 @@ internal fun FeaturedPostItem( page = page, pagerState = pagerState, onBookmarkClick = onBookmarkClick, - onCommentsClick = onCommentsClick + onCommentsClick = onCommentsClick, + onSourceClick = onSourceClick ) } } @@ -97,7 +100,8 @@ private fun DefaultFeaturedPostItem( page: Int, pagerState: PagerState, onBookmarkClick: () -> Unit, - onCommentsClick: () -> Unit + onCommentsClick: () -> Unit, + onSourceClick: () -> Unit ) { Column { AsyncImage( @@ -152,8 +156,10 @@ private fun DefaultFeaturedPostItem( postLink = item.link, postBookmarked = item.bookmarked, commentsLink = item.commentsLink, + enablePostSource = true, onBookmarkClick = onBookmarkClick, onCommentsClick = onCommentsClick, + onSourceClick = onSourceClick, modifier = Modifier.padding(start = 16.dp, end = 0.dp) ) @@ -167,7 +173,8 @@ private fun LargeScreenFeaturedPostItem( page: Int, pagerState: PagerState, onBookmarkClick: () -> Unit, - onCommentsClick: () -> Unit + onCommentsClick: () -> Unit, + onSourceClick: () -> Unit ) { Row(verticalAlignment = Alignment.CenterVertically) { AsyncImage( @@ -223,8 +230,10 @@ private fun LargeScreenFeaturedPostItem( postLink = item.link, postBookmarked = item.bookmarked, commentsLink = item.commentsLink, + enablePostSource = true, onBookmarkClick = onBookmarkClick, onCommentsClick = onCommentsClick, + onSourceClick = onSourceClick ) } } diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedSection.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedSection.kt index 22e7136cf..9feafed8a 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedSection.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/FeaturedSection.kt @@ -96,6 +96,7 @@ internal fun FeaturedSection( onItemClick: (PostWithMetadata) -> Unit, onPostBookmarkClick: (PostWithMetadata) -> Unit, onPostCommentsClick: (String) -> Unit, + onPostSourceClick: (String) -> Unit, ) { Box(modifier = modifier) { if (featuredPosts.isNotEmpty()) { @@ -168,7 +169,8 @@ internal fun FeaturedSection( pagerState = pagerState, onClick = { onItemClick(featuredPost) }, onBookmarkClick = { onPostBookmarkClick(featuredPost) }, - onCommentsClick = { onPostCommentsClick(featuredPost.commentsLink!!) } + onCommentsClick = { onPostCommentsClick(featuredPost.commentsLink!!) }, + onSourceClick = { onPostSourceClick(featuredPost.feedLink) } ) } } diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeScreen.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeScreen.kt index 5fd267fc2..5351125b4 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeScreen.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/HomeScreen.kt @@ -169,6 +169,9 @@ fun HomeScreen( onPostClicked = { homePresenter.dispatch(HomeEvent.OnPostClicked(it)) }, onPostBookmarkClick = { homePresenter.dispatch(HomeEvent.OnPostBookmarkClick(it)) }, onPostCommentsClick = { commentsLink -> openLink(commentsLink) }, + onPostSourceClick = { + // TODO + }, onNoFeedsSwipeUp = { coroutineScope.launch { bottomSheetState.expand() } }, ) }, @@ -245,6 +248,7 @@ private fun HomeScreenContent( onPostClicked: (PostWithMetadata) -> Unit, onPostBookmarkClick: (PostWithMetadata) -> Unit, onPostCommentsClick: (String) -> Unit, + onPostSourceClick: (String) -> Unit, onNoFeedsSwipeUp: () -> Unit, ) { val featuredPosts = state.featuredPosts @@ -270,6 +274,7 @@ private fun HomeScreenContent( onPostClicked = onPostClicked, onPostBookmarkClick = onPostBookmarkClick, onPostCommentsClick = onPostCommentsClick, + onPostSourceClick = onPostSourceClick, listState = listState, ) diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostList.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostList.kt index 45a894243..d3cbc67db 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostList.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostList.kt @@ -43,6 +43,7 @@ import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.unit.dp import app.cash.paging.compose.LazyPagingItems @@ -74,6 +75,7 @@ internal fun PostsList( onPostClicked: (post: PostWithMetadata) -> Unit, onPostBookmarkClick: (PostWithMetadata) -> Unit, onPostCommentsClick: (String) -> Unit, + onPostSourceClick: (String) -> Unit ) { val featuredPostsPagerState = rememberPagerState(pageCount = { featuredPosts.size }) @@ -101,6 +103,7 @@ internal fun PostsList( onItemClick = onPostClicked, onPostBookmarkClick = onPostBookmarkClick, onPostCommentsClick = onPostCommentsClick, + onPostSourceClick = onPostSourceClick ) } @@ -109,9 +112,11 @@ internal fun PostsList( if (post != null) { PostListItem( item = post, + enablePostSource = true, onClick = { onPostClicked(post) }, onPostBookmarkClick = { onPostBookmarkClick(post) }, - onPostCommentsClick = { onPostCommentsClick(post.commentsLink!!) } + onPostCommentsClick = { onPostCommentsClick(post.commentsLink!!) }, + onPostSourceClick = { onPostSourceClick(post.feedLink) } ) if (index != posts.itemCount - 1) { @@ -128,9 +133,11 @@ internal fun PostsList( @Composable fun PostListItem( item: PostWithMetadata, + enablePostSource: Boolean, onClick: () -> Unit, onPostBookmarkClick: () -> Unit, - onPostCommentsClick: () -> Unit + onPostCommentsClick: () -> Unit, + onPostSourceClick: () -> Unit ) { Column( modifier = @@ -139,15 +146,14 @@ fun PostListItem( .padding(postListPadding) ) { Row( - modifier = Modifier.padding(start = 24.dp, top = 24.dp, end = 24.dp), + modifier = Modifier.padding(start = 24.dp, top = 20.dp, end = 24.dp), horizontalArrangement = Arrangement.spacedBy(16.dp), - verticalAlignment = Alignment.CenterVertically ) { Text( - modifier = Modifier.weight(1f), + modifier = Modifier.weight(1f).align(Alignment.Top), style = MaterialTheme.typography.titleSmall, text = item.title, - color = AppTheme.colorScheme.textEmphasisHigh, + color = Color.White, maxLines = 2 ) @@ -155,7 +161,9 @@ fun PostListItem( AsyncImage( url = url, modifier = - Modifier.requiredSize(width = 128.dp, height = 72.dp).clip(RoundedCornerShape(12.dp)), + Modifier.requiredSize(width = 128.dp, height = 72.dp) + .clip(RoundedCornerShape(12.dp)) + .align(Alignment.CenterVertically), contentDescription = null, contentScale = ContentScale.Crop ) @@ -168,8 +176,10 @@ fun PostListItem( postLink = item.link, postBookmarked = item.bookmarked, commentsLink = item.commentsLink, + enablePostSource = enablePostSource, onBookmarkClick = onPostBookmarkClick, onCommentsClick = onPostCommentsClick, + onSourceClick = onPostSourceClick, modifier = Modifier.padding(start = 24.dp, end = 12.dp) ) } diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt index 72d467ea1..87e336ee0 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/home/ui/PostMetadata.kt @@ -15,14 +15,14 @@ */ package dev.sasikanth.rss.reader.home.ui +import androidx.compose.foundation.background import androidx.compose.foundation.clickable -import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.requiredSize -import androidx.compose.foundation.layout.requiredWidthIn import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text @@ -32,6 +32,8 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.capitalize +import androidx.compose.ui.text.intl.Locale import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp @@ -51,7 +53,9 @@ internal fun PostMetadata( commentsLink: String?, onBookmarkClick: () -> Unit, onCommentsClick: () -> Unit, - modifier: Modifier = Modifier + modifier: Modifier = Modifier, + enablePostSource: Boolean, + onSourceClick: () -> Unit, ) { Row( modifier = @@ -60,31 +64,42 @@ internal fun PostMetadata( bottom = 8.dp, ) .then(modifier), - horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically ) { - Text( - modifier = Modifier.requiredWidthIn(max = 72.dp), - style = MaterialTheme.typography.bodySmall, - maxLines = 1, - text = feedName, - color = AppTheme.colorScheme.textEmphasisMed, - overflow = TextOverflow.Ellipsis - ) + Box(modifier = Modifier.weight(1f)) { + val postSourceClickableModifier = + if (enablePostSource) { + Modifier.clip(RoundedCornerShape(50)) + .clickable(onClick = onSourceClick) + .background(color = Color.White.copy(alpha = 0.12f)) + .padding(horizontal = 12.dp, vertical = 4.dp) + } else { + Modifier + } - Text( - style = MaterialTheme.typography.bodySmall, - maxLines = 1, - text = "•", - color = AppTheme.colorScheme.textEmphasisMed - ) + val postSourceTextColor = + if (enablePostSource) { + Color.White + } else { + AppTheme.colorScheme.onSurfaceVariant + } + + Text( + modifier = postSourceClickableModifier, + style = MaterialTheme.typography.bodySmall, + maxLines = 1, + text = feedName.capitalize(Locale.current), + color = postSourceTextColor, + overflow = TextOverflow.Ellipsis + ) + } Text( - modifier = Modifier.weight(1f), + modifier = Modifier.padding(horizontal = 8.dp), style = MaterialTheme.typography.bodySmall, maxLines = 1, text = postPublishedAt, - color = AppTheme.colorScheme.textEmphasisMed, + color = Color.White, textAlign = TextAlign.Start ) diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt index ed6a3eeab..be4c09d73 100644 --- a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt +++ b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/search/ui/SearchScreen.kt @@ -124,11 +124,15 @@ internal fun SearchScreen( if (post != null) { PostListItem( item = post, + enablePostSource = false, onClick = { openLink(post.link) }, onPostBookmarkClick = { searchPresenter.dispatch(SearchEvent.OnPostBookmarkClick(post)) }, - onPostCommentsClick = { openLink(post.commentsLink!!) } + onPostCommentsClick = { openLink(post.commentsLink!!) }, + onPostSourceClick = { + // no-op + }, ) if (index != searchResults.itemCount - 1) {