justinzeus/Wholphin
1
0
Fork 0
mirror of https://github.com/JustinZeus/Wholphin.git synced 2026-07-08 23:51:21 +02:00
Code Issues Projects Packages Wiki Activity Actions

Make watched indicator more clear (#102)

Browse source 
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
<img width="451" height="260" alt="watched_before 2"
src="https://github.com/user-attachments/assets/734d1bb7-4604-4ef1-bb40-fc08403d58fe"
/>

## After
<img width="458" height="272" alt="watched_after 2"
src="https://github.com/user-attachments/assets/d39c4e8e-e483-4843-9083-33209302feb1"
/>
This commit is contained in:
damontecres 2025-10-28 20:47:17 -04:00 • committed by GitHub
parent 06f2c1260d
commit d578dca0cf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 70 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

12
app/src/main/java/com/github/damontecres/wholphin/ui/cards/BannerCard.kt
View file

@ -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(

29
app/src/main/java/com/github/damontecres/wholphin/ui/cards/ItemCardImage.kt
View file

@ -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,27 +125,25 @@ 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),
Row(
horizontalArrangement = Arrangement.spacedBy(4.dp),
verticalAlignment = Alignment.CenterVertically,
modifier =
Modifier
.align(Alignment.TopEnd)
.size(36.dp)
.padding(4.dp),
)
.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
.padding(4.dp)
.background(
MaterialTheme.colorScheme.border,
AppColors.TransparentBlack50,
shape = RoundedCornerShape(25),
).align(Alignment.TopEnd),
),
) {
Text(
text = unwatchedCount.toString(),
@ -156,6 +154,7 @@ fun ItemCardImage(
)
}
}
}
watchedPercent?.let { percent ->
Box(

39
app/src/main/java/com/github/damontecres/wholphin/ui/cards/WatchedIcon.kt Normal file
View file

@ -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))
}
}