Skip to content

Commit

Permalink
Better UI for font size picker
Browse files Browse the repository at this point in the history
  • Loading branch information
@reocat
reocat committed Feb 2, 2025
1 parent 209b614 commit 325c8c5
Showing 1 changed file with 130 additions and 8 deletions.
138 changes: 130 additions & 8 deletions app/src/main/java/com/dd3boh/outertune/ui/screens/settings/LyricsSettings.kt
View file
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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) }
)
}

Expand Down Expand Up @@ -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))
}
}
}
)
}

0 comments on commit 325c8c5

Please sign in to comment.