Replace some reader sheet settings with FlowRow of Chips

This commit is contained in:
arkon
2023-07-15 14:27:30 -04:00
parent 5467104b95
commit 09e4b5a9cd
4 changed files with 121 additions and 29 deletions

View File

@ -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),
) {

View File

@ -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)
}
}