Cleanup Slider usage

This commit is contained in:
AntsyLich 2024-10-26 07:05:56 +06:00
parent aae0e3459c
commit df9fff60da
No known key found for this signature in database
5 changed files with 74 additions and 28 deletions

View file

@ -56,7 +56,7 @@ fun ReaderAppBars(
enabledPrevious: Boolean, enabledPrevious: Boolean,
currentPage: Int, currentPage: Int,
totalPages: Int, totalPages: Int,
onSliderValueChange: (Int) -> Unit, onPageIndexChange: (Int) -> Unit,
readingMode: ReadingMode, readingMode: ReadingMode,
onClickReadingMode: () -> Unit, onClickReadingMode: () -> Unit,
@ -176,9 +176,8 @@ fun ReaderAppBars(
enabledPrevious = enabledPrevious, enabledPrevious = enabledPrevious,
currentPage = currentPage, currentPage = currentPage,
totalPages = totalPages, totalPages = totalPages,
onSliderValueChange = onSliderValueChange, onPageIndexChange = onPageIndexChange,
) )
BottomReaderBar( BottomReaderBar(
backgroundColor = backgroundColor, backgroundColor = backgroundColor,
readingMode = readingMode, readingMode = readingMode,

View file

@ -4,6 +4,7 @@ import androidx.compose.foundation.background
import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsDraggedAsState import androidx.compose.foundation.interaction.collectIsDraggedAsState
import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.fillMaxWidth
@ -16,7 +17,6 @@ import androidx.compose.material3.FilledIconButton
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButtonDefaults import androidx.compose.material3.IconButtonDefaults
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Slider
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.surfaceColorAtElevation import androidx.compose.material3.surfaceColorAtElevation
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
@ -29,6 +29,7 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.hapticfeedback.HapticFeedbackType import androidx.compose.ui.hapticfeedback.HapticFeedbackType
import androidx.compose.ui.platform.LocalHapticFeedback import androidx.compose.ui.platform.LocalHapticFeedback
import androidx.compose.ui.platform.LocalLayoutDirection import androidx.compose.ui.platform.LocalLayoutDirection
@ -38,8 +39,8 @@ import androidx.compose.ui.unit.dp
import eu.kanade.presentation.theme.TachiyomiPreviewTheme import eu.kanade.presentation.theme.TachiyomiPreviewTheme
import eu.kanade.presentation.util.isTabletUi import eu.kanade.presentation.util.isTabletUi
import tachiyomi.i18n.MR import tachiyomi.i18n.MR
import tachiyomi.presentation.core.components.material.Slider
import tachiyomi.presentation.core.i18n.stringResource import tachiyomi.presentation.core.i18n.stringResource
import kotlin.math.roundToInt
@Composable @Composable
fun ChapterNavigator( fun ChapterNavigator(
@ -50,7 +51,7 @@ fun ChapterNavigator(
enabledPrevious: Boolean, enabledPrevious: Boolean,
currentPage: Int, currentPage: Int,
totalPages: Int, totalPages: Int,
onSliderValueChange: (Int) -> Unit, onPageIndexChange: (Int) -> Unit,
) { ) {
val isTabletUi = isTabletUi() val isTabletUi = isTabletUi()
val horizontalPadding = if (isTabletUi) 24.dp else 8.dp val horizontalPadding = if (isTabletUi) 24.dp else 8.dp
@ -97,7 +98,11 @@ fun ChapterNavigator(
.padding(horizontal = 16.dp), .padding(horizontal = 16.dp),
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
) { ) {
Box(contentAlignment = Alignment.CenterEnd) {
Text(text = currentPage.toString()) Text(text = currentPage.toString())
// Taking up full length so the slider doesn't shift when 'currentPage' length changes
Text(text = totalPages.toString(), color = Color.Transparent)
}
val interactionSource = remember { MutableInteractionSource() } val interactionSource = remember { MutableInteractionSource() }
val sliderDragged by interactionSource.collectIsDraggedAsState() val sliderDragged by interactionSource.collectIsDraggedAsState()
@ -110,14 +115,11 @@ fun ChapterNavigator(
modifier = Modifier modifier = Modifier
.weight(1f) .weight(1f)
.padding(horizontal = 8.dp), .padding(horizontal = 8.dp),
value = currentPage.toFloat(), value = currentPage,
valueRange = 1f..totalPages.toFloat(), valueRange = 1..totalPages,
steps = totalPages - 2, onValueChange = f@{
onValueChange = { if (it == currentPage) return@f
val new = it.roundToInt() - 1 onPageIndexChange(it - 1)
if (new != currentPage) {
onSliderValueChange(new)
}
}, },
interactionSource = interactionSource, interactionSource = interactionSource,
) )
@ -158,7 +160,7 @@ private fun ChapterNavigatorPreview() {
enabledPrevious = true, enabledPrevious = true,
currentPage = currentPage, currentPage = currentPage,
totalPages = 10, totalPages = 10,
onSliderValueChange = { currentPage = it }, onPageIndexChange = { currentPage = (it + 1) },
) )
} }
} }

View file

@ -401,7 +401,7 @@ class ReaderActivity : BaseActivity() {
enabledPrevious = state.viewerChapters?.prevChapter != null, enabledPrevious = state.viewerChapters?.prevChapter != null,
currentPage = state.currentPage, currentPage = state.currentPage,
totalPages = state.totalPages, totalPages = state.totalPages,
onSliderValueChange = { onPageIndexChange = {
isScrollingThroughPages = true isScrollingThroughPages = true
moveToPageIndex(it) moveToPageIndex(it)
}, },

View file

@ -28,7 +28,6 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.RadioButton import androidx.compose.material3.RadioButton
import androidx.compose.material3.Slider
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
@ -46,6 +45,7 @@ import tachiyomi.core.common.preference.Preference
import tachiyomi.core.common.preference.TriState import tachiyomi.core.common.preference.TriState
import tachiyomi.core.common.preference.toggle import tachiyomi.core.common.preference.toggle
import tachiyomi.presentation.core.components.material.DISABLED_ALPHA import tachiyomi.presentation.core.components.material.DISABLED_ALPHA
import tachiyomi.presentation.core.components.material.Slider
import tachiyomi.presentation.core.components.material.padding import tachiyomi.presentation.core.components.material.padding
import tachiyomi.presentation.core.i18n.stringResource import tachiyomi.presentation.core.i18n.stringResource
import tachiyomi.presentation.core.theme.header import tachiyomi.presentation.core.theme.header
@ -192,17 +192,14 @@ fun SliderItem(
} }
Slider( Slider(
value = value.toFloat(),
onValueChange = {
val newValue = it.toInt()
if (newValue != value) {
onChange(newValue)
haptic.performHapticFeedback(HapticFeedbackType.TextHandleMove)
}
},
modifier = Modifier.weight(1.5f), modifier = Modifier.weight(1.5f),
valueRange = min.toFloat()..max.toFloat(), value = value,
steps = max - min - 1, onValueChange = f@{
if (it == value) return@f
onChange(it)
haptic.performHapticFeedback(HapticFeedbackType.TextHandleMove)
},
valueRange = min..max,
) )
} }
} }

View file

@ -0,0 +1,48 @@
package tachiyomi.presentation.core.components.material
import androidx.annotation.IntRange
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderColors
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.SliderState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
@Composable
fun Slider(
value: Int,
onValueChange: (Int) -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
valueRange: ClosedRange<Int> = 0..1,
@IntRange(from = 0) steps: Int = with(valueRange) { (endInclusive - start) - 1 },
onValueChangeFinished: (() -> Unit)? = null,
colors: SliderColors = SliderDefaults.colors(),
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
thumb: @Composable (SliderState) -> Unit = {
SliderDefaults.Thumb(
interactionSource = interactionSource,
colors = colors,
enabled = enabled,
)
},
track: @Composable (SliderState) -> Unit = { sliderState ->
SliderDefaults.Track(colors = colors, enabled = enabled, sliderState = sliderState)
},
) {
Slider(
value = value.toFloat(),
onValueChange = { onValueChange(it.toInt()) },
modifier = modifier,
enabled = enabled,
valueRange = with(valueRange) { start.toFloat()..endInclusive.toFloat() },
steps = steps,
onValueChangeFinished = onValueChangeFinished,
colors = colors,
interactionSource = interactionSource,
thumb = thumb,
track = track,
)
}