From 325c8c5f1085933593dd9b88f4cb5699839677cd 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 --- .../ui/screens/settings/LyricsSettings.kt | 138 +++++++++++++++++- 1 file changed, 130 insertions(+), 8 deletions(-) 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..656715eb2 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 @@ -1,7 +1,13 @@ package com.dd3boh.outertune.ui.screens.settings +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.foundation.layout.windowInsetsPadding import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.verticalScroll @@ -11,18 +17,30 @@ import androidx.compose.material.icons.automirrored.rounded.Sort import androidx.compose.material.icons.rounded.ContentCut import androidx.compose.material.icons.rounded.Lyrics import androidx.compose.material.icons.rounded.TextFields +import androidx.compose.material3.AlertDialog +import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.FilledTonalIconButton import androidx.compose.material3.Icon +import androidx.compose.material3.MaterialTheme +import androidx.compose.material3.Slider import androidx.compose.material3.Text +import androidx.compose.material3.TextButton import androidx.compose.material3.TopAppBar import androidx.compose.material3.TopAppBarScrollBehavior import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue +import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.mutableStateOf 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 androidx.navigation.NavController import com.dd3boh.outertune.LocalPlayerAwareWindowInsets import com.dd3boh.outertune.R @@ -33,7 +51,6 @@ 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.EnumListPreference import com.dd3boh.outertune.ui.component.IconButton import com.dd3boh.outertune.ui.component.PreferenceEntry @@ -42,6 +59,7 @@ import com.dd3boh.outertune.ui.component.SwitchPreference import com.dd3boh.outertune.ui.utils.backToMain import com.dd3boh.outertune.utils.rememberEnumPreference import com.dd3boh.outertune.utils.rememberPreference +import kotlin.math.roundToInt @OptIn(ExperimentalMaterial3Api::class) @Composable @@ -66,19 +84,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) } ) } @@ -176,3 +189,112 @@ fun LyricsSettings( scrollBehavior = scrollBehavior ) } + +@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