Use segmented buttons for reader background setting in sheet
This commit is contained in:
parent
fb99577836
commit
1cf7f9be54
3 changed files with 114 additions and 15 deletions
|
@ -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
|
||||
|
||||
@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(
|
||||
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,
|
||||
).map { (titleRes, theme) ->
|
||||
RadioItem(
|
||||
label = stringResource(titleRes),
|
||||
selected = readerTheme == theme,
|
||||
onClick = { screenModel.preferences.readerTheme().set(theme) },
|
||||
)
|
||||
|
||||
@Composable
|
||||
internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
|
||||
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()
|
||||
CheckboxItem(
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 = {},
|
||||
)
|
||||
}
|
||||
}
|
Reference in a new issue