Tweak Settings UI

This commit is contained in:
vfsfitvnm 2022-10-04 18:36:59 +02:00
parent 8fc5ccabc6
commit 047231e389
3 changed files with 45 additions and 49 deletions

View file

@ -2,15 +2,19 @@ package it.vfsfitvnm.vimusic.ui.screens.settings
import androidx.compose.animation.ExperimentalAnimationApi
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues
import it.vfsfitvnm.vimusic.enums.ColorPaletteMode
import it.vfsfitvnm.vimusic.enums.ColorPaletteName
@ -70,7 +74,15 @@ fun AppearanceSettings() {
EnumValueSelectorSettingsEntry(
title = "Thumbnail roundness",
selectedValue = thumbnailRoundness,
onValueSelected = { thumbnailRoundness = it }
onValueSelected = { thumbnailRoundness = it },
trailingContent = {
Spacer(
modifier = Modifier
.border(width = 1.dp, color = colorPalette.accent, shape = thumbnailRoundness.shape())
.background(color = colorPalette.background1, shape = thumbnailRoundness.shape())
.size(36.dp)
)
}
)
SettingsGroupSpacer()

View file

@ -69,9 +69,7 @@ fun CacheSettings() {
EnumValueSelectorSettingsEntry(
title = "Max size",
selectedValue = coilDiskCacheMaxSize,
onValueSelected = {
coilDiskCacheMaxSize = it
}
onValueSelected = { coilDiskCacheMaxSize = it }
)
}
@ -100,9 +98,7 @@ fun CacheSettings() {
EnumValueSelectorSettingsEntry(
title = "Max size",
selectedValue = exoPlayerDiskCacheMaxSize,
onValueSelected = {
exoPlayerDiskCacheMaxSize = it
}
onValueSelected = { exoPlayerDiskCacheMaxSize = it }
)
}
}

View file

@ -72,7 +72,8 @@ inline fun <reified T : Enum<T>> EnumValueSelectorSettingsEntry(
crossinline onValueSelected: (T) -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
crossinline valueText: (T) -> String = Enum<T>::name
crossinline valueText: (T) -> String = Enum<T>::name,
noinline trailingContent: (@Composable () -> Unit)? = null
) {
ValueSelectorSettingsEntry(
title = title,
@ -81,7 +82,8 @@ inline fun <reified T : Enum<T>> EnumValueSelectorSettingsEntry(
onValueSelected = onValueSelected,
modifier = modifier,
isEnabled = isEnabled,
valueText = valueText
valueText = valueText,
trailingContent = trailingContent,
)
}
@ -93,7 +95,8 @@ inline fun <T> ValueSelectorSettingsEntry(
crossinline onValueSelected: (T) -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true,
crossinline valueText: (T) -> String = { it.toString() }
crossinline valueText: (T) -> String = { it.toString() },
noinline trailingContent: (@Composable () -> Unit)? = null
) {
var isShowingDialog by remember {
mutableStateOf(false)
@ -101,9 +104,7 @@ inline fun <T> ValueSelectorSettingsEntry(
if (isShowingDialog) {
ValueSelectorDialog(
onDismiss = {
isShowingDialog = false
},
onDismiss = { isShowingDialog = false },
title = title,
selectedValue = selectedValue,
values = values,
@ -117,9 +118,8 @@ inline fun <T> ValueSelectorSettingsEntry(
text = valueText(selectedValue),
modifier = modifier,
isEnabled = isEnabled,
onClick = {
isShowingDialog = true
}
onClick = { isShowingDialog = true },
trailingContent = trailingContent
)
}
@ -131,6 +131,25 @@ fun SwitchSettingEntry(
onCheckedChange: (Boolean) -> Unit,
modifier: Modifier = Modifier,
isEnabled: Boolean = true
) {
SettingsEntry(
title = title,
text = text,
isEnabled = isEnabled,
onClick = { onCheckedChange(!isChecked) },
trailingContent = { Switch(isChecked = isChecked) },
modifier = modifier
)
}
@Composable
fun SettingsEntry(
title: String,
text: String,
modifier: Modifier = Modifier,
onClick: () -> Unit,
isEnabled: Boolean = true,
trailingContent: (@Composable () -> Unit)? = null
) {
val (colorPalette, typography) = LocalAppearance.current
@ -138,13 +157,12 @@ fun SwitchSettingEntry(
horizontalArrangement = Arrangement.spacedBy(16.dp),
verticalAlignment = Alignment.CenterVertically,
modifier = modifier
.clickable(enabled = isEnabled) { onCheckedChange(!isChecked) }
.clickable(enabled = isEnabled, onClick = onClick)
.alpha(if (isEnabled) 1f else 0.5f)
.padding(start = 16.dp)
.padding(all = 16.dp)
.fillMaxWidth()
) {
Column(
modifier = Modifier
.weight(1f)
@ -160,37 +178,7 @@ fun SwitchSettingEntry(
)
}
Switch(isChecked = isChecked)
}
}
@Composable
fun SettingsEntry(
title: String,
text: String,
modifier: Modifier = Modifier,
onClick: () -> Unit,
isEnabled: Boolean = true
) {
val (colorPalette, typography) = LocalAppearance.current
Column(
modifier = modifier
.clickable(enabled = isEnabled, onClick = onClick)
.alpha(if (isEnabled) 1f else 0.5f)
.padding(start = 16.dp)
.padding(all = 16.dp)
.fillMaxWidth()
) {
BasicText(
text = title,
style = typography.xs.semiBold.copy(color = colorPalette.text),
)
BasicText(
text = text,
style = typography.xs.semiBold.copy(color = colorPalette.textSecondary),
)
trailingContent?.invoke()
}
}