From 09e4b5a9cd753a7a3a64fa8d3a868ac68dfa767f Mon Sep 17 00:00:00 2001 From: arkon Date: Sat, 15 Jul 2023 14:27:30 -0400 Subject: [PATCH] Replace some reader sheet settings with FlowRow of Chips --- .../reader/settings/ColorFilterPage.kt | 18 +++--- .../reader/settings/GeneralSettingsPage.kt | 30 ++++------ .../core/components/SettingsItems.kt | 42 +++++++++++-- .../core/components/material/Chip.kt | 60 +++++++++++++++++++ 4 files changed, 121 insertions(+), 29 deletions(-) create mode 100644 presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Chip.kt 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 06bbb37b1..78f20cb8f 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 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) }, + ) + } } } 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 f04776bf6..990a1423d 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 @@ -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( 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 d5ce4a5d2..d40a7747b 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 @@ -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), ) { diff --git 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 new file mode 100644 index 000000000..55d988f52 --- /dev/null +++ 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) + } +}