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 = {},
+ )
+ }
+}