draw the library list-options glyph at a heavier weight

The bundled Material icon set has no weight axis, so the FAB now draws the
three-bar glyph with a configurable stroke thickness instead of using Segment.
This commit is contained in:
austinried
2026-10-04 00:29:58 +00:00
parent f490ca8fa7
commit b10006cba1
@@ -1,6 +1,7 @@
package com.subtracks.ui.library package com.subtracks.ui.library
import androidx.compose.foundation.BorderStroke import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.background import androidx.compose.foundation.background
import androidx.compose.foundation.clickable import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Arrangement
@@ -26,7 +27,6 @@ import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.icons.Icons import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.rounded.PlaylistPlay import androidx.compose.material.icons.automirrored.rounded.PlaylistPlay
import androidx.compose.material.icons.automirrored.rounded.Segment
import androidx.compose.material.icons.rounded.Add import androidx.compose.material.icons.rounded.Add
import androidx.compose.material.icons.rounded.Album import androidx.compose.material.icons.rounded.Album
import androidx.compose.material.icons.rounded.ArrowDownward import androidx.compose.material.icons.rounded.ArrowDownward
@@ -46,6 +46,7 @@ import androidx.compose.material3.FloatingActionButtonDefaults
import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton import androidx.compose.material3.IconButton
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.MaterialTheme import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ModalBottomSheet import androidx.compose.material3.ModalBottomSheet
import androidx.compose.material3.Surface import androidx.compose.material3.Surface
@@ -82,6 +83,7 @@ import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.ClipOp import androidx.compose.ui.graphics.ClipOp
import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path import androidx.compose.ui.graphics.Path
import androidx.compose.ui.graphics.StrokeCap
import androidx.compose.ui.graphics.drawscope.clipPath import androidx.compose.ui.graphics.drawscope.clipPath
import androidx.compose.ui.graphics.drawscope.clipRect import androidx.compose.ui.graphics.drawscope.clipRect
import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector
@@ -91,6 +93,8 @@ import androidx.compose.ui.layout.onGloballyPositioned
import androidx.compose.ui.layout.onSizeChanged import androidx.compose.ui.layout.onSizeChanged
import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.semantics.clearAndSetSemantics import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.unit.Constraints import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
@@ -479,10 +483,11 @@ fun LibraryScreen(
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),
) { ) {
Box { Box {
Icon( ListOptionsGlyph(
Icons.AutoMirrored.Rounded.Segment, modifier =
contentDescription = "List options", Modifier
modifier = Modifier.size(28.dp), .size(26.dp)
.semantics { contentDescription = "List options" },
) )
if (filtersActive) { if (filtersActive) {
Box( Box(
@@ -648,6 +653,8 @@ private val TAB_BAR_CONTENT_HEIGHT = 52.dp
private val TAB_ICON_SIZE = 24.dp private val TAB_ICON_SIZE = 24.dp
private val TAB_VERTICAL_PADDING = 6.dp private val TAB_VERTICAL_PADDING = 6.dp
private val TOUCH_TARGET = 48.dp private val TOUCH_TARGET = 48.dp
private const val LIST_OPTIONS_WEIGHT = 0.15f
private val LIST_OPTIONS_BAR_WIDTHS = listOf(1f, 0.62f, 0.34f)
@Composable @Composable
private fun SearchField( private fun SearchField(
@@ -681,6 +688,25 @@ private fun SearchField(
) )
} }
@Composable
private fun ListOptionsGlyph(modifier: Modifier = Modifier) {
val color = LocalContentColor.current
Canvas(modifier) {
val thickness = size.height * LIST_OPTIONS_WEIGHT
val gap = size.height / (LIST_OPTIONS_BAR_WIDTHS.size + 1)
LIST_OPTIONS_BAR_WIDTHS.forEachIndexed { index, widthFraction ->
val y = gap * (index + 1)
drawLine(
color = color,
start = Offset(0f, y),
end = Offset(size.width * widthFraction, y),
strokeWidth = thickness,
cap = StrokeCap.Round,
)
}
}
}
@OptIn(ExperimentalMaterial3Api::class) @OptIn(ExperimentalMaterial3Api::class)
@Composable @Composable
internal fun LibraryTabs( internal fun LibraryTabs(