From 047231e389ab2be49ce879302496e75b8b95fb59 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Tue, 4 Oct 2022 18:36:59 +0200 Subject: [PATCH] Tweak Settings UI --- .../ui/screens/settings/AppearanceSettings.kt | 14 +++- .../ui/screens/settings/CacheSettings.kt | 8 +-- .../ui/screens/settings/SettingsScreen.kt | 72 ++++++++----------- 3 files changed, 45 insertions(+), 49 deletions(-) diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettings.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettings.kt index a4c7d15..eb43a8d 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettings.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettings.kt @@ -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() diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettings.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettings.kt index aaee5a0..f499e71 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettings.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettings.kt @@ -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 } ) } } diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/SettingsScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/SettingsScreen.kt index e35ec6d..fa15bbf 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/SettingsScreen.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/SettingsScreen.kt @@ -72,7 +72,8 @@ inline fun > EnumValueSelectorSettingsEntry( crossinline onValueSelected: (T) -> Unit, modifier: Modifier = Modifier, isEnabled: Boolean = true, - crossinline valueText: (T) -> String = Enum::name + crossinline valueText: (T) -> String = Enum::name, + noinline trailingContent: (@Composable () -> Unit)? = null ) { ValueSelectorSettingsEntry( title = title, @@ -81,7 +82,8 @@ inline fun > EnumValueSelectorSettingsEntry( onValueSelected = onValueSelected, modifier = modifier, isEnabled = isEnabled, - valueText = valueText + valueText = valueText, + trailingContent = trailingContent, ) } @@ -93,7 +95,8 @@ inline fun 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 ValueSelectorSettingsEntry( if (isShowingDialog) { ValueSelectorDialog( - onDismiss = { - isShowingDialog = false - }, + onDismiss = { isShowingDialog = false }, title = title, selectedValue = selectedValue, values = values, @@ -117,9 +118,8 @@ inline fun 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() } }