From 63a66addc684427baf1f627ebedd6c8cfef30e86 Mon Sep 17 00:00:00 2001 From: reocat Date: Fri, 31 Jan 2025 23:12:56 +0300 Subject: [PATCH] Better UI for font size picker --- .../outertune/ui/component/FontSizeDialog.kt | 139 ++++++++++++++++++ .../ui/screens/settings/LyricsSettings.kt | 11 +- 2 files changed, 142 insertions(+), 8 deletions(-) create mode 100644 app/src/main/java/com/dd3boh/outertune/ui/component/FontSizeDialog.kt diff --git a/app/src/main/java/com/dd3boh/outertune/ui/component/FontSizeDialog.kt b/app/src/main/java/com/dd3boh/outertune/ui/component/FontSizeDialog.kt new file mode 100644 index 000000000..7164e8784 --- /dev/null +++ b/app/src/main/java/com/dd3boh/outertune/ui/component/FontSizeDialog.kt @@ -0,0 +1,139 @@ +package com.dd3boh.outertune.ui.component + +import androidx.compose.animation.core.animateFloatAsState +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Button +import androidx.compose.material3.FilledTonalIconButton +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Slider +import androidx.compose.material3.Text +import androidx.compose.material3.TextButton +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableFloatStateOf +import androidx.compose.runtime.remember +import androidx.compose.runtime.setValue +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.dd3boh.outertune.R +import kotlin.math.roundToInt + +@Composable +fun FontSizeDialog( + initialValue: Int, + onDismiss: () -> Unit, + onConfirm: (Int) -> Unit, + onReset: () -> Unit +) { + var currentValue by remember { mutableFloatStateOf(initialValue.toFloat()) } + val defaultValue = 20f + + val previewOpacity by animateFloatAsState( + targetValue = if (currentValue == initialValue.toFloat()) 0.6f else 1f, + label = "preview opacity" + ) + + AlertDialog( + onDismissRequest = onDismiss, + modifier = Modifier.fillMaxWidth(0.8f), + title = { + Text( + text = stringResource(R.string.lyrics_font_Size), + style = MaterialTheme.typography.headlineSmall, + modifier = Modifier.padding(bottom = 2.dp) + ) + }, + text = { + Column( + modifier = Modifier + .fillMaxWidth() + .padding(vertical = 2.dp), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(4.dp) + ) { + Text( + text = "Preview Text", + fontSize = currentValue.sp, + textAlign = TextAlign.Center, + modifier = Modifier + .fillMaxWidth() + .alpha(previewOpacity) + ) + + Slider( + value = currentValue, + onValueChange = { currentValue = it }, + valueRange = 8f..32f, + steps = 23, + modifier = Modifier.padding(horizontal = 4.dp) + ) + + Row( + modifier = Modifier.fillMaxWidth(), + horizontalArrangement = Arrangement.Center, + verticalAlignment = Alignment.CenterVertically + ) { + FilledTonalIconButton( + onClick = { if (currentValue > 8f) currentValue-- }, + enabled = currentValue > 8f + ) { + Text("-", style = MaterialTheme.typography.titleLarge) + } + + Text( + text = "${currentValue.roundToInt()} sp", + style = MaterialTheme.typography.titleLarge, + modifier = Modifier.padding(horizontal = 4.dp) + ) + + FilledTonalIconButton( + onClick = { if (currentValue < 32f) currentValue++ }, + enabled = currentValue < 32f + ) { + Text("+", style = MaterialTheme.typography.titleLarge) + } + } + } + }, + confirmButton = { + Row( + modifier = Modifier.padding(horizontal = 2.dp), + horizontalArrangement = Arrangement.spacedBy(2.dp) + ) { + TextButton( + onClick = { + currentValue = defaultValue + onReset() + }, + enabled = currentValue.roundToInt() != defaultValue.toInt() + ) { + Text(stringResource(R.string.reset)) + } + + Spacer(modifier = Modifier.weight(1f)) + + TextButton(onClick = onDismiss) { + Text(stringResource(android.R.string.cancel)) + } + + Button( + onClick = { onConfirm(currentValue.roundToInt()) }, + enabled = currentValue.roundToInt() != initialValue + ) { + Text(stringResource(android.R.string.ok)) + } + } + } + ) +} \ No newline at end of file diff --git a/app/src/main/java/com/dd3boh/outertune/ui/screens/settings/LyricsSettings.kt b/app/src/main/java/com/dd3boh/outertune/ui/screens/settings/LyricsSettings.kt index 9453ef3ce..bd9cb9026 100644 --- a/app/src/main/java/com/dd3boh/outertune/ui/screens/settings/LyricsSettings.kt +++ b/app/src/main/java/com/dd3boh/outertune/ui/screens/settings/LyricsSettings.kt @@ -33,7 +33,7 @@ import com.dd3boh.outertune.constants.LyricSourcePrefKey import com.dd3boh.outertune.constants.LyricTrimKey import com.dd3boh.outertune.constants.LyricsTextPositionKey import com.dd3boh.outertune.constants.MultilineLrcKey -import com.dd3boh.outertune.ui.component.CounterDialog +import com.dd3boh.outertune.ui.component.FontSizeDialog import com.dd3boh.outertune.ui.component.EnumListPreference import com.dd3boh.outertune.ui.component.IconButton import com.dd3boh.outertune.ui.component.PreferenceEntry @@ -66,19 +66,14 @@ fun LyricsSettings( // lyrics font size if (showFontSizeDialog) { - CounterDialog( - title = stringResource(R.string.lyrics_font_Size), + FontSizeDialog( initialValue = lyricFontSize, - upperBound = 32, - lowerBound = 8, - unitDisplay = " pt", onDismiss = { showFontSizeDialog = false }, onConfirm = { onLyricFontSizeChange(it) showFontSizeDialog = false }, - onReset = { onLyricFontSizeChange(20) }, - onCancel = { showFontSizeDialog = false } + onReset = { onLyricFontSizeChange(20) } ) }