diff --git a/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarFabColumn.kt b/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarFabColumn.kt index 1b2dc762..7a68d40e 100644 --- a/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarFabColumn.kt +++ b/app/src/main/java/de/jeanlucmakiola/calendula/ui/common/CalendarFabColumn.kt @@ -11,6 +11,8 @@ import androidx.compose.animation.shrinkHorizontally import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.material.icons.Icons import androidx.compose.material.icons.automirrored.filled.KeyboardArrowRight import androidx.compose.material.icons.filled.Add @@ -26,6 +28,7 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.unit.dp import de.jeanlucmakiola.calendula.R @@ -39,6 +42,9 @@ class FabSelection( private enum class FabIcon { Create, Open, Fold } +/** The standard FAB's size, which the row it sits in is held to. */ +private val FAB_SIZE = 56.dp + /** * The FAB stack shared by the three calendar views: a persistent "+" to * create an event, with the jump-to-today pill appearing above it whenever @@ -73,12 +79,17 @@ fun CalendarFabColumn( // Held past the selection clearing, so the bar has something to fold away. val heldBar = remember { mutableStateOf<(@Composable () -> Unit)?>(null) } selection?.let { heldBar.value = it.bar } + // Held at the FAB's own height whatever the bar does: the bar is taller, + // and a row grown to fit it moved the FAB up as the bar unfolded. Row( + modifier = Modifier.height(FAB_SIZE), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(8.dp), ) { AnimatedVisibility( visible = selection?.expanded == true, + // Overflows the row evenly above and below, centred on the FAB. + modifier = Modifier.wrapContentHeight(unbounded = true), enter = expandHorizontally( animationSpec = MaterialTheme.motionScheme.fastSpatialSpec(), expandFrom = Alignment.End,