Use segmented buttons for reader background setting in sheet

This commit is contained in:
arkon 2023-07-15 13:05:06 -04:00
parent fb99577836
commit 1cf7f9be54
3 changed files with 114 additions and 15 deletions

View file

@ -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(

View file

@ -383,7 +383,7 @@
<string name="white_background">White</string>
<string name="gray_background">Gray</string>
<string name="black_background">Black</string>
<string name="automatic_background">Automatic</string>
<string name="automatic_background">Auto</string>
<string name="pref_viewer_type">Default reading mode</string>
<string name="l_nav">L shaped</string>
<string name="kindlish_nav">Kindle-ish</string>

View file

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