lostecho/Tomato
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add tooltips to toolbar

Browse Source
This commit is contained in:
Nishant Mishra
2025-11-30 11:40:54 +05:30
parent 0dcaddf4fe
commit 651a26d2d6
1 changed files with 61 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
app/src/main/java/org/nsh07/pomodoro/ui/AppScreen.kt
View File

@@ -53,11 +53,16 @@ import androidx.compose.material3.HorizontalFloatingToolbar
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme.colorScheme import androidx.compose.material3.MaterialTheme.colorScheme
import androidx.compose.material3.MaterialTheme.motionScheme import androidx.compose.material3.MaterialTheme.motionScheme
import androidx.compose.material3.PlainTooltip
import androidx.compose.material3.Scaffold import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text import androidx.compose.material3.Text
import androidx.compose.material3.ToggleButton import androidx.compose.material3.ToggleButton
import androidx.compose.material3.ToggleButtonDefaults import androidx.compose.material3.ToggleButtonDefaults
import androidx.compose.material3.TooltipAnchorPosition
import androidx.compose.material3.TooltipBox
import androidx.compose.material3.TooltipDefaults
import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
import androidx.compose.material3.rememberTooltipState
import androidx.compose.runtime.Composable import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.mutableStateOf
@@ -70,6 +75,7 @@ import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.compose.ui.zIndex import androidx.compose.ui.zIndex
import androidx.lifecycle.compose.collectAsStateWithLifecycle import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel import androidx.lifecycle.viewmodel.compose.viewModel
@@ -158,48 +164,64 @@ fun AppScreen(
) { ) {
mainScreens.forEach { item -> mainScreens.forEach { item ->
val selected = backStack.last() == item.route val selected = backStack.last() == item.route
ToggleButton( TooltipBox(
checked = selected, positionProvider =
onCheckedChange = if (item.route != Screen.Timer) { // Ensure the backstack does not accumulate screens TooltipDefaults.rememberTooltipPositionProvider(
{ TooltipAnchorPosition.Above
if (backStack.size < 2) backStack.add(item.route) ),
else backStack[1] = item.route tooltip = { PlainTooltip { Text(stringResource(item.label)) } },
} state = rememberTooltipState(),
} else {
{ if (backStack.size > 1) backStack.removeAt(1) }
},
colors = ToggleButtonDefaults.toggleButtonColors(
containerColor = colorScheme.primary,
contentColor = colorScheme.onPrimary,
checkedContainerColor = colorScheme.primaryContainer,
checkedContentColor = colorScheme.onPrimaryContainer
),
shapes = ToggleButtonDefaults.shapes(
CircleShape,
CircleShape,
CircleShape
),
modifier = Modifier.height(56.dp)
) { ) {
Row( ToggleButton(
verticalAlignment = Alignment.CenterVertically checked = selected,
onCheckedChange = if (item.route != Screen.Timer) { // Ensure the backstack does not accumulate screens
{
if (backStack.size < 2) backStack.add(item.route)
else backStack[1] = item.route
}
} else {
{ if (backStack.size > 1) backStack.removeAt(1) }
},
colors = ToggleButtonDefaults.toggleButtonColors(
containerColor = colorScheme.primary,
contentColor = colorScheme.onPrimary,
checkedContainerColor = colorScheme.primaryContainer,
checkedContentColor = colorScheme.onPrimaryContainer
),
shapes = ToggleButtonDefaults.shapes(
CircleShape,
CircleShape,
CircleShape
),
modifier = Modifier.height(56.dp)
) { ) {
Crossfade(selected) { selected -> Row(
if (selected) Icon(painterResource(item.selectedIcon), null) verticalAlignment = Alignment.CenterVertically
else Icon(painterResource(item.unselectedIcon), null)
}
AnimatedVisibility(
selected || wide,
enter = fadeIn(motionScheme.defaultEffectsSpec()) + expandHorizontally(
motionScheme.defaultSpatialSpec()
),
exit = fadeOut(motionScheme.defaultEffectsSpec()) + shrinkHorizontally(
motionScheme.defaultSpatialSpec()
),
) { ) {
Row { Crossfade(selected) { selected ->
Spacer(Modifier.width(ButtonDefaults.MediumIconSpacing)) if (selected) Icon(
Text(stringResource(item.label)) painterResource(item.selectedIcon),
null
)
else Icon(painterResource(item.unselectedIcon), null)
}
AnimatedVisibility(
selected || wide,
enter = fadeIn(motionScheme.defaultEffectsSpec()) + expandHorizontally(
motionScheme.defaultSpatialSpec()
),
exit = fadeOut(motionScheme.defaultEffectsSpec()) + shrinkHorizontally(
motionScheme.defaultSpatialSpec()
),
) {
Row {
Spacer(Modifier.width(ButtonDefaults.MediumIconSpacing))
Text(
stringResource(item.label),
fontSize = 16.sp,
lineHeight = 24.sp
)
}
} }
} }
} }