Use Material3 chips

This commit is contained in:
arkon 2023-07-16 09:11:49 -04:00
parent 01553b1ed8
commit 34f7caa0fc
6 changed files with 13 additions and 79 deletions

View file

@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.FilterChip
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
@ -30,7 +31,6 @@ import tachiyomi.presentation.core.components.SettingsFlowRow
import tachiyomi.presentation.core.components.SliderItem import tachiyomi.presentation.core.components.SliderItem
import tachiyomi.presentation.core.components.SortItem import tachiyomi.presentation.core.components.SortItem
import tachiyomi.presentation.core.components.TriStateItem import tachiyomi.presentation.core.components.TriStateItem
import tachiyomi.presentation.core.components.material.ChoiceChip
@Composable @Composable
fun LibrarySettingsDialog( fun LibrarySettingsDialog(
@ -183,10 +183,10 @@ private fun ColumnScope.DisplayPage(
val displayMode by screenModel.libraryPreferences.libraryDisplayMode().collectAsState() val displayMode by screenModel.libraryPreferences.libraryDisplayMode().collectAsState()
SettingsFlowRow(R.string.action_display_mode) { SettingsFlowRow(R.string.action_display_mode) {
displayModes.map { (titleRes, mode) -> displayModes.map { (titleRes, mode) ->
ChoiceChip( FilterChip(
isSelected = displayMode == mode, selected = displayMode == mode,
onClick = { screenModel.setDisplayMode(mode) }, onClick = { screenModel.setDisplayMode(mode) },
content = { Text(stringResource(titleRes)) }, label = { Text(stringResource(titleRes)) },
) )
} }
} }

View file

@ -43,7 +43,6 @@ import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTextStyle import androidx.compose.material3.ProvideTextStyle
import androidx.compose.material3.SuggestionChip import androidx.compose.material3.SuggestionChip
import androidx.compose.material3.SuggestionChipDefaults
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.CompositionLocalProvider
@ -652,11 +651,6 @@ private fun TagsChip(
modifier = modifier, modifier = modifier,
onClick = onClick, onClick = onClick,
label = { Text(text = text, style = MaterialTheme.typography.bodySmall) }, label = { Text(text = text, style = MaterialTheme.typography.bodySmall) },
border = null,
colors = SuggestionChipDefaults.suggestionChipColors(
containerColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.12f),
labelColor = MaterialTheme.colorScheme.onSurface,
),
) )
} }
} }

View file

@ -2,6 +2,7 @@ package eu.kanade.presentation.reader.settings
import android.os.Build import android.os.Build
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.FilterChip
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
@ -18,7 +19,6 @@ import tachiyomi.core.preference.getAndSet
import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.CheckboxItem
import tachiyomi.presentation.core.components.SettingsFlowRow import tachiyomi.presentation.core.components.SettingsFlowRow
import tachiyomi.presentation.core.components.SliderItem import tachiyomi.presentation.core.components.SliderItem
import tachiyomi.presentation.core.components.material.ChoiceChip
@Composable @Composable
internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) { internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) {
@ -126,10 +126,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState() val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState()
SettingsFlowRow(R.string.pref_color_filter_mode) { SettingsFlowRow(R.string.pref_color_filter_mode) {
colorFilterModes.mapIndexed { index, it -> colorFilterModes.mapIndexed { index, it ->
ChoiceChip( FilterChip(
isSelected = colorFilterMode == index, selected = colorFilterMode == index,
onClick = { screenModel.preferences.colorFilterMode().set(index) }, onClick = { screenModel.preferences.colorFilterMode().set(index) },
content = { Text(it) }, label = { Text(it) },
) )
} }
} }

View file

@ -1,6 +1,7 @@
package eu.kanade.presentation.reader.settings package eu.kanade.presentation.reader.settings
import androidx.compose.foundation.layout.ColumnScope import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.material3.FilterChip
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
@ -11,7 +12,6 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences
import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
import tachiyomi.presentation.core.components.CheckboxItem import tachiyomi.presentation.core.components.CheckboxItem
import tachiyomi.presentation.core.components.SettingsFlowRow import tachiyomi.presentation.core.components.SettingsFlowRow
import tachiyomi.presentation.core.components.material.ChoiceChip
private val themes = listOf( private val themes = listOf(
R.string.black_background to 1, R.string.black_background to 1,
@ -25,10 +25,10 @@ internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
val readerTheme by screenModel.preferences.readerTheme().collectAsState() val readerTheme by screenModel.preferences.readerTheme().collectAsState()
SettingsFlowRow(R.string.pref_reader_theme) { SettingsFlowRow(R.string.pref_reader_theme) {
themes.map { (labelRes, value) -> themes.map { (labelRes, value) ->
ChoiceChip( FilterChip(
isSelected = readerTheme == value, selected = readerTheme == value,
onClick = { screenModel.preferences.readerTheme().set(value) }, onClick = { screenModel.preferences.readerTheme().set(value) },
content = { Text(stringResource(labelRes)) }, label = { Text(stringResource(labelRes)) },
) )
} }
} }

View file

@ -331,7 +331,7 @@ fun SettingsFlowRow(
end = SettingsItemsPaddings.Horizontal, end = SettingsItemsPaddings.Horizontal,
bottom = SettingsItemsPaddings.Vertical, bottom = SettingsItemsPaddings.Vertical,
), ),
horizontalArrangement = Arrangement.spacedBy(4.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
content = content, content = content,
) )
} }

View file

@ -1,60 +0,0 @@
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)
}
}