diff --git a/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt b/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt index 0587cbe24..2e487b431 100644 --- a/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt +++ b/app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt @@ -9,6 +9,7 @@ import androidx.compose.foundation.verticalScroll import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Refresh import androidx.compose.material3.FilterChip +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState @@ -259,11 +260,12 @@ private fun ColumnScope.DisplayPage( max = 10, value = columns, valueText = if (columns > 0) { - stringResource(MR.strings.pref_library_columns_per_row, columns) + columns.toString() } else { - stringResource(MR.strings.label_default) + stringResource(MR.strings.label_auto) }, onChange = columnPreference::set, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) } diff --git a/app/src/main/java/eu/kanade/presentation/more/settings/Preference.kt b/app/src/main/java/eu/kanade/presentation/more/settings/Preference.kt index 88a33715e..bfd021b43 100644 --- a/app/src/main/java/eu/kanade/presentation/more/settings/Preference.kt +++ b/app/src/main/java/eu/kanade/presentation/more/settings/Preference.kt @@ -49,8 +49,9 @@ sealed class Preference { */ data class SliderPreference( val value: Int, - val min: Int = 0, val max: Int, + val min: Int = 0, + val steps: Int = 0, override val title: String = "", override val subtitle: String? = null, override val icon: ImageVector? = null, diff --git a/app/src/main/java/eu/kanade/presentation/more/settings/PreferenceItem.kt b/app/src/main/java/eu/kanade/presentation/more/settings/PreferenceItem.kt index 53caa0b06..45ab258b0 100644 --- a/app/src/main/java/eu/kanade/presentation/more/settings/PreferenceItem.kt +++ b/app/src/main/java/eu/kanade/presentation/more/settings/PreferenceItem.kt @@ -5,6 +5,7 @@ import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut import androidx.compose.animation.shrinkVertically +import androidx.compose.material3.MaterialTheme import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.collectAsState @@ -76,11 +77,11 @@ internal fun PreferenceItem( ) } is Preference.PreferenceItem.SliderPreference -> { - // TODO: use different composable? SliderItem( label = item.title, min = item.min, max = item.max, + steps = item.steps, value = item.value, valueText = item.subtitle.takeUnless { it.isNullOrEmpty() } ?: item.value.toString(), onChange = { @@ -88,6 +89,7 @@ internal fun PreferenceItem( item.onValueChanged(it) } }, + labelStyle = MaterialTheme.typography.titleLarge, ) } is Preference.PreferenceItem.ListPreference<*> -> { diff --git a/app/src/main/java/eu/kanade/presentation/more/settings/screen/SettingsReaderScreen.kt b/app/src/main/java/eu/kanade/presentation/more/settings/screen/SettingsReaderScreen.kt index 7b5aa15f3..a8a7769d1 100644 --- a/app/src/main/java/eu/kanade/presentation/more/settings/screen/SettingsReaderScreen.kt +++ b/app/src/main/java/eu/kanade/presentation/more/settings/screen/SettingsReaderScreen.kt @@ -143,6 +143,7 @@ object SettingsReaderScreen : SearchableSettings { value = flashMillis / ReaderPreferences.MILLI_CONVERSION, min = 1, max = 15, + steps = 13, title = stringResource(MR.strings.pref_flash_duration), subtitle = stringResource(MR.strings.pref_flash_duration_summary, flashMillis), onValueChanged = { @@ -155,6 +156,7 @@ object SettingsReaderScreen : SearchableSettings { value = flashInterval, min = 1, max = 10, + steps = 8, title = stringResource(MR.strings.pref_flash_page_interval), subtitle = pluralStringResource(MR.plurals.pref_pages, flashInterval, flashInterval), onValueChanged = { diff --git a/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt b/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt index cb8f5578b..211a9e853 100644 --- a/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt +++ b/app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt @@ -2,6 +2,7 @@ package eu.kanade.presentation.reader.settings import androidx.compose.foundation.layout.ColumnScope import androidx.compose.material3.FilterChip +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -42,6 +43,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) value = customBrightnessValue, valueText = customBrightnessValue.toString(), onChange = { screenModel.preferences.customBrightnessValue().set(it) }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) } @@ -62,6 +64,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) getColorValue(it, newRValue, RED_MASK, 16) } }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) SliderItem( label = stringResource(MR.strings.color_filter_g_value), @@ -73,6 +76,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) getColorValue(it, newGValue, GREEN_MASK, 8) } }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) SliderItem( label = stringResource(MR.strings.color_filter_b_value), @@ -84,6 +88,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) getColorValue(it, newBValue, BLUE_MASK, 0) } }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) SliderItem( label = stringResource(MR.strings.color_filter_a_value), @@ -95,6 +100,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) getColorValue(it, newAValue, ALPHA_MASK, 24) } }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState() 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 0bb2da6cc..8c2bdde97 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 @@ -2,6 +2,7 @@ package eu.kanade.presentation.reader.settings import androidx.compose.foundation.layout.ColumnScope import androidx.compose.material3.FilterChip +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue @@ -102,6 +103,8 @@ internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) { onChange = { flashMillisPref.set(it * ReaderPreferences.MILLI_CONVERSION) }, min = 1, max = 15, + steps = 13, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) SliderItem( value = flashInterval, @@ -112,6 +115,8 @@ internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) { }, min = 1, max = 10, + steps = 8, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) SettingsChipRow(MR.strings.pref_flash_with) { flashColors.map { (labelRes, value) -> diff --git a/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt b/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt index fb3e16a93..b89c806c4 100644 --- a/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt +++ b/app/src/main/java/eu/kanade/presentation/reader/settings/ReadingModePage.kt @@ -2,6 +2,7 @@ package eu.kanade.presentation.reader.settings import androidx.compose.foundation.layout.ColumnScope import androidx.compose.material3.FilterChip +import androidx.compose.material3.MaterialTheme import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState @@ -160,6 +161,7 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM onChange = { screenModel.preferences.webtoonSidePadding().set(it) }, + pillColor = MaterialTheme.colorScheme.surfaceContainerHighest, ) CheckboxItem( diff --git a/i18n/src/commonMain/moko-resources/base/strings.xml b/i18n/src/commonMain/moko-resources/base/strings.xml index 5ad98d60b..a9b20e3df 100644 --- a/i18n/src/commonMain/moko-resources/base/strings.xml +++ b/i18n/src/commonMain/moko-resources/base/strings.xml @@ -38,6 +38,7 @@ Help Default Warning + Auto Started @@ -267,8 +268,7 @@ Display - Grid size - %d per row + Items per row Portrait Landscape @@ -471,10 +471,10 @@ Landscape Locked portrait Locked landscape - R - G - B - A + Red + Green + Blue + Alpha Always show chapter transition Reading mode Reading diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/Pill.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/Pill.kt index 1d8cf2d5f..4824e1030 100644 --- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/Pill.kt +++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/Pill.kt @@ -10,6 +10,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.TextStyle import androidx.compose.ui.unit.TextUnit import androidx.compose.ui.unit.dp @@ -19,7 +20,7 @@ fun Pill( modifier: Modifier = Modifier, color: Color = MaterialTheme.colorScheme.surfaceContainerHigh, contentColor: Color = MaterialTheme.colorScheme.onSurface, - fontSize: TextUnit = LocalTextStyle.current.fontSize, + style: TextStyle = LocalTextStyle.current, ) { Surface( modifier = modifier @@ -35,9 +36,27 @@ fun Pill( ) { Text( text = text, - fontSize = fontSize, maxLines = 1, + style = style, ) } } } + +@Composable +fun Pill( + text: String, + modifier: Modifier = Modifier, + color: Color = MaterialTheme.colorScheme.surfaceContainerHigh, + contentColor: Color = MaterialTheme.colorScheme.onSurface, + fontSize: TextUnit = LocalTextStyle.current.fontSize, +) { + val style = LocalTextStyle.current + Pill( + text = text, + modifier = modifier, + color = color, + contentColor = contentColor, + style = MaterialTheme.typography.bodyMedium.copy(fontSize = fontSize), + ) +} diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt index 5a8ab4215..6f5e2e3b8 100644 --- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt +++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt @@ -1,6 +1,7 @@ package tachiyomi.presentation.core.components import androidx.compose.foundation.clickable +import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.FlowRow @@ -29,7 +30,10 @@ import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MenuAnchorType import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.RadioButton +import androidx.compose.material3.Surface import androidx.compose.material3.Text +import androidx.compose.material3.darkColorScheme +import androidx.compose.material3.lightColorScheme import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf @@ -37,9 +41,12 @@ import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.hapticfeedback.HapticFeedbackType import androidx.compose.ui.platform.LocalHapticFeedback +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.tooling.preview.PreviewLightDark import androidx.compose.ui.unit.dp import dev.icerock.moko.resources.StringResource import tachiyomi.core.common.preference.Preference @@ -171,29 +178,36 @@ fun SliderItem( onChange: (Int) -> Unit, max: Int, min: Int = 0, + steps: Int = 0, + labelStyle: TextStyle = MaterialTheme.typography.bodyMedium, + pillColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh, ) { val haptic = LocalHapticFeedback.current - Row( + Column( modifier = Modifier .fillMaxWidth() .padding( horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical, ), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(24.dp), ) { - Column(modifier = Modifier.weight(0.5f)) { + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(MaterialTheme.padding.small), + ) { Text( text = label, - style = MaterialTheme.typography.bodyMedium, + style = labelStyle, + modifier = Modifier.weight(1f), + ) + Pill( + text = valueText, + style = MaterialTheme.typography.bodyMedium, + color = pillColor, ) - Text(valueText) } - Slider( - modifier = Modifier.weight(1.5f), value = value, onValueChange = f@{ if (it == value) return@f @@ -201,10 +215,29 @@ fun SliderItem( haptic.performHapticFeedback(HapticFeedbackType.TextHandleMove) }, valueRange = min..max, + steps = steps, ) } } +@Composable +@PreviewLightDark +fun SliderItemPreview() { + MaterialTheme(if (isSystemInDarkTheme()) darkColorScheme() else lightColorScheme()) { + Surface { + SliderItem( + label = "Item per row", + valueText = "Auto", + value = 0, + onChange = {}, + min = 0, + max = 10, + steps = 8, + ) + } + } +} + @Composable fun SelectItem( label: String, diff --git a/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Slider.kt b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Slider.kt index aa562ab32..e590c3327 100644 --- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Slider.kt +++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Slider.kt @@ -9,6 +9,7 @@ import androidx.compose.material3.SliderState import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import kotlin.math.roundToInt @Composable fun Slider( @@ -17,7 +18,7 @@ fun Slider( modifier: Modifier = Modifier, enabled: Boolean = true, valueRange: ClosedRange = 0..1, - @IntRange(from = 0) steps: Int = with(valueRange) { (endInclusive - start) - 1 }, + @IntRange(from = 0) steps: Int = 0, onValueChangeFinished: (() -> Unit)? = null, colors: SliderColors = SliderDefaults.colors(), interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }, @@ -34,7 +35,7 @@ fun Slider( ) { Slider( value = value.toFloat(), - onValueChange = { onValueChange(it.toInt()) }, + onValueChange = { onValueChange(it.roundToInt()) }, modifier = modifier, enabled = enabled, valueRange = with(valueRange) { start.toFloat()..endInclusive.toFloat() },