From 249c4bb0c334d47f63dc76da1cc1ba997a733239 Mon Sep 17 00:00:00 2001 From: Cuong-Tran Date: Mon, 3 Mar 2025 13:02:05 +0700 Subject: [PATCH] Improve Update view's UI & order (always show latest unread chapter first) (#743) * adjust Updates view item height & caret animation * reorder Updates view to always show unread chapter first * revert to Book cover * reorder read chapter showng latest chapter first * adjust carret position --- .../presentation/updates/UpdatesUiItem.kt | 43 ++++++++++++------- .../ui/updates/UpdatesScreenModel.kt | 16 +++++-- 2 files changed, 39 insertions(+), 20 deletions(-) diff --git a/app/src/main/java/eu/kanade/presentation/updates/UpdatesUiItem.kt b/app/src/main/java/eu/kanade/presentation/updates/UpdatesUiItem.kt index c7ec4a15e..5de9a02ab 100644 --- a/app/src/main/java/eu/kanade/presentation/updates/UpdatesUiItem.kt +++ b/app/src/main/java/eu/kanade/presentation/updates/UpdatesUiItem.kt @@ -1,5 +1,8 @@ package eu.kanade.presentation.updates +import androidx.compose.animation.graphics.res.animatedVectorResource +import androidx.compose.animation.graphics.res.rememberAnimatedVectorPainter +import androidx.compose.animation.graphics.vector.AnimatedImageVector import androidx.compose.foundation.combinedClickable import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column @@ -15,8 +18,6 @@ import androidx.compose.foundation.lazy.items import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Bookmark import androidx.compose.material.icons.filled.Circle -import androidx.compose.material.icons.filled.KeyboardArrowDown -import androidx.compose.material.icons.filled.KeyboardArrowUp import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.LocalContentColor @@ -46,6 +47,7 @@ import eu.kanade.presentation.manga.components.MangaCover import eu.kanade.presentation.manga.components.RatioSwitchToPanorama import eu.kanade.presentation.util.animateItemFastScroll import eu.kanade.presentation.util.relativeTimeSpanString +import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.data.download.model.Download import eu.kanade.tachiyomi.ui.updates.UpdatesItem import eu.kanade.tachiyomi.ui.updates.groupByDateAndManga @@ -200,7 +202,7 @@ private fun UpdatesUiItem( ) .padding( // KMK --> - vertical = MaterialTheme.padding.extraSmall, + vertical = if (isLeader) MaterialTheme.padding.extraSmall else 0.dp, // KMK <-- horizontal = MaterialTheme.padding.medium, ), @@ -262,13 +264,17 @@ private fun UpdatesUiItem( .padding(horizontal = MaterialTheme.padding.medium) .weight(1f), ) { - Text( - text = update.mangaTitle, - maxLines = 1, - style = MaterialTheme.typography.bodyMedium, - color = LocalContentColor.current.copy(alpha = textAlpha), - overflow = TextOverflow.Ellipsis, - ) + // KMK --> + if (isLeader) { + // KMK <-- + Text( + text = update.mangaTitle, + maxLines = 1, + style = MaterialTheme.typography.bodyMedium, + color = LocalContentColor.current.copy(alpha = textAlpha), + overflow = TextOverflow.Ellipsis, + ) + } Row(verticalAlignment = Alignment.CenterVertically) { var textHeight by remember { mutableIntStateOf(0) } @@ -342,12 +348,16 @@ fun CollapseButton( ) { Box( modifier = modifier - .size(IndicatorSize), - contentAlignment = Alignment.Center, + .size(IndicatorSize + MaterialTheme.padding.extraSmall), + contentAlignment = Alignment.TopCenter, ) { - IconButton(onClick = { collapseToggle() }) { + IconButton( + onClick = { collapseToggle() }, + modifier = Modifier.size(IndicatorSize), + ) { + val image = AnimatedImageVector.animatedVectorResource(R.drawable.anim_caret_down) Icon( - imageVector = if (expanded) Icons.Default.KeyboardArrowUp else Icons.Default.KeyboardArrowDown, + painter = rememberAnimatedVectorPainter(image, !expanded), contentDescription = null, tint = MaterialTheme.colorScheme.primary, ) @@ -355,7 +365,8 @@ fun CollapseButton( } } -private val IndicatorSize = 18.dp -private val UpdateItemPanoramaWidth = 126.dp +private val IndicatorSize = MaterialTheme.padding.large + +private val UpdateItemPanoramaWidth = 126.dp // Book cover private val UpdateItemWidth = 56.dp // KMK <-- diff --git a/app/src/main/java/eu/kanade/tachiyomi/ui/updates/UpdatesScreenModel.kt b/app/src/main/java/eu/kanade/tachiyomi/ui/updates/UpdatesScreenModel.kt index e1da7dbe6..7e0c60386 100644 --- a/app/src/main/java/eu/kanade/tachiyomi/ui/updates/UpdatesScreenModel.kt +++ b/app/src/main/java/eu/kanade/tachiyomi/ui/updates/UpdatesScreenModel.kt @@ -408,15 +408,22 @@ class UpdatesScreenModel( // KMK --> var lastMangaId = -1L // KMK <-- - return items.groupBy { it.update.dateFetch.toLocalDate() } + return items + // KMK --> + .groupBy { it.update.dateFetch.toLocalDate() } .flatMap { groupDate -> groupDate.value.groupBy { it.update.mangaId } - .flatMap { groupManga -> - val list = groupManga.value - list.sortedBy { it.update.dateFetch } + .flatMap { mangaChapters -> + val list = mangaChapters.value + val (read, unread) = list.partition { it.update.read } + ( + unread.sortedBy { it.update.dateFetch } + + read.sortedByDescending { it.update.dateFetch } + ) .map { UpdatesUiModel.Item(it, list.size > 1) } } } + // KMK <-- .insertSeparators { before, after -> val beforeDate = before?.item?.update?.dateFetch?.toLocalDate() val afterDate = after?.item?.update?.dateFetch?.toLocalDate() @@ -469,5 +476,6 @@ data class UpdatesItem( } // KMK --> +/** String to identify which manga's update on which day it is collapsing */ fun UpdatesWithRelations.groupByDateAndManga() = "${dateFetch.toLocalDate().toEpochDay()}-$mangaId" // KMK <--