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

View file

@ -4,32 +4,25 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
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.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
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.stringResource
import androidx.compose.ui.unit.dp
import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.util.system.getResourceColor
@Composable
fun ChapterHeader(
chapterCount: Int?,
isChapterFiltered: Boolean,
onFilterButtonClicked: () -> Unit,
onClick: () -> Unit,
) {
Row(
modifier = Modifier
.fillMaxWidth()
.clickable(onClick = onFilterButtonClicked)
.clickable(onClick = onClick)
.padding(horizontal = 16.dp, vertical = 4.dp),
verticalAlignment = Alignment.CenterVertically,
) {
@ -43,14 +36,5 @@ fun ChapterHeader(
modifier = Modifier.weight(1f),
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.SelectAll
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.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
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.DropdownMenu
import eu.kanade.presentation.manga.DownloadAction
import eu.kanade.presentation.theme.active
import eu.kanade.tachiyomi.R
@Composable
fun MangaAppBar(
fun MangaToolbar(
modifier: Modifier = Modifier,
title: String,
titleAlphaProvider: () -> Float,
backgroundAlphaProvider: () -> Float = titleAlphaProvider,
hasFilters: Boolean,
incognitoMode: Boolean,
downloadedOnlyMode: Boolean,
onBackClicked: () -> Unit,
onShareClicked: (() -> Unit)?,
onDownloadClicked: ((DownloadAction) -> Unit)?,
onEditCategoryClicked: (() -> Unit)?,
onMigrateClicked: (() -> Unit)?,
onClickFilter: () -> Unit,
onClickShare: (() -> Unit)?,
onClickDownload: ((DownloadAction) -> Unit)?,
onClickEditCategory: (() -> Unit)?,
onClickMigrate: (() -> Unit)?,
// For action mode
actionModeCounter: Int,
onSelectAll: () -> Unit,
@ -87,16 +91,7 @@ fun MangaAppBar(
)
}
} else {
if (onShareClicked != null) {
IconButton(onClick = onShareClicked) {
Icon(
imageVector = Icons.Outlined.Share,
contentDescription = stringResource(R.string.action_share),
)
}
}
if (onDownloadClicked != null) {
if (onClickDownload != null) {
val (downloadExpanded, onDownloadExpanded) = remember { mutableStateOf(false) }
Box {
IconButton(onClick = { onDownloadExpanded(!downloadExpanded) }) {
@ -113,42 +108,42 @@ fun MangaAppBar(
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_1)) },
onClick = {
onDownloadClicked(DownloadAction.NEXT_1_CHAPTER)
onClickDownload(DownloadAction.NEXT_1_CHAPTER)
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_5)) },
onClick = {
onDownloadClicked(DownloadAction.NEXT_5_CHAPTERS)
onClickDownload(DownloadAction.NEXT_5_CHAPTERS)
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_10)) },
onClick = {
onDownloadClicked(DownloadAction.NEXT_10_CHAPTERS)
onClickDownload(DownloadAction.NEXT_10_CHAPTERS)
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_custom)) },
onClick = {
onDownloadClicked(DownloadAction.CUSTOM)
onClickDownload(DownloadAction.CUSTOM)
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_unread)) },
onClick = {
onDownloadClicked(DownloadAction.UNREAD_CHAPTERS)
onClickDownload(DownloadAction.UNREAD_CHAPTERS)
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.download_all)) },
onClick = {
onDownloadClicked(DownloadAction.ALL_CHAPTERS)
onClickDownload(DownloadAction.ALL_CHAPTERS)
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) }
Box {
IconButton(onClick = { onMoreExpanded(!moreExpanded) }) {
@ -170,17 +170,26 @@ fun MangaAppBar(
expanded = moreExpanded,
onDismissRequest = onDismissRequest,
) {
if (onClickShare != null) {
DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_share)) },
onClick = {
onClickShare()
onDismissRequest()
},
)
}
DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_edit_categories)) },
onClick = {
onEditCategoryClicked()
onClickEditCategory()
onDismissRequest()
},
)
DropdownMenuItem(
text = { Text(text = stringResource(R.string.action_migrate)) },
onClick = {
onMigrateClicked()
onClickMigrate()
onDismissRequest()
},
)

View file

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

View file

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

View file

@ -19,9 +19,6 @@
<color name="surface_amoled">#000001</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>
<!-- Material Design Colors -->

View file

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