Move manga screen filter sheet to toolbar

Closes #6927
This makes it more consistent with the library. Tapping the chapters heading still opens the sheet for convenience.
This commit is contained in:
arkon 2022-10-14 16:30:14 -04:00
parent bc1fbfac9d
commit b25ca7617d
7 changed files with 55 additions and 71 deletions

View File

@ -59,9 +59,9 @@ import eu.kanade.presentation.components.VerticalFastScroller
import eu.kanade.presentation.manga.components.ChapterHeader import eu.kanade.presentation.manga.components.ChapterHeader
import eu.kanade.presentation.manga.components.ExpandableMangaDescription import eu.kanade.presentation.manga.components.ExpandableMangaDescription
import eu.kanade.presentation.manga.components.MangaActionRow import eu.kanade.presentation.manga.components.MangaActionRow
import eu.kanade.presentation.manga.components.MangaAppBar
import eu.kanade.presentation.manga.components.MangaChapterListItem import eu.kanade.presentation.manga.components.MangaChapterListItem
import eu.kanade.presentation.manga.components.MangaInfoBox import eu.kanade.presentation.manga.components.MangaInfoBox
import eu.kanade.presentation.manga.components.MangaToolbar
import eu.kanade.presentation.util.isScrolledToEnd import eu.kanade.presentation.util.isScrolledToEnd
import eu.kanade.presentation.util.isScrollingUp import eu.kanade.presentation.util.isScrollingUp
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
@ -119,7 +119,7 @@ fun MangaScreen(
onWebViewClicked = onWebViewClicked, onWebViewClicked = onWebViewClicked,
onTrackingClicked = onTrackingClicked, onTrackingClicked = onTrackingClicked,
onTagClicked = onTagClicked, onTagClicked = onTagClicked,
onFilterButtonClicked = onFilterButtonClicked, onFilterClicked = onFilterButtonClicked,
onRefresh = onRefresh, onRefresh = onRefresh,
onContinueReading = onContinueReading, onContinueReading = onContinueReading,
onSearch = onSearch, onSearch = onSearch,
@ -179,7 +179,7 @@ private fun MangaScreenSmallImpl(
onWebViewClicked: (() -> Unit)?, onWebViewClicked: (() -> Unit)?,
onTrackingClicked: (() -> Unit)?, onTrackingClicked: (() -> Unit)?,
onTagClicked: (String) -> Unit, onTagClicked: (String) -> Unit,
onFilterButtonClicked: () -> Unit, onFilterClicked: () -> Unit,
onRefresh: () -> Unit, onRefresh: () -> Unit,
onContinueReading: () -> Unit, onContinueReading: () -> Unit,
onSearch: (query: String, global: Boolean) -> Unit, onSearch: (query: String, global: Boolean) -> Unit,
@ -233,17 +233,19 @@ private fun MangaScreenSmallImpl(
val animatedBgAlpha by animateFloatAsState( val animatedBgAlpha by animateFloatAsState(
if (firstVisibleItemIndex > 0 || firstVisibleItemScrollOffset > 0) 1f else 0f, if (firstVisibleItemIndex > 0 || firstVisibleItemScrollOffset > 0) 1f else 0f,
) )
MangaAppBar( MangaToolbar(
title = state.manga.title, title = state.manga.title,
titleAlphaProvider = { animatedTitleAlpha }, titleAlphaProvider = { animatedTitleAlpha },
backgroundAlphaProvider = { animatedBgAlpha }, backgroundAlphaProvider = { animatedBgAlpha },
hasFilters = state.manga.chaptersFiltered(),
incognitoMode = state.isIncognitoMode, incognitoMode = state.isIncognitoMode,
downloadedOnlyMode = state.isDownloadedOnlyMode, downloadedOnlyMode = state.isDownloadedOnlyMode,
onBackClicked = internalOnBackPressed, onBackClicked = internalOnBackPressed,
onShareClicked = onShareClicked, onClickFilter = onFilterClicked,
onDownloadClicked = onDownloadActionClicked, onClickShare = onShareClicked,
onEditCategoryClicked = onEditCategoryClicked, onClickDownload = onDownloadActionClicked,
onMigrateClicked = onMigrateClicked, onClickEditCategory = onEditCategoryClicked,
onClickMigrate = onMigrateClicked,
actionModeCounter = chapters.count { it.selected }, actionModeCounter = chapters.count { it.selected },
onSelectAll = { onAllChapterSelected(true) }, onSelectAll = { onAllChapterSelected(true) },
onInvertSelection = { onInvertSelection() }, onInvertSelection = { onInvertSelection() },
@ -355,8 +357,7 @@ private fun MangaScreenSmallImpl(
) { ) {
ChapterHeader( ChapterHeader(
chapterCount = chapters.size, chapterCount = chapters.size,
isChapterFiltered = state.manga.chaptersFiltered(), onClick = onFilterClicked,
onFilterButtonClicked = onFilterButtonClicked,
) )
} }
@ -440,18 +441,20 @@ fun MangaScreenLargeImpl(
Scaffold( Scaffold(
modifier = Modifier.padding(insetPadding), modifier = Modifier.padding(insetPadding),
topBar = { topBar = {
MangaAppBar( MangaToolbar(
modifier = Modifier.onSizeChanged { onTopBarHeightChanged(it.height) }, modifier = Modifier.onSizeChanged { onTopBarHeightChanged(it.height) },
title = state.manga.title, title = state.manga.title,
titleAlphaProvider = { if (chapters.any { it.selected }) 1f else 0f }, titleAlphaProvider = { if (chapters.any { it.selected }) 1f else 0f },
backgroundAlphaProvider = { 1f }, backgroundAlphaProvider = { 1f },
hasFilters = state.manga.chaptersFiltered(),
incognitoMode = state.isIncognitoMode, incognitoMode = state.isIncognitoMode,
downloadedOnlyMode = state.isDownloadedOnlyMode, downloadedOnlyMode = state.isDownloadedOnlyMode,
onBackClicked = internalOnBackPressed, onBackClicked = internalOnBackPressed,
onShareClicked = onShareClicked, onClickFilter = onFilterButtonClicked,
onDownloadClicked = onDownloadActionClicked, onClickShare = onShareClicked,
onEditCategoryClicked = onEditCategoryClicked, onClickDownload = onDownloadActionClicked,
onMigrateClicked = onMigrateClicked, onClickEditCategory = onEditCategoryClicked,
onClickMigrate = onMigrateClicked,
actionModeCounter = chapters.count { it.selected }, actionModeCounter = chapters.count { it.selected },
onSelectAll = { onAllChapterSelected(true) }, onSelectAll = { onAllChapterSelected(true) },
onInvertSelection = { onInvertSelection() }, onInvertSelection = { onInvertSelection() },
@ -558,8 +561,7 @@ fun MangaScreenLargeImpl(
) { ) {
ChapterHeader( ChapterHeader(
chapterCount = chapters.size, chapterCount = chapters.size,
isChapterFiltered = state.manga.chaptersFiltered(), onClick = onFilterButtonClicked,
onFilterButtonClicked = onFilterButtonClicked,
) )
} }

View File

@ -4,32 +4,25 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.FilterList
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.pluralStringResource import androidx.compose.ui.res.pluralStringResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.util.system.getResourceColor
@Composable @Composable
fun ChapterHeader( fun ChapterHeader(
chapterCount: Int?, chapterCount: Int?,
isChapterFiltered: Boolean, onClick: () -> Unit,
onFilterButtonClicked: () -> Unit,
) { ) {
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.clickable(onClick = onFilterButtonClicked) .clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 4.dp), .padding(horizontal = 16.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
@ -43,14 +36,5 @@ fun ChapterHeader(
modifier = Modifier.weight(1f), modifier = Modifier.weight(1f),
color = MaterialTheme.colorScheme.onBackground, color = MaterialTheme.colorScheme.onBackground,
) )
Icon(
imageVector = Icons.Default.FilterList,
contentDescription = stringResource(R.string.action_filter),
tint = if (isChapterFiltered) {
Color(LocalContext.current.getResourceColor(R.attr.colorFilterActive))
} else {
MaterialTheme.colorScheme.onBackground
},
)
} }
} }

View File

@ -11,10 +11,11 @@ import androidx.compose.material.icons.filled.FlipToBack
import androidx.compose.material.icons.filled.MoreVert import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.material.icons.filled.SelectAll import androidx.compose.material.icons.filled.SelectAll
import androidx.compose.material.icons.outlined.Download import androidx.compose.material.icons.outlined.Download
import androidx.compose.material.icons.outlined.Share import androidx.compose.material.icons.outlined.FilterList
import androidx.compose.material3.DropdownMenuItem import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBar
@ -31,21 +32,24 @@ import androidx.compose.ui.unit.dp
import eu.kanade.presentation.components.AppStateBanners import eu.kanade.presentation.components.AppStateBanners
import eu.kanade.presentation.components.DropdownMenu import eu.kanade.presentation.components.DropdownMenu
import eu.kanade.presentation.manga.DownloadAction import eu.kanade.presentation.manga.DownloadAction
import eu.kanade.presentation.theme.active
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
@Composable @Composable
fun MangaAppBar( fun MangaToolbar(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
title: String, title: String,
titleAlphaProvider: () -> Float, titleAlphaProvider: () -> Float,
backgroundAlphaProvider: () -> Float = titleAlphaProvider, backgroundAlphaProvider: () -> Float = titleAlphaProvider,
hasFilters: Boolean,
incognitoMode: Boolean, incognitoMode: Boolean,
downloadedOnlyMode: Boolean, downloadedOnlyMode: Boolean,
onBackClicked: () -> Unit, onBackClicked: () -> Unit,
onShareClicked: (() -> Unit)?, onClickFilter: () -> Unit,
onDownloadClicked: ((DownloadAction) -> Unit)?, onClickShare: (() -> Unit)?,
onEditCategoryClicked: (() -> Unit)?, onClickDownload: ((DownloadAction) -> Unit)?,
onMigrateClicked: (() -> Unit)?, onClickEditCategory: (() -> Unit)?,
onClickMigrate: (() -> Unit)?,
// For action mode // For action mode
actionModeCounter: Int, actionModeCounter: Int,
onSelectAll: () -> Unit, onSelectAll: () -> Unit,
@ -87,16 +91,7 @@ fun MangaAppBar(
) )
} }
} else { } else {
if (onShareClicked != null) { if (onClickDownload != null) {
IconButton(onClick = onShareClicked) {
Icon(
imageVector = Icons.Outlined.Share,
contentDescription = stringResource(R.string.action_share),
)
}
}
if (onDownloadClicked != null) {
val (downloadExpanded, onDownloadExpanded) = remember { mutableStateOf(false) } val (downloadExpanded, onDownloadExpanded) = remember { mutableStateOf(false) }
Box { Box {
IconButton(onClick = { onDownloadExpanded(!downloadExpanded) }) { IconButton(onClick = { onDownloadExpanded(!downloadExpanded) }) {
@ -113,42 +108,42 @@ fun MangaAppBar(
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_1)) }, text = { Text(text = stringResource(R.string.download_1)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.NEXT_1_CHAPTER) onClickDownload(DownloadAction.NEXT_1_CHAPTER)
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_5)) }, text = { Text(text = stringResource(R.string.download_5)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.NEXT_5_CHAPTERS) onClickDownload(DownloadAction.NEXT_5_CHAPTERS)
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_10)) }, text = { Text(text = stringResource(R.string.download_10)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.NEXT_10_CHAPTERS) onClickDownload(DownloadAction.NEXT_10_CHAPTERS)
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_custom)) }, text = { Text(text = stringResource(R.string.download_custom)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.CUSTOM) onClickDownload(DownloadAction.CUSTOM)
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_unread)) }, text = { Text(text = stringResource(R.string.download_unread)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.UNREAD_CHAPTERS) onClickDownload(DownloadAction.UNREAD_CHAPTERS)
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_all)) }, text = { Text(text = stringResource(R.string.download_all)) },
onClick = { onClick = {
onDownloadClicked(DownloadAction.ALL_CHAPTERS) onClickDownload(DownloadAction.ALL_CHAPTERS)
onDismissRequest() onDismissRequest()
}, },
) )
@ -156,7 +151,12 @@ fun MangaAppBar(
} }
} }
if (onEditCategoryClicked != null && onMigrateClicked != null) { val filterTint = if (hasFilters) MaterialTheme.colorScheme.active else LocalContentColor.current
IconButton(onClick = onClickFilter) {
Icon(Icons.Outlined.FilterList, contentDescription = stringResource(R.string.action_filter), tint = filterTint)
}
if (onClickEditCategory != null && onClickMigrate != null) {
val (moreExpanded, onMoreExpanded) = remember { mutableStateOf(false) } val (moreExpanded, onMoreExpanded) = remember { mutableStateOf(false) }
Box { Box {
IconButton(onClick = { onMoreExpanded(!moreExpanded) }) { IconButton(onClick = { onMoreExpanded(!moreExpanded) }) {
@ -170,17 +170,26 @@ fun MangaAppBar(
expanded = moreExpanded, expanded = moreExpanded,
onDismissRequest = onDismissRequest, onDismissRequest = onDismissRequest,
) { ) {
if (onClickShare != null) {
DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_share)) },
onClick = {
onClickShare()
onDismissRequest()
},
)
}
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_edit_categories)) }, text = { Text(text = stringResource(R.string.action_edit_categories)) },
onClick = { onClick = {
onEditCategoryClicked() onClickEditCategory()
onDismissRequest() onDismissRequest()
}, },
) )
DropdownMenuItem( DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_migrate)) }, text = { Text(text = stringResource(R.string.action_migrate)) },
onClick = { onClick = {
onMigrateClicked() onClickMigrate()
onDismissRequest() onDismissRequest()
}, },
) )

View File

@ -6,9 +6,6 @@
<!-- Theme Colors --> <!-- Theme Colors -->
<item name="colorSurface">@color/surface_amoled</item> <item name="colorSurface">@color/surface_amoled</item>
<item name="android:colorBackground">@color/background_amoled</item> <item name="android:colorBackground">@color/background_amoled</item>
<!-- Custom Attributes-->
<item name="colorFilterActive">@color/filter_dark</item>
</style> </style>
</resources> </resources>

View File

@ -12,6 +12,4 @@
<attr name="summary" format="reference|string" /> <attr name="summary" format="reference|string" />
</declare-styleable> </declare-styleable>
<attr name="colorFilterActive" format="reference|integer"/>
</resources> </resources>

View File

@ -19,9 +19,6 @@
<color name="surface_amoled">#000001</color> <color name="surface_amoled">#000001</color>
<color name="background_amoled">#000000</color> <color name="background_amoled">#000000</color>
<color name="filter_light">#FFC107</color>
<color name="filter_dark">#FFEB3B</color>
<color name="reader_background_dark">#202125</color> <color name="reader_background_dark">#202125</color>
<!-- Material Design Colors --> <!-- Material Design Colors -->

View File

@ -79,9 +79,6 @@
<item name="sliderStyle">@style/Widget.Tachiyomi.Slider</item> <item name="sliderStyle">@style/Widget.Tachiyomi.Slider</item>
<item name="materialCardViewStyle">@style/Widget.Material3.CardView.Elevated</item> <item name="materialCardViewStyle">@style/Widget.Material3.CardView.Elevated</item>
<!-- Custom Attributes-->
<item name="colorFilterActive">@color/filter_light</item>
<!-- Preference text appearance --> <!-- Preference text appearance -->
<item name="android:textAppearanceListItem">?attr/textAppearanceBodyLarge</item> <item name="android:textAppearanceListItem">?attr/textAppearanceBodyLarge</item>
<item name="android:textAppearanceListItemSecondary">@style/TextAppearance.Tachiyomi.Preference.Secondary</item> <item name="android:textAppearanceListItemSecondary">@style/TextAppearance.Tachiyomi.Preference.Secondary</item>