Better UI for font size picker

reocat · Feb 2, 2025 · 63a66ad · 63a66ad
1 parent 209b614
commit 63a66ad
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 8 deletions.
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
@@ -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))
+                }
+            }
+        }
+    )
+}
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
@@ -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) }
         )
     }