From 4b8fe6868e040ee28261b7ee66a58a139fd44eff Mon Sep 17 00:00:00 2001 From: Cuong-Tran Date: Mon, 24 Jun 2024 14:47:23 +0700 Subject: [PATCH] feat: scrollbar for related mangas screen Fast scroll for RelatedMangasList also fix padding refactor: Replace contentPadding with modifier in RelatedMangasList --- .../browse/RelatedMangasScreen.kt | 6 +--- .../RelatedMangasComfortableGrid.kt | 8 +++-- .../components/RelatedMangasCompactGrid.kt | 8 +++-- .../browse/components/RelatedMangasList.kt | 29 ++++++++++++------- .../kanade/presentation/manga/MangaScreen.kt | 5 ++++ 5 files changed, 35 insertions(+), 21 deletions(-) diff --git a/app/src/main/java/eu/kanade/presentation/browse/RelatedMangasScreen.kt b/app/src/main/java/eu/kanade/presentation/browse/RelatedMangasScreen.kt index d278d278e..153ccbc31 100644 --- a/app/src/main/java/eu/kanade/presentation/browse/RelatedMangasScreen.kt +++ b/app/src/main/java/eu/kanade/presentation/browse/RelatedMangasScreen.kt @@ -119,11 +119,7 @@ fun RelatedMangaTitle( ) { Row( modifier = modifier - .padding( - start = MaterialTheme.padding.medium, - end = MaterialTheme.padding.small, - top = MaterialTheme.padding.small, - ) + .padding(top = MaterialTheme.padding.small) .fillMaxWidth() .let { if (onLongClick == null) { diff --git a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasComfortableGrid.kt b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasComfortableGrid.kt index 7c5a9e67c..ce275b176 100644 --- a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasComfortableGrid.kt +++ b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasComfortableGrid.kt @@ -4,7 +4,6 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.lazy.grid.GridCells -import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable @@ -20,6 +19,7 @@ import eu.kanade.tachiyomi.ui.manga.RelatedManga import tachiyomi.domain.manga.model.Manga import tachiyomi.i18n.MR import tachiyomi.i18n.kmk.KMR +import tachiyomi.presentation.core.components.FastScrollLazyVerticalGrid import tachiyomi.presentation.core.components.material.padding import tachiyomi.presentation.core.i18n.stringResource import tachiyomi.presentation.core.util.plus @@ -36,9 +36,11 @@ fun RelatedMangasComfortableGrid( onKeywordLongClick: (String) -> Unit, selection: List, ) { - LazyVerticalGrid( + FastScrollLazyVerticalGrid( columns = columns, - contentPadding = contentPadding + PaddingValues(MaterialTheme.padding.small), + contentPadding = contentPadding + PaddingValues(horizontal = MaterialTheme.padding.small), + // padding for scrollbar + topContentPadding = contentPadding.calculateTopPadding(), verticalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridVerticalSpacer), horizontalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridHorizontalSpacer), ) { diff --git a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasCompactGrid.kt b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasCompactGrid.kt index b288484f4..5f247ee1b 100644 --- a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasCompactGrid.kt +++ b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasCompactGrid.kt @@ -4,7 +4,6 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.lazy.grid.GridCells -import androidx.compose.foundation.lazy.grid.LazyVerticalGrid import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable @@ -20,6 +19,7 @@ import eu.kanade.tachiyomi.ui.manga.RelatedManga import tachiyomi.domain.manga.model.Manga import tachiyomi.i18n.MR import tachiyomi.i18n.kmk.KMR +import tachiyomi.presentation.core.components.FastScrollLazyVerticalGrid import tachiyomi.presentation.core.components.material.padding import tachiyomi.presentation.core.i18n.stringResource import tachiyomi.presentation.core.util.plus @@ -36,9 +36,11 @@ fun RelatedMangasCompactGrid( onKeywordLongClick: (String) -> Unit, selection: List, ) { - LazyVerticalGrid( + FastScrollLazyVerticalGrid( columns = columns, - contentPadding = contentPadding + PaddingValues(MaterialTheme.padding.small), + contentPadding = contentPadding + PaddingValues(horizontal = MaterialTheme.padding.small), + // padding for scrollbar + topContentPadding = contentPadding.calculateTopPadding(), verticalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridVerticalSpacer), horizontalArrangement = Arrangement.spacedBy(CommonMangaItemDefaults.GridHorizontalSpacer), ) { diff --git a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasList.kt b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasList.kt index 044ec1d46..6e907b13a 100644 --- a/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasList.kt +++ b/app/src/main/java/eu/kanade/presentation/browse/components/RelatedMangasList.kt @@ -3,7 +3,6 @@ package eu.kanade.presentation.browse.components import androidx.compose.foundation.background import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable @@ -17,6 +16,8 @@ import eu.kanade.tachiyomi.ui.manga.RelatedManga import tachiyomi.domain.manga.model.Manga import tachiyomi.i18n.MR import tachiyomi.i18n.kmk.KMR +import tachiyomi.presentation.core.components.FastScrollLazyColumn +import tachiyomi.presentation.core.components.Scroller.STICKY_HEADER_KEY_PREFIX import tachiyomi.presentation.core.components.material.padding import tachiyomi.presentation.core.i18n.stringResource @@ -31,30 +32,33 @@ fun RelatedMangasList( onKeywordLongClick: (String) -> Unit, selection: List, ) { - LazyColumn( - modifier = Modifier.padding( - top = contentPadding.calculateTopPadding(), - ), - contentPadding = PaddingValues(MaterialTheme.padding.small), + FastScrollLazyColumn( + // Using modifier instead of contentPdding so we can use stickyHeader + modifier = Modifier.padding(contentPadding), ) { relatedMangas.forEach { related -> val isLoading = related is RelatedManga.Loading if (isLoading) { item(key = "$related#divider") { HorizontalDivider() } - stickyHeader(key = "$related#header") { + stickyHeader(key = "$STICKY_HEADER_KEY_PREFIX$related#header") { RelatedMangaTitle( title = stringResource(MR.strings.loading), subtitle = null, onClick = {}, onLongClick = null, - modifier = Modifier.background(MaterialTheme.colorScheme.background), + modifier = Modifier + .padding( + start = MaterialTheme.padding.small, + end = MaterialTheme.padding.medium, + ) + .background(MaterialTheme.colorScheme.background), ) } item(key = "$related#content") { RelatedMangasLoadingItem() } } else { val relatedManga = related as RelatedManga.Success item(key = "${related.keyword}#divider") { HorizontalDivider() } - stickyHeader(key = "${related.keyword}#header") { + stickyHeader(key = "$STICKY_HEADER_KEY_PREFIX${related.keyword}#header") { RelatedMangaTitle( title = if (relatedManga.keyword.isNotBlank()) { stringResource(KMR.strings.related_mangas_more) @@ -68,7 +72,12 @@ fun RelatedMangasList( onLongClick = { if (relatedManga.keyword.isNotBlank()) onKeywordLongClick(relatedManga.keyword) }, - modifier = Modifier.background(MaterialTheme.colorScheme.background), + modifier = Modifier + .padding( + start = MaterialTheme.padding.small, + end = MaterialTheme.padding.medium, + ) + .background(MaterialTheme.colorScheme.background), ) } items(key = { relatedManga.mangaList[it].id }, count = relatedManga.mangaList.size) { index -> diff --git a/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt b/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt index 8142e007f..1784f29ee 100644 --- a/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt +++ b/app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt @@ -117,6 +117,7 @@ import tachiyomi.presentation.core.components.VerticalFastScroller import tachiyomi.presentation.core.components.material.ExtendedFloatingActionButton import tachiyomi.presentation.core.components.material.PullRefresh import tachiyomi.presentation.core.components.material.Scaffold +import tachiyomi.presentation.core.components.material.padding import tachiyomi.presentation.core.i18n.stringResource import tachiyomi.presentation.core.util.isScrolledToEnd import tachiyomi.presentation.core.util.isScrollingUp @@ -632,6 +633,8 @@ private fun MangaScreenSmallImpl( subtitle = null, onClick = onRelatedMangasScreenClick, onLongClick = null, + modifier = Modifier + .padding(horizontal = MaterialTheme.padding.medium), ) RelatedMangas( relatedMangas = state.relatedMangasSorted, @@ -1039,6 +1042,8 @@ private fun MangaScreenLargeImpl( subtitle = null, onClick = onRelatedMangasScreenClick, onLongClick = null, + modifier = Modifier + .padding(horizontal = MaterialTheme.padding.medium), ) RelatedMangas( relatedMangas = state.relatedMangasSorted,