From 1cf7f9be54fda2385953f7b2dd91191bc01b21ba Mon Sep 17 00:00:00 2001 From: arkon Date: Sat, 15 Jul 2023 13:05:06 -0400 Subject: [PATCH] Use segmented buttons for reader background setting in sheet --- .../reader/settings/GeneralSettingsPage.kt | 37 +++++--- i18n/src/main/res/values/strings.xml | 2 +- .../components/material/SegmentedButtons.kt | 90 +++++++++++++++++++ 3 files changed, 114 insertions(+), 15 deletions(-) create mode 100644 presentation-core/src/main/java/tachiyomi/presentation/core/components/material/SegmentedButtons.kt 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 02738eeda..f04776bf6 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 @@ -1,34 +1,43 @@ package eu.kanade.presentation.reader.settings import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp import eu.kanade.presentation.util.collectAsState 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.HeadingItem -import tachiyomi.presentation.core.components.RadioItem +import tachiyomi.presentation.core.components.SettingsItemsPaddings +import tachiyomi.presentation.core.components.material.SegmentedButtons + +private val themes = listOf( + R.string.black_background to 1, + R.string.gray_background to 2, + R.string.white_background to 0, + R.string.automatic_background to 3, +) @Composable internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) { - // TODO: show this in a nicer way HeadingItem(R.string.pref_reader_theme) val readerTheme by screenModel.preferences.readerTheme().collectAsState() - listOf( - R.string.black_background to 1, - R.string.gray_background to 2, - R.string.white_background to 0, - R.string.automatic_background to 3, - ).map { (titleRes, theme) -> - RadioItem( - label = stringResource(titleRes), - selected = readerTheme == theme, - onClick = { screenModel.preferences.readerTheme().set(theme) }, - ) - } + SegmentedButtons( + modifier = Modifier.padding( + start = SettingsItemsPaddings.Horizontal, + top = 0.dp, + end = SettingsItemsPaddings.Horizontal, + bottom = SettingsItemsPaddings.Vertical, + ), + entries = themes.map { stringResource(it.first) }, + selectedIndex = themes.indexOfFirst { readerTheme == it.second }, + onClick = { screenModel.preferences.readerTheme().set(themes[it].second) }, + ) val showPageNumber by screenModel.preferences.showPageNumber().collectAsState() CheckboxItem( diff --git a/i18n/src/main/res/values/strings.xml b/i18n/src/main/res/values/strings.xml index 3df318c7e..3d0d9b9d8 100644 --- a/i18n/src/main/res/values/strings.xml +++ b/i18n/src/main/res/values/strings.xml @@ -383,7 +383,7 @@ White Gray Black - Automatic + Auto Default reading mode L shaped Kindle-ish diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/SegmentedButtons.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/SegmentedButtons.kt new file mode 100644 index 000000000..7656af007 --- /dev/null +++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/SegmentedButtons.kt @@ -0,0 +1,90 @@ +package tachiyomi.presentation.core.components.material + +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.OutlinedButton +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.Preview + +val StartItemShape = RoundedCornerShape(topStartPercent = 100, bottomStartPercent = 100) +val MiddleItemShape = RoundedCornerShape(0) +val EndItemShape = RoundedCornerShape(topEndPercent = 100, bottomEndPercent = 100) + +@Composable +fun SegmentedButtons( + modifier: Modifier = Modifier, + entries: List, + selectedIndex: Int, + onClick: (Int) -> Unit, +) { + Row( + modifier = modifier, + ) { + entries.mapIndexed { index, label -> + val shape = remember(entries, index) { + when (index) { + 0 -> StartItemShape + entries.lastIndex -> EndItemShape + else -> MiddleItemShape + } + } + + if (index == selectedIndex) { + Button( + modifier = Modifier.weight(1f), + shape = shape, + onClick = { onClick(index) }, + ) { + Text( + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + } else { + OutlinedButton( + modifier = Modifier.weight(1f), + shape = shape, + onClick = { onClick(index) }, + ) { + Text( + text = label, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + ) + } + } + } + } +} + +@Preview +@Composable +private fun SegmentedButtonsPreview() { + Column { + SegmentedButtons( + entries = listOf( + "Day", + "Week", + "Month", + "Year", + ), + selectedIndex = 1, + onClick = {}, + ) + + SegmentedButtons( + entries = listOf( + "Foo", + "Bar", + ), + selectedIndex = 1, + onClick = {}, + ) + } +}