From 22c6dbda3f55d864665228b43954b8decb5dda1f Mon Sep 17 00:00:00 2001 From: arkon Date: Sun, 16 Jul 2023 09:58:52 -0400 Subject: [PATCH] Replace reader sheet dropdowns with chips --- .../library/LibrarySettingsDialog.kt | 4 +- .../reader/settings/ColorFilterPage.kt | 4 +- .../reader/settings/GeneralSettingsPage.kt | 4 +- .../reader/settings/ReadingModePage.kt | 138 ++++++++++-------- .../core/components/SettingsItems.kt | 4 +- 5 files changed, 87 insertions(+), 67 deletions(-) diff --git a/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt b/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt index 4236d21dc6..948f5ad560 100644 --- a/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt +++ b/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt @@ -27,7 +27,7 @@ import tachiyomi.domain.library.model.sort import tachiyomi.domain.library.service.LibraryPreferences import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.HeadingItem -import tachiyomi.presentation.core.components.SettingsFlowRow +import tachiyomi.presentation.core.components.SettingsChipRow import tachiyomi.presentation.core.components.SliderItem import tachiyomi.presentation.core.components.SortItem import tachiyomi.presentation.core.components.TriStateItem @@ -181,7 +181,7 @@ private fun ColumnScope.DisplayPage( screenModel: LibrarySettingsScreenModel, ) { val displayMode by screenModel.libraryPreferences.libraryDisplayMode().collectAsState() - SettingsFlowRow(R.string.action_display_mode) { + SettingsChipRow(R.string.action_display_mode) { displayModes.map { (titleRes, mode) -> FilterChip( selected = displayMode == mode, diff --git a/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt b/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt index 0497986cf7..94aa4fe9a3 100644 --- a/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt +++ b/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt @@ -17,7 +17,7 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel import tachiyomi.core.preference.getAndSet import tachiyomi.presentation.core.components.CheckboxItem -import tachiyomi.presentation.core.components.SettingsFlowRow +import tachiyomi.presentation.core.components.SettingsChipRow import tachiyomi.presentation.core.components.SliderItem @Composable @@ -124,7 +124,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) ) val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState() - SettingsFlowRow(R.string.pref_color_filter_mode) { + SettingsChipRow(R.string.pref_color_filter_mode) { colorFilterModes.mapIndexed { index, it -> FilterChip( selected = colorFilterMode == index, diff --git a/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt b/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt index 263831f740..74dd37f67d 100644 --- a/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt +++ b/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt @@ -11,7 +11,7 @@ import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel import tachiyomi.presentation.core.components.CheckboxItem -import tachiyomi.presentation.core.components.SettingsFlowRow +import tachiyomi.presentation.core.components.SettingsChipRow private val themes = listOf( R.string.black_background to 1, @@ -23,7 +23,7 @@ private val themes = listOf( @Composable internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) { val readerTheme by screenModel.preferences.readerTheme().collectAsState() - SettingsFlowRow(R.string.pref_reader_theme) { + SettingsChipRow(R.string.pref_reader_theme) { themes.map { (labelRes, value) -> FilterChip( selected = readerTheme == value, diff --git a/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt b/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt index 7ada769df3..f802b95b32 100644 --- a/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt +++ b/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt @@ -1,6 +1,8 @@ package eu.kanade.presentation.reader.settings import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.material3.FilterChip +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -18,7 +20,7 @@ import eu.kanade.tachiyomi.ui.reader.viewer.webtoon.WebtoonViewer import eu.kanade.tachiyomi.util.system.isReleaseBuildType import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.HeadingItem -import tachiyomi.presentation.core.components.SelectItem +import tachiyomi.presentation.core.components.SettingsChipRow import tachiyomi.presentation.core.components.SliderItem import java.text.NumberFormat @@ -32,21 +34,25 @@ internal fun ColumnScope.ReadingModePage(screenModel: ReaderSettingsScreenModel) val manga by screenModel.mangaFlow.collectAsState() val readingMode = remember(manga) { ReadingModeType.fromPreference(manga?.readingModeType?.toInt()) } - SelectItem( - label = stringResource(R.string.pref_category_reading_mode), - options = readingModeOptions.map { stringResource(it.first) }.toTypedArray(), - selectedIndex = readingModeOptions.indexOfFirst { it.second == readingMode }, - ) { - screenModel.onChangeReadingMode(readingModeOptions[it].second) + SettingsChipRow(R.string.pref_category_reading_mode) { + readingModeOptions.map { (stringRes, it) -> + FilterChip( + selected = it == readingMode, + onClick = { screenModel.onChangeReadingMode(it) }, + label = { Text(stringResource(stringRes)) }, + ) + } } val orientationType = remember(manga) { OrientationType.fromPreference(manga?.orientationType?.toInt()) } - SelectItem( - label = stringResource(R.string.rotation_type), - options = orientationTypeOptions.map { stringResource(it.first) }.toTypedArray(), - selectedIndex = orientationTypeOptions.indexOfFirst { it.second == orientationType }, - ) { - screenModel.onChangeOrientation(orientationTypeOptions[it].second) + SettingsChipRow(R.string.rotation_type) { + orientationTypeOptions.map { (stringRes, it) -> + FilterChip( + selected = it == orientationType, + onClick = { screenModel.onChangeOrientation(it) }, + label = { Text(stringResource(stringRes)) }, + ) + } } val viewer by screenModel.viewerFlow.collectAsState() @@ -62,40 +68,35 @@ private fun ColumnScope.PagerViewerSettings(screenModel: ReaderSettingsScreenMod HeadingItem(R.string.pager_viewer) val navigationModePager by screenModel.preferences.navigationModePager().collectAsState() - SelectItem( - label = stringResource(R.string.pref_viewer_nav), - options = ReaderPreferences.TapZones.map { stringResource(it) }.toTypedArray(), - selectedIndex = navigationModePager, - onSelect = { screenModel.preferences.navigationModePager().set(it) }, + val pagerNavInverted by screenModel.preferences.pagerNavInverted().collectAsState() + TapZonesItems( + selected = navigationModePager, + onSelect = screenModel.preferences.navigationModePager()::set, + invertMode = pagerNavInverted, + onSelectInvertMode = screenModel.preferences.pagerNavInverted()::set, ) - if (navigationModePager != 5) { - val pagerNavInverted by screenModel.preferences.pagerNavInverted().collectAsState() - SelectItem( - label = stringResource(R.string.pref_read_with_tapping_inverted), - options = tappingInvertModeOptions.map { stringResource(it.first) }.toTypedArray(), - selectedIndex = tappingInvertModeOptions.indexOfFirst { it.second == pagerNavInverted }, - onSelect = { - screenModel.preferences.pagerNavInverted().set(tappingInvertModeOptions[it].second) - }, - ) - } - val imageScaleType by screenModel.preferences.imageScaleType().collectAsState() - SelectItem( - label = stringResource(R.string.pref_image_scale_type), - options = ReaderPreferences.ImageScaleType.map { stringResource(it) }.toTypedArray(), - selectedIndex = imageScaleType - 1, - onSelect = { screenModel.preferences.imageScaleType().set(it + 1) }, - ) + SettingsChipRow(R.string.pref_image_scale_type) { + ReaderPreferences.ImageScaleType.mapIndexed { index, it -> + FilterChip( + selected = imageScaleType == index + 1, + onClick = { screenModel.preferences.imageScaleType().set(index + 1) }, + label = { Text(stringResource(it)) }, + ) + } + } val zoomStart by screenModel.preferences.zoomStart().collectAsState() - SelectItem( - label = stringResource(R.string.pref_zoom_start), - options = ReaderPreferences.ZoomStart.map { stringResource(it) }.toTypedArray(), - selectedIndex = zoomStart - 1, - onSelect = { screenModel.preferences.zoomStart().set(it + 1) }, - ) + SettingsChipRow(R.string.pref_zoom_start) { + ReaderPreferences.ZoomStart.mapIndexed { index, it -> + FilterChip( + selected = zoomStart == index + 1, + onClick = { screenModel.preferences.zoomStart().set(index + 1) }, + label = { Text(stringResource(it)) }, + ) + } + } val cropBorders by screenModel.preferences.cropBorders().collectAsState() CheckboxItem( @@ -172,25 +173,14 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM HeadingItem(R.string.webtoon_viewer) val navigationModeWebtoon by screenModel.preferences.navigationModeWebtoon().collectAsState() - SelectItem( - label = stringResource(R.string.pref_viewer_nav), - options = ReaderPreferences.TapZones.map { stringResource(it) }.toTypedArray(), - selectedIndex = navigationModeWebtoon, - onSelect = { screenModel.preferences.navigationModeWebtoon().set(it) }, + val webtoonNavInverted by screenModel.preferences.webtoonNavInverted().collectAsState() + TapZonesItems( + selected = navigationModeWebtoon, + onSelect = screenModel.preferences.navigationModeWebtoon()::set, + invertMode = webtoonNavInverted, + onSelectInvertMode = screenModel.preferences.webtoonNavInverted()::set, ) - if (navigationModeWebtoon != 5) { - val webtoonNavInverted by screenModel.preferences.webtoonNavInverted().collectAsState() - SelectItem( - label = stringResource(R.string.pref_read_with_tapping_inverted), - options = tappingInvertModeOptions.map { stringResource(it.first) }.toTypedArray(), - selectedIndex = tappingInvertModeOptions.indexOfFirst { it.second == webtoonNavInverted }, - onSelect = { - screenModel.preferences.webtoonNavInverted().set(tappingInvertModeOptions[it].second) - }, - ) - } - val webtoonSidePadding by screenModel.preferences.webtoonSidePadding().collectAsState() SliderItem( label = stringResource(R.string.pref_webtoon_side_padding), @@ -254,3 +244,33 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM }, ) } + +@Composable +private fun ColumnScope.TapZonesItems( + selected: Int, + onSelect: (Int) -> Unit, + invertMode: ReaderPreferences.TappingInvertMode, + onSelectInvertMode: (ReaderPreferences.TappingInvertMode) -> Unit, +) { + SettingsChipRow(R.string.pref_viewer_nav) { + ReaderPreferences.TapZones.mapIndexed { index, it -> + FilterChip( + selected = selected == index, + onClick = { onSelect(index) }, + label = { Text(stringResource(it)) }, + ) + } + } + + if (selected != 5) { + SettingsChipRow(R.string.pref_read_with_tapping_inverted) { + tappingInvertModeOptions.map { (stringRes, mode) -> + FilterChip( + selected = mode == invertMode, + onClick = { onSelectInvertMode(mode) }, + label = { Text(stringResource(stringRes)) }, + ) + } + } + } +} diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt index a055d8d5db..c980e98bee 100644 --- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt +++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt @@ -229,7 +229,7 @@ fun SelectItem( ) ExposedDropdownMenu( - modifier = Modifier.exposedDropdownSize(matchTextFieldWidth = true), + modifier = Modifier.exposedDropdownSize(), expanded = expanded, onDismissRequest = { expanded = false }, ) { @@ -318,7 +318,7 @@ fun TextItem( } @Composable -fun SettingsFlowRow( +fun SettingsChipRow( @StringRes labelRes: Int, content: @Composable FlowRowScope.() -> Unit, ) {