Replace some reader sheet settings with FlowRow of Chips

2024-11-21 20:47:03 -05:00 · 2023-07-15 14:27:30 -04:00 · 2023-07-15 14:27:30 -04:00 · 09e4b5a9cd
commit 09e4b5a9cd
parent 5467104b95
4 changed files with 121 additions and 29 deletions
--- 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 android.os.Build
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.res.stringResource
@ -15,8 +16,9 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
 import tachiyomi.core.preference.getAndSet
 import tachiyomi.presentation.core.components.CheckboxItem
-import tachiyomi.presentation.core.components.SelectItem
+import tachiyomi.presentation.core.components.SettingsFlowRow
 import tachiyomi.presentation.core.components.SliderItem
+import tachiyomi.presentation.core.components.material.ChoiceChip

@Composable
 internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) {
@ -122,12 +124,14 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
        )

        val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState()
-        SelectItem(
-            label = stringResource(R.string.pref_color_filter_mode),
-            options = colorFilterModes.toTypedArray(),
-            selectedIndex = colorFilterMode,
-        ) {
-            screenModel.preferences.colorFilterMode().set(it)
+        SettingsFlowRow(R.string.pref_color_filter_mode) {
+            colorFilterModes.mapIndexed { index, it ->
+                ChoiceChip(
+                    isSelected = colorFilterMode == index,
+                    onClick = { screenModel.preferences.colorFilterMode().set(index) },
+                    content = { Text(it) },
+                )
+            }
        }
    }

--- a/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt
+++ b/app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt
@ -1,20 +1,17 @@
 package eu.kanade.presentation.reader.settings

 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
 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.SettingsItemsPaddings
-import tachiyomi.presentation.core.components.material.SegmentedButtons
+import tachiyomi.presentation.core.components.SettingsFlowRow
+import tachiyomi.presentation.core.components.material.ChoiceChip

 private val themes = listOf(
    R.string.black_background to 1,
@ -25,19 +22,16 @@ private val themes = listOf(

@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) },
-    )
+    SettingsFlowRow(R.string.pref_reader_theme) {
+        themes.map { (labelRes, value) ->
+            ChoiceChip(
+                isSelected = readerTheme == value,
+                onClick = { screenModel.preferences.readerTheme().set(value) },
+                content = { Text(stringResource(labelRes)) },
+            )
+        }
+    }

    val showPageNumber by screenModel.preferences.showPageNumber().collectAsState()
    CheckboxItem(
--- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt
+++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt
@ -4,6 +4,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.FlowRowScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
@ -61,7 +63,10 @@ fun HeadingItem(
        style = MaterialTheme.typography.header,
        modifier = Modifier
            .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
    )
 }

@ -203,7 +208,10 @@ fun SelectItem(
            modifier = Modifier
                .menuAnchor()
                .fillMaxWidth()
-                .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+                .padding(
+                    horizontal = SettingsItemsPaddings.Horizontal,
+                    vertical = SettingsItemsPaddings.Vertical,
+                ),
            label = { Text(text = label) },
            value = options[selectedIndex].toString(),
            onValueChange = {},
@ -259,7 +267,10 @@ fun TriStateItem(
                },
            )
            .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(24.dp),
    ) {
@ -306,6 +317,26 @@ fun TextItem(
    )
 }

+@Composable
+fun SettingsFlowRow(
+    @StringRes labelRes: Int,
+    content: @Composable FlowRowScope.() -> Unit,
+) {
+    Column {
+        HeadingItem(labelRes)
+        FlowRow(
+            modifier = Modifier.padding(
+                start = SettingsItemsPaddings.Horizontal,
+                top = 0.dp,
+                end = SettingsItemsPaddings.Horizontal,
+                bottom = SettingsItemsPaddings.Vertical,
+            ),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            content = content,
+        )
+    }
+}
+
@Composable
 private fun BaseSettingsItem(
    label: String,
@ -316,7 +347,10 @@ private fun BaseSettingsItem(
        modifier = Modifier
            .clickable(onClick = onClick)
            .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.spacedBy(24.dp),
    ) {
--- a/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Chip.kt
+++ b/presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Chip.kt
@ -0,0 +1,60 @@
+package tachiyomi.presentation.core.components.material
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
+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.unit.dp
+
+@Composable
+fun Chip(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.15f),
+    contentColor: Color = MaterialTheme.colorScheme.onSurface,
+    onClick: () -> Unit = {},
+    content: @Composable () -> Unit,
+) {
+    Surface(
+        modifier = Modifier,
+        shape = CircleShape,
+        color = backgroundColor,
+        contentColor = contentColor,
+        onClick = {},
+    ) {
+        Row(
+            modifier = modifier.clickable(onClick = onClick)
+                .widthIn(min = 56.dp)
+                .requiredHeight(32.dp)
+                .padding(horizontal = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            ProvideTextStyle(MaterialTheme.typography.bodySmall, content)
+        }
+    }
+}
+
+@Composable
+fun ChoiceChip(
+    modifier: Modifier = Modifier,
+    isSelected: Boolean,
+    onClick: () -> Unit = {},
+    selectedBackgroundColor: Color = MaterialTheme.colorScheme.primary,
+    selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary,
+    content: @Composable () -> Unit,
+) {
+    if (isSelected) {
+        Chip(modifier, selectedBackgroundColor, selectedContentColor, onClick, content)
+    } else {
+        Chip(modifier, onClick = onClick, content = content)
+    }
+}