Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(ui): use static webp for placeholder #712

Merged
merged 1 commit into from
Jun 2, 2024
Merged

refactor(ui): use static webp for placeholder #712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions app/src/main/java/me/ash/reader/ui/component/base/RYAsyncImage.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,12 @@ import androidx.compose.ui.graphics.DefaultAlpha
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import coil.compose.rememberAsyncImagePainter
import coil.compose.rememberImagePainter
import coil.request.ImageRequest
import coil.size.Precision
import coil.size.Scale
import coil.size.Size
Expand All @@ -31,16 +36,15 @@ fun RYAsyncImage(
@DrawableRes error: Int? = R.drawable.ic_broken_image_black_24dp,
) {
Image(
painter = rememberImagePainter(
data = data,
builder = {
painter = rememberAsyncImagePainter(
ImageRequest.Builder(LocalContext.current).data(data = data).apply {
if (placeholder != null) placeholder(placeholder)
if (error != null) error(error)
crossfade(true)
scale(scale)
precision(precision)
size(size)
},
}.build()
),
contentDescription = contentDescription,
contentScale = contentScale,
Expand Down
60 changes: 46 additions & 14 deletions app/src/main/java/me/ash/reader/ui/page/home/flow/ArticleItem.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,6 @@ import androidx.compose.material.icons.rounded.CheckCircleOutline
import androidx.compose.material.icons.rounded.FiberManualRecord
import androidx.compose.material.icons.rounded.Share
import androidx.compose.material.icons.rounded.Star
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.HorizontalDivider
Expand Down Expand Up @@ -90,13 +89,46 @@ import me.ash.reader.ui.page.settings.color.flow.generateArticleWithFeedPreview
import me.ash.reader.ui.theme.Shape20
import me.ash.reader.ui.theme.palette.onDark

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ArticleItem(
modifier: Modifier = Modifier,
articleWithFeed: ArticleWithFeed,
onClick: (ArticleWithFeed) -> Unit = {},
onLongClick: (() -> Unit)? = null
) {
val feed = articleWithFeed.feed
val article = articleWithFeed.article

ArticleItem(
modifier = modifier,
feedName = feed.name,
feedIconUrl = feed.icon,
title = article.title,
shortDescription = article.shortDescription,
dateString = article.dateString,
imgData = article.img,
isStarred = article.isStarred,
isUnread = article.isUnread,
onClick = { onClick(articleWithFeed) },
onLongClick = onLongClick
)

}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ArticleItem(
modifier: Modifier = Modifier,
feedName: String = "",
feedIconUrl: String? = null,
title: String = "",
shortDescription: String = "",
dateString: String? = null,
imgData: Any? = null,
isStarred: Boolean = false,
isUnread: Boolean = false,
onClick: () -> Unit = {},
onLongClick: (() -> Unit)? = null
) {
val articleListFeedIcon = LocalFlowArticleListFeedIcon.current
val articleListFeedName = LocalFlowArticleListFeedName.current
Expand All @@ -110,11 +142,11 @@ fun ArticleItem(
.padding(horizontal = 12.dp)
.clip(Shape20)
.combinedClickable(
onClick = { onClick(articleWithFeed) },
onClick = onClick,
onLongClick = onLongClick,
)
.padding(horizontal = 12.dp, vertical = 12.dp)
.alpha(articleWithFeed.article.run {
.alpha(
when (articleListReadIndicator) {
FlowArticleReadIndicatorPreference.AllRead -> {
if (isUnread) 1f else 0.5f
Expand All @@ -124,7 +156,7 @@ fun ArticleItem(
if (isUnread || isStarred) 1f else 0.5f
}
}
}),
),
) {
// Top
Row(
Expand All @@ -138,7 +170,7 @@ fun ArticleItem(
modifier = Modifier
.weight(1f)
.padding(start = if (articleListFeedIcon.value) 30.dp else 0.dp),
text = articleWithFeed.feed.name,
text = feedName,
color = MaterialTheme.colorScheme.tertiary,
style = MaterialTheme.typography.labelMedium,
maxLines = 1,
Expand All @@ -155,7 +187,7 @@ fun ArticleItem(
Spacer(Modifier.width(if (articleListFeedIcon.value) 30.dp else 0.dp))
}
// Starred
if (articleWithFeed.article.isStarred) {
if (isStarred) {
Icon(
modifier = Modifier
.size(14.dp)
Expand All @@ -169,7 +201,7 @@ fun ArticleItem(
// Date
Text(
modifier = Modifier,
text = articleWithFeed.article.dateString ?: "",
text = dateString ?: "",
color = MaterialTheme.colorScheme.outlineVariant,
style = MaterialTheme.typography.labelMedium,
)
Expand All @@ -185,7 +217,7 @@ fun ArticleItem(
) {
// Feed icon
if (articleListFeedIcon.value) {
FeedIcon(articleWithFeed.feed.name, iconUrl = articleWithFeed.feed.icon)
FeedIcon(feedName, iconUrl = feedIconUrl)
Spacer(modifier = Modifier.width(10.dp))
}

Expand All @@ -196,18 +228,18 @@ fun ArticleItem(

// Title
Text(
text = articleWithFeed.article.title,
text = title,
color = MaterialTheme.colorScheme.onSurface,
style = MaterialTheme.typography.titleMedium,
maxLines = if (articleListDesc.value) 2 else 4,
overflow = TextOverflow.Ellipsis,
)

// Description
if (articleListDesc.value && articleWithFeed.article.shortDescription.isNotBlank()) {
if (articleListDesc.value && shortDescription.isNotBlank()) {
Text(
modifier = Modifier.padding(top = 4.dp),
text = articleWithFeed.article.shortDescription,
text = shortDescription,
color = MaterialTheme.colorScheme.onSurfaceVariant,
style = MaterialTheme.typography.bodySmall,
maxLines = 2,
Expand All @@ -217,13 +249,13 @@ fun ArticleItem(
}

// Image
if (articleWithFeed.article.img != null && articleListImage.value) {
if (imgData != null && articleListImage.value) {
RYAsyncImage(
modifier = Modifier
.padding(start = 10.dp)
.size(80.dp)
.clip(Shape20),
data = articleWithFeed.article.img,
data = imgData,
scale = Scale.FILL,
precision = Precision.INEXACT,
size = SIZE_1000,
Expand Down
26 changes: 22 additions & 4 deletions app/src/main/java/me/ash/reader/ui/page/settings/color/flow/FlowPagePreview.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
Expand All @@ -27,6 +26,7 @@ import me.ash.reader.domain.model.feed.Feed
import me.ash.reader.domain.model.general.Filter
import me.ash.reader.infrastructure.preference.FlowArticleListTonalElevationPreference
import me.ash.reader.infrastructure.preference.FlowTopBarTonalElevationPreference
import me.ash.reader.infrastructure.preference.LocalDarkTheme
import me.ash.reader.ui.component.FilterBar
import me.ash.reader.ui.component.base.FeedbackIconButton
import me.ash.reader.ui.ext.surfaceColorAtElevation
Expand Down Expand Up @@ -77,13 +77,31 @@ fun FlowPagePreview(
tint = MaterialTheme.colorScheme.onSurface,
) {}
}, colors = TopAppBarDefaults.smallTopAppBarColors(
containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(topBarTonalElevation.value.dp),
containerColor = MaterialTheme.colorScheme.surfaceColorAtElevation(
topBarTonalElevation.value.dp
),
)
)
Spacer(modifier = Modifier.height(12.dp))

val preview = generateArticleWithFeedPreview()
val feed = preview.feed
val article = preview.article

ArticleItem(
articleWithFeed = generateArticleWithFeedPreview(),
modifier = Modifier,
feedName = feed.name,
feedIconUrl = feed.icon,
title = article.title,
shortDescription = article.shortDescription,
dateString = article.dateString,
imgData = R.drawable.animation,
isStarred = article.isStarred,
isUnread = article.isUnread,
onClick = {},
onLongClick = null
)

Spacer(modifier = Modifier.height(12.dp))
FilterBar(
filter = filter,
Expand Down Expand Up @@ -111,7 +129,7 @@ fun generateArticleWithFeedPreview(): ArticleWithFeed =
accountId = 0,
date = Date(1654053729L),
isStarred = true,
img = "https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60"
img = null
),
feed = Feed(
id = "",
Expand Down
Binary file added app/src/main/res/drawable/animation.webp
View file
Open in desktop
Binary file not shown.
Loading