Replace Local and In Library badge text with icons

Fixes #5725
This commit is contained in:
arkon 2023-02-12 17:22:34 -05:00
parent e052bdef96
commit 3a2dc46ff0
3 changed files with 76 additions and 7 deletions

View File

@ -1,13 +1,15 @@
package eu.kanade.presentation.browse 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.runtime.Composable
import androidx.compose.ui.res.stringResource
import eu.kanade.presentation.components.Badge import eu.kanade.presentation.components.Badge
import eu.kanade.tachiyomi.R
@Composable @Composable
fun InLibraryBadge(enabled: Boolean) { fun InLibraryBadge(enabled: Boolean) {
if (enabled) { if (enabled) {
Badge(text = stringResource(R.string.in_library)) Badge(
imageVector = Icons.Outlined.CollectionsBookmark,
)
} }
} }

View File

@ -4,6 +4,9 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding 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.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable 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.Color
import androidx.compose.ui.graphics.RectangleShape import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.graphics.Shape 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.text.font.FontWeight
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@ -45,3 +52,47 @@ fun Badge(
style = MaterialTheme.typography.bodySmall, 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,
)
}

View File

@ -1,10 +1,13 @@
package eu.kanade.presentation.library.components 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.material3.MaterialTheme
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.res.stringResource
import eu.kanade.presentation.components.Badge import eu.kanade.presentation.components.Badge
import eu.kanade.tachiyomi.R import eu.kanade.presentation.theme.TachiyomiTheme
import eu.kanade.presentation.util.ThemePreviews
@Composable @Composable
fun DownloadsBadge(count: Long) { fun DownloadsBadge(count: Long) {
@ -31,9 +34,9 @@ fun LanguageBadge(
) { ) {
if (isLocal) { if (isLocal) {
Badge( Badge(
text = stringResource(R.string.label_local), imageVector = Icons.Outlined.Folder,
color = MaterialTheme.colorScheme.tertiary, color = MaterialTheme.colorScheme.tertiary,
textColor = MaterialTheme.colorScheme.onTertiary, iconColor = MaterialTheme.colorScheme.onTertiary,
) )
} else if (sourceLanguage.isNotEmpty()) { } else if (sourceLanguage.isNotEmpty()) {
Badge( 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")
}
}
}