kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2026-08-05 19:59:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: enhance button styles and interactions in Buttons and Theme components for improved UI consistency

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2026-07-05 19:27:49 +06:00
parent a52ba68f1f
commit dadc302ef0
3 changed files with 61 additions and 945 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Buttons.kt
View File

@ -168,7 +168,11 @@ fun OutlineButton(
Row( Row(
verticalAlignment = Alignment.CenterVertically, verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp), horizontalArrangement = Arrangement.spacedBy(8.dp),
content = content, content = {
CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
content()
}
},
) )
} }
} }
@ -320,30 +324,36 @@ fun GhostIconButton(
content: @Composable () -> Unit, content: @Composable () -> Unit,
) { ) {
val baseTheme = LocalBaseUITheme.current val baseTheme = LocalBaseUITheme.current
val style = theme ?: baseTheme.buttons.ghost val outlineStyle = baseTheme.iconButtons.outline
val interactionSource = remember { MutableInteractionSource() } val ghostStyle = theme ?: BaseUITheme.ButtonStyle(
val isPressed by interactionSource.collectIsPressedAsState() colors = BaseUITheme.InteractionState(
val isHovered by interactionSource.collectIsHoveredAsState() hovered = outlineStyle.colors.hovered,
val state = resolveButtonState(style, isPressed, isHovered) pressed = outlineStyle.colors.pressed,
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp focused = BaseUITheme.ButtonColors(
background = Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)),
Box( foreground = outlineStyle.colors.focused.foreground,
modifier = modifier highlight = outlineStyle.colors.focused.highlight,
.defaultMinSize(minHeight = ButtonMinHeight) ),
.hoverable(interactionSource = interactionSource, enabled = enabled) ),
.graphicsLayer { translationY = lift.toPx() } shape = outlineStyle.shape,
.clip(state.shape) shadow = BaseUITheme.InteractionState(
.then( hovered = outlineStyle.shadow.hovered,
if (!isHovered && !isPressed) Modifier else Modifier.background(state.colors.background, state.shape) pressed = outlineStyle.shadow.pressed,
focused = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
),
border = BaseUITheme.InteractionState(
hovered = outlineStyle.border.hovered,
pressed = outlineStyle.border.pressed,
focused = BaseUITheme.Border(Color.Transparent, 0.dp),
),
padding = outlineStyle.padding,
) )
.clickable( OutlineButton(
enabled = enabled,
interactionSource = interactionSource,
indication = ripple(),
onClick = onClick, onClick = onClick,
) modifier = modifier,
.padding(state.padding), enabled = enabled,
contentAlignment = Alignment.Center, hoverOnly = true,
theme = ghostStyle,
) { ) {
content() content()
} }

942
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Theme.kt
View File

File diff suppressed because it is too large Load Diff

4
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackList.kt
View File

@ -353,6 +353,7 @@ fun TrackList(
Column( Column(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
.padding(top = 12.dp, bottom = 12.dp)
) { ) {
visibleTracks.forEachIndexed { displayedIndex, track -> visibleTracks.forEachIndexed { displayedIndex, track ->
if (displayedIndex > 0) { if (displayedIndex > 0) {
@ -514,6 +515,7 @@ private fun TrackListRow(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
) { ) {
val rowTheme = LocalBaseUITheme.current.listRowTile val rowTheme = LocalBaseUITheme.current.listRowTile
val isLight = MaterialTheme.colorScheme.surface.luminance() > 0.5f
val artworkInteractionSource = remember { MutableInteractionSource() } val artworkInteractionSource = remember { MutableInteractionSource() }
val isArtworkHovered by artworkInteractionSource.collectIsHoveredAsState() val isArtworkHovered by artworkInteractionSource.collectIsHoveredAsState()
val rowInteractionSource = remember { MutableInteractionSource() } val rowInteractionSource = remember { MutableInteractionSource() }
@ -525,7 +527,7 @@ private fun TrackListRow(
else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)) else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
} }
val highlightColor = Color.White.copy( val highlightColor = Color.White.copy(
alpha = if (rowTheme.foreground.hovered.luminance() > 0.5f) 0.9f else 0.06f alpha = if (isLight) 0.9f else 0.06f
) )
Row( Row(