Merge pull request #3894 from jivesh/main

2024-05-04 08:42:25 +08:00
parent 2e4833d68c 702fb88fb7
commit 889fed6597
5 changed files with 193 additions and 5 deletions
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/AddButton.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/AddButton.kt
@ -0,0 +1,45 @@
+package app.omnivore.omnivore.feature.components
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Add
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonColors
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+
+/**
+ * A plus-shaped button that can be used to represent an "add" action.
+ * Just a simple wrapper over IconButton with the Add icon.
+ *
+ * @param onClick Called when the button is clicked.
+ * @param modifier The modifier to apply to the button.
+ * @param enabled Whether the button is enabled.
+ * @param colors The colors to use for the button.
+ * @param interactionSource The [MutableInteractionSource] that backs this button.
+ */
+@Composable
+fun AddButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    IconButton(
+        onClick,
+        modifier,
+        enabled,
+        colors,
+        interactionSource
+    ) {
+        Icon(
+            imageVector = Icons.Default.Add,
+            contentDescription = "Add",
+            tint = if (enabled) colors.disabledContentColor else colors.disabledContentColor
+        )
+    }
+}
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/SliderWithPlusMinus.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/SliderWithPlusMinus.kt
@ -0,0 +1,97 @@
+package app.omnivore.omnivore.feature.components
+
+import androidx.annotation.IntRange
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderColors
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+
+/**
+ * A slider wrapper that adds a plus and minus button to adjust the slider value
+ * By default, moving the thumb on the slider will update the slider value immediately.
+ * The plus and minus buttons will adjust the slider value by the step size.
+ * The buttons are disabled when the slider value is at the minimum or maximum value.
+ *
+ * @param value The current value of the slider.
+ * @param onValueChange Called when the value changes.
+ * @param modifier The modifier to apply to the slider.
+ * @param enabled Whether the slider is enabled.
+ * @param valueRange The range of values the slider can take.
+ * @param steps The number of steps the slider should have. If 0, the slider will be continuous.
+ * @param onValueChangeFinished Called when the user stops interacting with the slider.
+ * @param colors The colors to use for the slider.
+ * @param interactionSource The [MutableInteractionSource] that backs this slider.
+ */
+@Composable
+fun SliderWithPlusMinus(
+    value: Float,
+    onValueChange: (Float) -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    valueRange: ClosedFloatingPointRange<Float> = 0f..1f,
+    @IntRange(from = 0)
+    steps: Int = 0,
+    onValueChangeFinished: (() -> Unit)? = null,
+    colors: SliderColors = SliderDefaults.colors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
+) {
+    var sliderValue by remember { mutableFloatStateOf(value) }
+    val sliderValueStepSize = if (steps == 0) 0f else
+        (valueRange.endInclusive - valueRange.start) / steps
+
+    return Row(
+        modifier = modifier
+            .fillMaxWidth()
+    ) {
+        SubtractButton(
+            onClick = {
+                sliderValue -= sliderValueStepSize
+                onValueChange(sliderValue)
+            },
+            modifier = Modifier.weight(1F),
+            enabled = sliderValue > valueRange.start
+        )
+        Slider(
+          value = sliderValue,
+          onValueChange = {
+              sliderValue = it
+              onValueChange(it)
+          },
+          modifier = modifier.weight(10F),
+          enabled = enabled,
+          valueRange = valueRange,
+          steps = steps,
+          onValueChangeFinished = onValueChangeFinished,
+          colors = colors,
+          interactionSource = interactionSource
+        )
+        AddButton(
+            onClick = {
+                sliderValue += sliderValueStepSize
+                onValueChange(sliderValue)
+            },
+            modifier = Modifier.weight(1F),
+            enabled = sliderValue < valueRange.endInclusive
+        )
+    }
+}
+
+@Preview
+@Composable
+fun SliderWithPlusMinusPreview() {
+    SliderWithPlusMinus(
+        value = 0.5f,
+        onValueChange = {},
+        valueRange = 0f..1f,
+        steps = 10
+    )
+}
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/SubtractButton.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/components/SubtractButton.kt
@ -0,0 +1,45 @@
+package app.omnivore.omnivore.feature.components
+
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Remove
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.IconButtonColors
+import androidx.compose.material3.IconButtonDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+
+/**
+ * A minus-shaped button that can be used to represent a "subtract" or "remove" action.
+ * Just a simple wrapper over IconButton with the Remove icon.
+ *
+ * @param onClick Called when the button is clicked.
+ * @param modifier The modifier to apply to the button.
+ * @param enabled Whether the button is enabled.
+ * @param colors The colors to use for the button.
+ * @param interactionSource The [MutableInteractionSource] that backs this button.
+ */
+@Composable
+fun SubtractButton(
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
+    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
+) {
+    IconButton(
+        onClick,
+        modifier,
+        enabled,
+        colors,
+        interactionSource
+    ) {
+        Icon(
+            imageVector = Icons.Default.Remove,
+            contentDescription = "Subtract",
+            tint = if (enabled) colors.disabledContentColor else colors.disabledContentColor
+        )
+    }
+}
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/reader/ReaderPreferencesView.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/reader/ReaderPreferencesView.kt
@ -41,6 +41,7 @@ import androidx.compose.ui.unit.sp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import app.omnivore.omnivore.R
 import app.omnivore.omnivore.core.designsystem.component.SwitchPreferenceWidget
+import app.omnivore.omnivore.feature.components.SliderWithPlusMinus
 import app.omnivore.omnivore.feature.theme.OmnivoreTheme

@Composable
@ -145,7 +146,8 @@ fun ReaderPreferencesView(
                        color = Color(red = 137, green = 137, blue = 137)
                    )
                )
-                Slider(
+
+                SliderWithPlusMinus(
                    value = fontSizeSliderValue,
                    onValueChange = {
                        fontSizeSliderValue = it
@ -162,7 +164,8 @@ fun ReaderPreferencesView(
                        color = Color(red = 137, green = 137, blue = 137)
                    )
                )
-                Slider(
+
+                SliderWithPlusMinus(
                    value = marginSliderValue,
                    onValueChange = {
                        marginSliderValue = it
@ -179,7 +182,7 @@ fun ReaderPreferencesView(
                        color = Color(red = 137, green = 137, blue = 137)
                    )
                )
-                Slider(
+                SliderWithPlusMinus(
                    value = lineSpacingSliderValue,
                    onValueChange = {
                        lineSpacingSliderValue = it
--- a/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/reader/WebReaderViewModel.kt
+++ b/android/Omnivore/app/src/main/java/app/omnivore/omnivore/feature/reader/WebReaderViewModel.kt
@ -116,8 +116,6 @@ class WebReaderViewModel @Inject constructor(
    private val showHighlightColorPalette = MutableLiveData(false)
    val highlightColor = MutableLiveData(HighlightColor())

-    var shouldUseVolumeRockerForScroll = true
-
    fun loadItem(slug: String?, requestID: String?) {
        this.slug = slug
        if (isLoading || webReaderParamsLiveData.value != null) {