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: simplify highlight implementation in UI components for improved readability and maintainability

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2026-07-05 22:23:16 +06:00
parent dadc302ef0
commit 12ef478b0e
8 changed files with 94 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/AutocompleteTextField.kt
View File

@ -269,21 +269,7 @@ fun <T> AutocompleteTextField(
BorderStroke(resolvedBorder.width, resolvedBorder.color),
fieldState.shape
)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(fieldState.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}
.highlight(fieldState.highlight)
.padding(resolvedTextFieldTheme.padding),
) {
Row(

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

@ -89,9 +89,29 @@ private fun resolveButtonState(
isHovered: Boolean,
): ResolvedButtonState {
return when {
isPressed -> ResolvedButtonState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed, style.padding.pressed)
isHovered -> ResolvedButtonState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered, style.padding.hovered)
else -> ResolvedButtonState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused, style.padding.focused)
isPressed -> ResolvedButtonState(
style.colors.pressed,
style.shape.pressed,
style.shadow.pressed,
style.border.pressed,
style.padding.pressed
)
isHovered -> ResolvedButtonState(
style.colors.hovered,
style.shape.hovered,
style.shadow.hovered,
style.border.hovered,
style.padding.hovered
)
else -> ResolvedButtonState(
style.colors.focused,
style.shape.focused,
style.shadow.focused,
style.border.focused,
style.padding.focused
)
}
}
@ -134,11 +154,17 @@ fun OutlineButton(
.hoverable(interactionSource = interactionSource, enabled = enabled)
.graphicsLayer { translationY = lift.toPx() }
.then(
if (hoverOnly && !isHovered) Modifier else Modifier.applyShadow(state.shadow, state.shape)
if (hoverOnly && !isHovered) Modifier else Modifier.applyShadow(
state.shadow,
state.shape
)
)
.clip(state.shape)
.then(
if (hoverOnly && !isHovered) Modifier else Modifier.background(state.colors.background, state.shape)
if (hoverOnly && !isHovered) Modifier else Modifier.background(
state.colors.background,
state.shape
)
.border(BorderStroke(state.border.width, state.border.color), state.shape)
)
.clickable(
@ -147,21 +173,7 @@ fun OutlineButton(
indication = ripple(),
onClick = onClick,
)
.then(if (hoverOnly && !isHovered) Modifier else Modifier.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(state.colors.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
})
.then(if (hoverOnly && !isHovered) Modifier else Modifier.highlight(state.colors.highlight))
.padding(state.padding),
contentAlignment = Alignment.Center,
) {
@ -208,21 +220,7 @@ fun PrimaryButton(
indication = ripple(),
onClick = onClick,
)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(state.colors.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}
.highlight(state.colors.highlight)
.padding(state.padding),
contentAlignment = Alignment.Center,
) {
@ -267,21 +265,7 @@ fun SecondaryButton(
indication = ripple(),
onClick = onClick,
)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(state.colors.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}
.highlight(state.colors.highlight)
.padding(state.padding),
contentAlignment = Alignment.Center,
) {

16
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/CheckBox.kt
View File

@ -145,21 +145,7 @@ fun CheckBox(
.clip(resolved.shape)
.background(resolved.colors.background, resolved.shape)
.border(BorderStroke(0.5.dp, borderColor), resolved.shape)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(resolved.colors.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = Offset.Zero,
size = size,
)
}
}
.highlight(resolved.colors.highlight)
.then(
if (onClick != null) {
Modifier

16
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/ChipTabs.kt
View File

@ -121,21 +121,7 @@ fun ChipTab(
indication = ripple(),
onClick = onClick,
)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(state.colors.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}
.highlight(state.colors.highlight)
.padding(state.padding),
contentAlignment = Alignment.Center,
) {

16
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/TextField.kt
View File

@ -152,21 +152,7 @@ fun TextField(
.clip(state.shape)
.background(state.background, state.shape)
.border(BorderStroke(resolvedBorder.width, resolvedBorder.color), state.shape)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(state.highlight, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}
.highlight(state.highlight)
.padding(textFieldTheme.padding),
) {
Row(

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

@ -23,6 +23,8 @@ import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.Stable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
@ -651,15 +653,30 @@ fun rememberBaseUITheme(): BaseUITheme {
shape = RoundedCornerShape(16.dp),
border = BaseUITheme.Border(border, 0.5.dp),
padding = PaddingValues(0.dp),
shadow = BaseUITheme.Shadow(6.dp, true, shadowColor.copy(alpha = 0.15f), shadowColor.copy(alpha = 0.18f)),
shadow = BaseUITheme.Shadow(
6.dp,
true,
shadowColor.copy(alpha = 0.15f),
shadowColor.copy(alpha = 0.18f)
),
),
listRowTile = BaseUITheme.ListRowTheme(
background = BaseUITheme.AdvancedInteractionState(
hovered = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
pressed = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
focused = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
selected = Brush.verticalGradient(listOf(scheme.primaryContainer.copy(alpha = 0.3f), scheme.primaryContainer.copy(alpha = 0.3f))),
disabled = Brush.verticalGradient(listOf(containerLighter.copy(alpha = 0.5f), containerDarker.copy(alpha = 0.5f))),
selected = Brush.verticalGradient(
listOf(
scheme.primaryContainer.copy(alpha = 0.3f),
scheme.primaryContainer.copy(alpha = 0.3f)
)
),
disabled = Brush.verticalGradient(
listOf(
containerLighter.copy(alpha = 0.5f),
containerDarker.copy(alpha = 0.5f)
)
),
),
shape = BaseUITheme.AdvancedInteractionState(
hovered = RoundedCornerShape(8.dp),
@ -730,7 +747,12 @@ fun invertedButtonStyle(): BaseUITheme.ButtonStyle {
highlight = if (isLight) Color.White.copy(alpha = 0.15f) else Color.White.copy(alpha = 0.08f),
)
val pressedColors = BaseUITheme.ButtonColors(
background = Brush.verticalGradient(listOf(scheme.onSurfaceVariant, scheme.onSurfaceVariant)),
background = Brush.verticalGradient(
listOf(
scheme.onSurfaceVariant,
scheme.onSurfaceVariant
)
),
foreground = scheme.surface,
highlight = if (isLight) Color.White.copy(alpha = 0.1f) else Color.White.copy(alpha = 0.05f),
)

23
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/base/Utils.kt Normal file
View File

@ -0,0 +1,23 @@
package dev.krtirtho.spotube.core.ui.base
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.drawWithCache
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
fun Modifier.highlight(color: Color): Modifier =
drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(color, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
drawRect(
brush = highlightBrush,
topLeft = androidx.compose.ui.geometry.Offset.Zero,
size = size,
)
}
}

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

@ -91,6 +91,7 @@ import dev.krtirtho.spotube.core.ui.base.GhostIconButton
import dev.krtirtho.spotube.core.ui.base.GroupIconButton
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
import dev.krtirtho.spotube.core.ui.base.TextField
import dev.krtirtho.spotube.core.ui.base.highlight
import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
import dev.krtirtho.spotube.core.ui.misc.shimmerApply
@ -539,23 +540,13 @@ private fun TrackListRow(
onLongClick = onLongClick,
)
.background(rowBackgroundColor)
.drawWithCache {
val highlightBrush = Brush.verticalGradient(
colors = listOf(highlightColor, Color.Transparent),
startY = 0f,
endY = size.height * 0.5f,
)
onDrawWithContent {
drawContent()
.then(
if (isRowHovered || isSelected || (isCurrentTrack && isCurrentTrackPlaying)) {
drawRect(
brush = highlightBrush,
topLeft = Offset.Zero,
size = size,
Modifier.highlight(highlightColor)
} else {
Modifier
}
)
}
}
}
.clip(MaterialTheme.shapes.small)
.padding(horizontal = 8.dp, vertical = 6.dp)
.padding(end = 6.dp),