ui: round out the floating indicators

Size the offline button to 48dp and lift the cloud-off glyph by its
own off-centre so it sits in the middle of the circle. Give the active
filter dot the old FAB treatment: a 7dp dot with a ring in the button
colour, moved onto the top bar of the filter glyph.
This commit is contained in:
austinried
2026-10-21 10:14:10 +00:00
parent 3ffe38d988
commit edc8782302
@@ -74,7 +74,6 @@ import androidx.compose.runtime.setValue
import androidx.compose.runtime.snapshotFlow import androidx.compose.runtime.snapshotFlow
import androidx.compose.ui.Alignment import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.clipToBounds import androidx.compose.ui.draw.clipToBounds
import androidx.compose.ui.draw.drawBehind import androidx.compose.ui.draw.drawBehind
import androidx.compose.ui.draw.drawWithContent import androidx.compose.ui.draw.drawWithContent
@@ -618,25 +617,29 @@ fun LibraryScreen(
} }
if (!searchActive) { if (!searchActive) {
val fabContainerColor = artwork?.scheme?.primary ?: MaterialTheme.colorScheme.surfaceContainerHigh
val fabContentColor = artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.onBackground
if (offline) { if (offline) {
FilledTonalIconButton( FilledTonalIconButton(
onClick = onExitOffline, onClick = onExitOffline,
modifier = modifier =
Modifier Modifier
.align(Alignment.BottomStart) .align(Alignment.BottomStart)
.padding(start = 16.dp, bottom = tabBarHeight + 16.dp), .padding(start = 16.dp, bottom = tabBarHeight + 16.dp)
.size(48.dp),
) { ) {
Icon( Icon(
imageVector = Icons.Rounded.CloudOff, imageVector = Icons.Rounded.CloudOff,
contentDescription = stringResource(R.string.offline_mode_status), contentDescription = stringResource(R.string.offline_mode_status),
modifier = Modifier.size(24.dp).offset(y = (-0.75).dp),
) )
} }
} }
val searchFab = selectedTab == LibraryTab.Home val searchFab = selectedTab == LibraryTab.Home
FloatingActionButton( FloatingActionButton(
onClick = { if (searchFab) onOpenSearch() else showOptions = true }, onClick = { if (searchFab) onOpenSearch() else showOptions = true },
containerColor = artwork?.scheme?.primary ?: MaterialTheme.colorScheme.surfaceContainerHigh, containerColor = fabContainerColor,
contentColor = artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.onBackground, contentColor = fabContentColor,
elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 12.dp), elevation = FloatingActionButtonDefaults.elevation(defaultElevation = 12.dp),
modifier = Modifier.align(Alignment.BottomEnd).padding(end = 16.dp, bottom = tabBarHeight + 16.dp), modifier = Modifier.align(Alignment.BottomEnd).padding(end = 16.dp, bottom = tabBarHeight + 16.dp),
) { ) {
@@ -655,11 +658,18 @@ fun LibraryScreen(
modifier = modifier =
Modifier Modifier
.align(Alignment.TopEnd) .align(Alignment.TopEnd)
.offset(x = 4.dp, y = (-4).dp) .offset(x = 1.dp, y = 3.dp)
.size(8.dp) .size(11.dp)
.clip(CircleShape) .background(fabContainerColor, CircleShape),
.background(artwork?.scheme?.onPrimary ?: MaterialTheme.colorScheme.primary), contentAlignment = Alignment.Center,
) ) {
Box(
modifier =
Modifier
.size(7.dp)
.background(fabContentColor, CircleShape),
)
}
} }
} }
} }