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 package eu.kanade.presentation.reader.settings
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import eu.kanade.presentation.util.collectAsState import eu.kanade.presentation.util.collectAsState
import eu.kanade.tachiyomi.R import eu.kanade.tachiyomi.R
import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences
import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.CheckboxItem
import tachiyomi.presentation.core.components.HeadingItem 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
@Composable private val themes = listOf(
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.black_background to 1,
R.string.gray_background to 2, R.string.gray_background to 2,
R.string.white_background to 0, R.string.white_background to 0,
R.string.automatic_background to 3, R.string.automatic_background to 3,
).map { (titleRes, theme) -> )
RadioItem(
label = stringResource(titleRes), @Composable
selected = readerTheme == theme, internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
onClick = { screenModel.preferences.readerTheme().set(theme) }, HeadingItem(R.string.pref_reader_theme)
val readerTheme by screenModel.preferences.readerTheme().collectAsState()
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() val showPageNumber by screenModel.preferences.showPageNumber().collectAsState()
CheckboxItem( CheckboxItem(

View File

@ -383,7 +383,7 @@
<string name="white_background">White</string> <string name="white_background">White</string>
<string name="gray_background">Gray</string> <string name="gray_background">Gray</string>
<string name="black_background">Black</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="pref_viewer_type">Default reading mode</string>
<string name="l_nav">L shaped</string> <string name="l_nav">L shaped</string>
<string name="kindlish_nav">Kindle-ish</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 = {},
)
}
}