From d578dca0cf297a9e695ec3e9c92c91ecbb69feb3 Mon Sep 17 00:00:00 2001 From: damontecres <154766448+damontecres@users.noreply.github.com> Date: Tue, 28 Oct 2025 20:47:17 -0400 Subject: [PATCH] Make watched indicator more clear (#102) Closes #89 Updates the watched indicator to be more clear. The checkmark is filled in and there's a slight border to add contrast. Also this PR makes the location of the watched indicator consistent between card types and makes child counts always use a semi-transparent black background. ## Before watched_before 2 ## After watched_after 2 --- .../wholphin/ui/cards/BannerCard.kt | 12 +--- .../wholphin/ui/cards/ItemCardImage.kt | 61 +++++++++---------- .../wholphin/ui/cards/WatchedIcon.kt | 39 ++++++++++++ 3 files changed, 70 insertions(+), 42 deletions(-) create mode 100644 app/src/main/java/com/github/damontecres/wholphin/ui/cards/WatchedIcon.kt diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/BannerCard.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/BannerCard.kt index eedc8d81..1b2e90a0 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/BannerCard.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/BannerCard.kt @@ -11,8 +11,6 @@ import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -28,7 +26,6 @@ import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import androidx.tv.material3.Card import androidx.tv.material3.CardDefaults -import androidx.tv.material3.Icon import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import coil3.compose.AsyncImage @@ -100,14 +97,7 @@ fun BannerCard( .padding(4.dp), ) { if (played && (playPercent <= 0 || playPercent >= 100)) { - Icon( - imageVector = Icons.Default.CheckCircle, - contentDescription = null, - tint = MaterialTheme.colorScheme.border.copy(alpha = 1f), - modifier = - Modifier - .size(24.dp), - ) + WatchedIcon(Modifier.size(24.dp)) } if (cornerText.isNotNullOrBlank()) { Box( diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemCardImage.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemCardImage.kt index 781f23e1..1aa8fb58 100644 --- a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemCardImage.kt +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemCardImage.kt @@ -5,15 +5,15 @@ import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.foundation.Image import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.RoundedCornerShape -import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.CheckCircle import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -31,11 +31,11 @@ import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp -import androidx.tv.material3.Icon import androidx.tv.material3.MaterialTheme import androidx.tv.material3.Text import coil3.compose.AsyncImage import com.github.damontecres.wholphin.R +import com.github.damontecres.wholphin.ui.AppColors import com.github.damontecres.wholphin.ui.Cards import com.github.damontecres.wholphin.ui.FontAwesome import com.github.damontecres.wholphin.ui.isNotNullOrBlank @@ -125,35 +125,34 @@ fun ItemCardImage( fontFamily = FontAwesome, ) } - if (watched && (watchedPercent == null || watchedPercent <= 0.0 || watchedPercent >= 100.0)) { - Icon( - imageVector = Icons.Default.CheckCircle, - contentDescription = null, - tint = MaterialTheme.colorScheme.border.copy(alpha = 1f), - modifier = - Modifier - .align(Alignment.TopEnd) - .size(36.dp) - .padding(4.dp), - ) - } - if (unwatchedCount > 0) { - Box( - modifier = - Modifier - .padding(4.dp) - .background( - MaterialTheme.colorScheme.border, - shape = RoundedCornerShape(25), - ).align(Alignment.TopEnd), - ) { - Text( - text = unwatchedCount.toString(), - color = MaterialTheme.colorScheme.onSurface, - style = MaterialTheme.typography.bodyMedium, + Row( + horizontalArrangement = Arrangement.spacedBy(4.dp), + verticalAlignment = Alignment.CenterVertically, + modifier = + Modifier + .padding(4.dp) + .align(Alignment.TopEnd), + ) { + if (watched && (watchedPercent == null || watchedPercent <= 0.0 || watchedPercent >= 100.0)) { + WatchedIcon(Modifier.size(24.dp)) + } + if (unwatchedCount > 0) { + Box( + modifier = + Modifier + .background( + AppColors.TransparentBlack50, + shape = RoundedCornerShape(25), + ), + ) { + Text( + text = unwatchedCount.toString(), + color = MaterialTheme.colorScheme.onSurface, + style = MaterialTheme.typography.bodyMedium, // fontSize = 16.sp, - modifier = Modifier.padding(4.dp), - ) + modifier = Modifier.padding(4.dp), + ) + } } } diff --git a/app/src/main/java/com/github/damontecres/wholphin/ui/cards/WatchedIcon.kt b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/WatchedIcon.kt new file mode 100644 index 00000000..9de8a726 --- /dev/null +++ b/app/src/main/java/com/github/damontecres/wholphin/ui/cards/WatchedIcon.kt @@ -0,0 +1,39 @@ +package com.github.damontecres.wholphin.ui.cards + +import androidx.compose.foundation.background +import androidx.compose.foundation.border +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.shape.CircleShape +import androidx.compose.material.icons.Icons +import androidx.compose.material.icons.filled.Check +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.dp +import androidx.tv.material3.Icon +import androidx.tv.material3.MaterialTheme +import com.github.damontecres.wholphin.ui.PreviewTvSpec +import com.github.damontecres.wholphin.ui.theme.WholphinTheme + +@Composable +fun WatchedIcon(modifier: Modifier = Modifier) { + Icon( + imageVector = Icons.Default.Check, + contentDescription = null, + tint = Color.White, + modifier = + modifier + .background(MaterialTheme.colorScheme.border.copy(alpha = 1f), shape = CircleShape) + .border(.5.dp, Color.Black, CircleShape) + .padding(2.dp), + ) +} + +@PreviewTvSpec +@Composable +private fun WatchedIconPreview() { + WholphinTheme { + WatchedIcon(Modifier.size(64.dp)) + } +}