feat: scrollbar for related mangas screen

Fast scroll for RelatedMangasList

also fix padding
refactor: Replace contentPadding with modifier in RelatedMangasList
This commit is contained in:
Cuong-Tran 2024-06-24 14:47:23 +07:00
parent e326358523
commit 4b8fe6868e
No known key found for this signature in database
GPG key ID: 733AA7624B9315C2
5 changed files with 35 additions and 21 deletions

View file

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

View file

@ -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<Manga>,
) {
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),
) {

View file

@ -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<Manga>,
) {
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),
) {

View file

@ -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<Manga>,
) {
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 ->

View file

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