Atte149/book-story
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🚀 Add Tooltip to Slider

Browse source 
* Added Tooltip to Slider when dragging
This commit is contained in:
Acclorite 2024-10-19 14:39:17 +03:00
parent b1100d5923
commit 016c22b247
1 changed files with 74 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

79
app/src/main/java/ua/acclorite/book_story/presentation/screens/settings/components/SliderWithTitle.kt
View file

@ -1,5 +1,6 @@
package ua.acclorite.book_story.presentation.screens.settings.components
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
@ -7,16 +8,22 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Label
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Slider
import androidx.compose.material3.SliderDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import ua.acclorite.book_story.presentation.core.components.CategoryTitle
import kotlin.math.roundToInt
/**
@ -33,6 +40,7 @@ import kotlin.math.roundToInt
* @param verticalPadding Vertical item padding.
* @param onValueChange Callback when value changes.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SliderWithTitle(
modifier: Modifier = Modifier,
@ -46,6 +54,14 @@ fun SliderWithTitle(
verticalPadding: Dp = 8.dp,
onValueChange: (Int) -> Unit
) {
val interactionSource = remember { MutableInteractionSource() }
val placeholder = remember(showPlaceholder, value, valuePlaceholder) {
derivedStateOf {
if (!showPlaceholder) "${value.first}${value.second}"
else valuePlaceholder
}
}
Row(
modifier
.fillMaxWidth()
@ -56,8 +72,7 @@ fun SliderWithTitle(
CategoryTitle(title = title, padding = 0.dp)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = if (!showPlaceholder) "${value.first}${value.second}"
else valuePlaceholder,
text = placeholder.value,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
@ -69,6 +84,29 @@ fun SliderWithTitle(
onValueChange = {
onValueChange(it.roundToInt())
},
interactionSource = interactionSource,
thumb = {
Label(
label = {
PlainTooltip(
modifier = Modifier.clip(CircleShape)
) {
Text(
text = placeholder.value,
modifier = Modifier.padding(
vertical = 6.dp,
horizontal = 4.dp
)
)
}
},
interactionSource = interactionSource
) {
SliderDefaults.Thumb(
interactionSource = interactionSource
)
}
},
steps = toValue - fromValue - 1,
colors = SliderDefaults.colors(
activeTickColor = MaterialTheme.colorScheme.onPrimary,
@ -91,6 +129,7 @@ fun SliderWithTitle(
* @param verticalPadding Vertical item padding.
* @param onValueChange Callback when value changes.
*/
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SliderWithTitle(
modifier: Modifier = Modifier,
@ -103,6 +142,14 @@ fun SliderWithTitle(
verticalPadding: Dp = 8.dp,
onValueChange: (Float) -> Unit
) {
val interactionSource = remember { MutableInteractionSource() }
val placeholder = remember(showPlaceholder, value, toValue, valuePlaceholder) {
derivedStateOf {
if (!showPlaceholder) "${(value.first * toValue).roundToInt()}${value.second}"
else valuePlaceholder
}
}
Row(
modifier
.fillMaxWidth()
@ -113,8 +160,7 @@ fun SliderWithTitle(
CategoryTitle(title = title, padding = 0.dp)
Spacer(modifier = Modifier.height(4.dp))
Text(
text = if (!showPlaceholder) "${(value.first * toValue).roundToInt()}${value.second}"
else valuePlaceholder,
text = placeholder.value,
style = MaterialTheme.typography.bodyMedium,
color = MaterialTheme.colorScheme.onSurfaceVariant
)
@ -126,6 +172,29 @@ fun SliderWithTitle(
onValueChange = {
onValueChange(it)
},
interactionSource = interactionSource,
thumb = {
Label(
label = {
PlainTooltip(
modifier = Modifier.clip(CircleShape)
) {
Text(
text = placeholder.value,
modifier = Modifier.padding(
vertical = 6.dp,
horizontal = 4.dp
)
)
}
},
interactionSource = interactionSource
) {
SliderDefaults.Thumb(
interactionSource = interactionSource
)
}
},
colors = SliderDefaults.colors(
activeTickColor = MaterialTheme.colorScheme.onPrimary,
inactiveTickColor = MaterialTheme.colorScheme.onSurfaceVariant