diff --git a/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt b/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt index 3c7ab0c27..b3df79442 100644 --- a/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt +++ b/app/src/main/java/eu/kanade/presentation/browse/BrowseBadges.kt @@ -1,13 +1,15 @@ package eu.kanade.presentation.browse +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.outlined.CollectionsBookmark import androidx.compose.runtime.Composable -import androidx.compose.ui.res.stringResource import eu.kanade.presentation.components.Badge -import eu.kanade.tachiyomi.R @Composable fun InLibraryBadge(enabled: Boolean) { if (enabled) { - Badge(text = stringResource(R.string.in_library)) + Badge( + imageVector = Icons.Outlined.CollectionsBookmark, + ) } } diff --git a/app/src/main/java/eu/kanade/presentation/components/Badges.kt b/app/src/main/java/eu/kanade/presentation/components/Badges.kt index b118b2bae..60533b79a 100644 --- a/app/src/main/java/eu/kanade/presentation/components/Badges.kt +++ b/app/src/main/java/eu/kanade/presentation/components/Badges.kt @@ -4,6 +4,9 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.text.InlineTextContent +import androidx.compose.foundation.text.appendInlineContent +import androidx.compose.material3.Icon import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable @@ -12,6 +15,10 @@ import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.Shape +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.text.Placeholder +import androidx.compose.ui.text.PlaceholderVerticalAlign +import androidx.compose.ui.text.buildAnnotatedString import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.unit.dp @@ -45,3 +52,47 @@ fun Badge( style = MaterialTheme.typography.bodySmall, ) } + +@Composable +fun Badge( + imageVector: ImageVector, + color: Color = MaterialTheme.colorScheme.secondary, + iconColor: Color = MaterialTheme.colorScheme.onSecondary, + shape: Shape = RectangleShape, +) { + val iconContentPlaceholder = "[icon]" + val text = buildAnnotatedString { + appendInlineContent(iconContentPlaceholder) + } + val inlineContent = mapOf( + Pair( + iconContentPlaceholder, + InlineTextContent( + Placeholder( + width = MaterialTheme.typography.bodySmall.fontSize, + height = MaterialTheme.typography.bodySmall.fontSize, + placeholderVerticalAlign = PlaceholderVerticalAlign.Center, + ), + ) { + Icon( + imageVector = imageVector, + tint = iconColor, + contentDescription = null, + ) + }, + ), + ) + + Text( + text = text, + inlineContent = inlineContent, + modifier = Modifier + .clip(shape) + .background(color) + .padding(horizontal = 3.dp, vertical = 1.dp), + color = iconColor, + fontWeight = FontWeight.Medium, + maxLines = 1, + style = MaterialTheme.typography.bodySmall, + ) +} diff --git a/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt b/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt index 30e611cd9..cf9ee2d9f 100644 --- a/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt +++ b/app/src/main/java/eu/kanade/presentation/library/components/LibraryBadges.kt @@ -1,10 +1,13 @@ package eu.kanade.presentation.library.components +import androidx.compose.foundation.layout.Column +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.outlined.Folder import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable -import androidx.compose.ui.res.stringResource import eu.kanade.presentation.components.Badge -import eu.kanade.tachiyomi.R +import eu.kanade.presentation.theme.TachiyomiTheme +import eu.kanade.presentation.util.ThemePreviews @Composable fun DownloadsBadge(count: Long) { @@ -31,9 +34,9 @@ fun LanguageBadge( ) { if (isLocal) { Badge( - text = stringResource(R.string.label_local), + imageVector = Icons.Outlined.Folder, color = MaterialTheme.colorScheme.tertiary, - textColor = MaterialTheme.colorScheme.onTertiary, + iconColor = MaterialTheme.colorScheme.onTertiary, ) } else if (sourceLanguage.isNotEmpty()) { Badge( @@ -43,3 +46,16 @@ fun LanguageBadge( ) } } + +@ThemePreviews +@Composable +private fun BadgePreview() { + TachiyomiTheme { + Column { + DownloadsBadge(count = 10) + UnreadBadge(count = 10) + LanguageBadge(isLocal = true, sourceLanguage = "EN") + LanguageBadge(isLocal = false, sourceLanguage = "EN") + } + } +}