mirror of
https://github.com/KRTirtho/spotube.git
synced 2026-08-05 19:59:51 +00:00
Compare commits
No commits in common. "dadc302ef0d3b5ec648426e7065ee4898e21add9" and "4302a27afa1d74d98969bfc52940d22a474d9510" have entirely different histories.
dadc302ef0
...
4302a27afa
@ -20,11 +20,8 @@ package dev.krtirtho.spotube
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.rememberBaseUITheme
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||
@ -103,8 +100,6 @@ fun App(
|
||||
}
|
||||
|
||||
SpotubeTheme(settings = userSettings) {
|
||||
val baseUITheme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides baseUITheme) {
|
||||
AppShell(navigator, navigationState) {
|
||||
Column {
|
||||
NavDisplay(
|
||||
@ -116,5 +111,4 @@ fun App(
|
||||
}
|
||||
content()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,8 +28,8 @@ import androidx.compose.foundation.hoverable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.interaction.collectIsFocusedAsState
|
||||
import androidx.compose.foundation.interaction.collectIsHoveredAsState
|
||||
import androidx.compose.foundation.focusable
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.focusable
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.Row
|
||||
@ -41,6 +41,7 @@ import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.lazy.LazyColumn
|
||||
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.BasicTextField
|
||||
import androidx.compose.foundation.text.KeyboardActions
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
@ -86,55 +87,12 @@ import androidx.compose.ui.window.PopupProperties
|
||||
import dev.krtirtho.spotube.resources.iconsax.Iconsax
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxSearchBroken
|
||||
|
||||
private val AutocompleteTextFieldShape = RoundedCornerShape(14.dp)
|
||||
private val AutocompleteMenuShape = RoundedCornerShape(12.dp)
|
||||
private val AutocompleteTextFieldMinHeight = 44.dp
|
||||
private val AutocompleteMenuDefaultMaxHeight = 300.dp
|
||||
private val AutocompleteMenuDefaultOffset = 4.dp
|
||||
|
||||
private data class ResolvedAutoCompleteTextFieldState(
|
||||
val background: Brush,
|
||||
val highlight: Color,
|
||||
val shape: Shape,
|
||||
val border: BaseUITheme.Border,
|
||||
val shadow: BaseUITheme.Shadow,
|
||||
val foreground: Color,
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun resolveTextFieldState(
|
||||
theme: BaseUITheme.TextFieldTheme,
|
||||
isFocused: Boolean,
|
||||
isHovered: Boolean,
|
||||
): ResolvedAutoCompleteTextFieldState {
|
||||
return when {
|
||||
isFocused -> ResolvedAutoCompleteTextFieldState(
|
||||
theme.background.focused,
|
||||
theme.highlight.focused,
|
||||
theme.shape.focused,
|
||||
theme.border.focused,
|
||||
theme.shadow.focused,
|
||||
theme.foreground.focused
|
||||
)
|
||||
|
||||
isHovered -> ResolvedAutoCompleteTextFieldState(
|
||||
theme.background.hovered,
|
||||
theme.highlight.hovered,
|
||||
theme.shape.hovered,
|
||||
theme.border.hovered,
|
||||
theme.shadow.hovered,
|
||||
theme.foreground.hovered
|
||||
)
|
||||
|
||||
else -> ResolvedAutoCompleteTextFieldState(
|
||||
theme.background.pressed,
|
||||
theme.highlight.pressed,
|
||||
theme.shape.pressed,
|
||||
theme.border.pressed,
|
||||
theme.shadow.pressed,
|
||||
theme.foreground.pressed
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun <T> AutocompleteTextField(
|
||||
value: String,
|
||||
@ -157,18 +115,16 @@ fun <T> AutocompleteTextField(
|
||||
visualTransformation: VisualTransformation = VisualTransformation.None,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
textStyle: TextStyle = TextStyle.Default,
|
||||
cursorBrush: Color? = null,
|
||||
cursorBrush: Color = MaterialTheme.colorScheme.primary,
|
||||
onKeyEvent: ((KeyEvent) -> Boolean)? = null,
|
||||
menuMaxHeight: Dp = AutocompleteMenuDefaultMaxHeight,
|
||||
menuOffset: Dp = AutocompleteMenuDefaultOffset,
|
||||
textFieldTheme: BaseUITheme.TextFieldTheme? = null,
|
||||
menuTheme: BaseUITheme.AutoCompleteMenuTheme? = null,
|
||||
menuShape: Shape = AutocompleteMenuShape,
|
||||
menuShadowElevation: Dp = 8.dp,
|
||||
menuContainerColor: Color = MaterialTheme.colorScheme.surfaceContainerHigh,
|
||||
) {
|
||||
val density = LocalDensity.current
|
||||
val baseTextFieldTheme = LocalBaseUITheme.current.textField
|
||||
val baseMenuTheme = LocalBaseUITheme.current.autoCompleteMenuTheme
|
||||
val resolvedTextFieldTheme = textFieldTheme ?: baseTextFieldTheme
|
||||
val resolvedMenuTheme = menuTheme ?: baseMenuTheme
|
||||
val colors = rememberButtonColors()
|
||||
val isFocused by interactionSource.collectIsFocusedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
|
||||
@ -218,21 +174,19 @@ fun <T> AutocompleteTextField(
|
||||
)
|
||||
}
|
||||
|
||||
val fieldState = resolveTextFieldState(resolvedTextFieldTheme, isFocused, isHovered)
|
||||
|
||||
val resolvedBorder = if (isError) {
|
||||
BaseUITheme.Border(MaterialTheme.colorScheme.error, fieldState.border.width)
|
||||
} else {
|
||||
fieldState.border
|
||||
val gradient = outlinedGradient(colors, false)
|
||||
val border = when {
|
||||
isError -> MaterialTheme.colorScheme.error
|
||||
isFocused -> MaterialTheme.colorScheme.primary
|
||||
isHovered -> colors.border.copy(alpha = 0.85f)
|
||||
else -> colors.border
|
||||
}
|
||||
|
||||
val contentColor = when {
|
||||
!enabled -> fieldState.foreground.copy(alpha = 0.38f)
|
||||
else -> fieldState.foreground
|
||||
!enabled -> colors.onContainer.copy(alpha = 0.38f)
|
||||
else -> colors.onContainer
|
||||
}
|
||||
|
||||
val cursor = cursorBrush?.let { SolidColor(it) } ?: resolvedTextFieldTheme.cursor
|
||||
|
||||
fun navigate(delta: Int) {
|
||||
if (items.isEmpty()) return
|
||||
selectedIndex = ((selectedIndex + delta) % items.size + items.size) % items.size
|
||||
@ -253,25 +207,13 @@ fun <T> AutocompleteTextField(
|
||||
.fillMaxWidth()
|
||||
.onSizeChanged { textFieldSize = it }
|
||||
.defaultMinSize(minHeight = AutocompleteTextFieldMinHeight)
|
||||
.then(
|
||||
if (fieldState.shadow.elevation > 0.dp) {
|
||||
Modifier.shadow(
|
||||
elevation = fieldState.shadow.elevation,
|
||||
shape = fieldState.shape,
|
||||
ambientColor = fieldState.shadow.ambientColor,
|
||||
spotColor = fieldState.shadow.spotColor,
|
||||
)
|
||||
} else Modifier
|
||||
)
|
||||
.clip(fieldState.shape)
|
||||
.background(fieldState.background, fieldState.shape)
|
||||
.border(
|
||||
BorderStroke(resolvedBorder.width, resolvedBorder.color),
|
||||
fieldState.shape
|
||||
)
|
||||
.then(textFieldShadow(AutocompleteTextFieldShape, isFocused, colors))
|
||||
.clip(AutocompleteTextFieldShape)
|
||||
.background(gradient, AutocompleteTextFieldShape)
|
||||
.border(BorderStroke(.5.dp, border), AutocompleteTextFieldShape)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(fieldState.highlight, Color.Transparent),
|
||||
colors = listOf(colors.highlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -284,7 +226,7 @@ fun <T> AutocompleteTextField(
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(resolvedTextFieldTheme.padding),
|
||||
.padding(horizontal = 14.dp, vertical = 10.dp),
|
||||
) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
@ -352,7 +294,7 @@ fun <T> AutocompleteTextField(
|
||||
enabled = enabled,
|
||||
readOnly = readOnly,
|
||||
textStyle = textStyle.copy(color = contentColor),
|
||||
cursorBrush = cursor,
|
||||
cursorBrush = SolidColor(cursorBrush),
|
||||
keyboardOptions = keyboardOptions,
|
||||
keyboardActions = wrappedKeyboardActions,
|
||||
singleLine = singleLine,
|
||||
@ -398,9 +340,9 @@ fun <T> AutocompleteTextField(
|
||||
modifier = Modifier
|
||||
.width(textFieldWidthDp)
|
||||
.heightIn(max = menuMaxHeight)
|
||||
.shadow(resolvedMenuTheme.shadowElevation, resolvedMenuTheme.shape)
|
||||
.background(resolvedMenuTheme.background, resolvedMenuTheme.shape)
|
||||
.clip(resolvedMenuTheme.shape)
|
||||
.shadow(menuShadowElevation, menuShape)
|
||||
.background(menuContainerColor, menuShape)
|
||||
.clip(menuShape)
|
||||
.focusRequester(popupFocusRequester)
|
||||
.focusable()
|
||||
.onFocusChanged { state ->
|
||||
@ -470,8 +412,6 @@ fun <T> AutocompleteTextField(
|
||||
@Composable
|
||||
private fun AutocompleteTextFieldPreview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
androidx.compose.material3.Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -538,5 +478,4 @@ private fun AutocompleteTextFieldPreview() {
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,6 +44,7 @@ import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.ripple
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.Immutable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
@ -53,8 +54,8 @@ import androidx.compose.ui.draw.drawWithCache
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
import androidx.compose.ui.graphics.luminance
|
||||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
@ -70,45 +71,163 @@ import dev.krtirtho.spotube.resources.iconsax.IconsaxNext
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxShare
|
||||
import dev.krtirtho.spotube.resources.iconsax.User
|
||||
|
||||
private val ButtonShape = RoundedCornerShape(14.dp)
|
||||
private val GroupShape = RoundedCornerShape(14.dp)
|
||||
private val BadgeShape = RoundedCornerShape(11.dp)
|
||||
private val ButtonMinHeight = 40.dp
|
||||
private val SquareButtonSize = 40.dp
|
||||
|
||||
private data class ResolvedButtonState(
|
||||
val colors: BaseUITheme.ButtonColors,
|
||||
val shape: Shape,
|
||||
val shadow: BaseUITheme.Shadow,
|
||||
val border: BaseUITheme.Border,
|
||||
val padding: PaddingValues,
|
||||
@Immutable
|
||||
data class ButtonColors(
|
||||
val containerLighter: Color,
|
||||
val containerDarker: Color,
|
||||
val containerPressed: Color,
|
||||
val onContainer: Color,
|
||||
val border: Color,
|
||||
val accent: Color,
|
||||
val onAccent: Color,
|
||||
val secondaryContainer: Color,
|
||||
val onSecondaryContainer: Color,
|
||||
val secondaryContainerPressed: Color,
|
||||
val secondaryHighlight: Color,
|
||||
val shadow: Color,
|
||||
val highlight: Color,
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun resolveButtonState(
|
||||
style: BaseUITheme.ButtonStyle,
|
||||
isPressed: Boolean,
|
||||
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)
|
||||
fun rememberButtonColors(): ButtonColors {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
val isLight = scheme.surface.luminance() > 0.5f
|
||||
|
||||
return remember(scheme) {
|
||||
ButtonColors(
|
||||
containerLighter = if (isLight) {
|
||||
Color.White
|
||||
} else {
|
||||
scheme.surfaceContainerHigh
|
||||
},
|
||||
containerDarker = if (isLight) {
|
||||
Color(0xFFF2F2F4)
|
||||
} else {
|
||||
scheme.surfaceContainer
|
||||
},
|
||||
containerPressed = if (isLight) {
|
||||
Color(0xFFE0E0E3)
|
||||
} else {
|
||||
scheme.surfaceContainerHighest
|
||||
},
|
||||
onContainer = scheme.onSurface,
|
||||
border = scheme.outlineVariant,
|
||||
accent = scheme.primary,
|
||||
onAccent = scheme.onPrimary,
|
||||
secondaryContainer = scheme.secondaryContainer,
|
||||
onSecondaryContainer = scheme.onSecondaryContainer,
|
||||
secondaryContainerPressed = scheme.secondaryContainer.copy(
|
||||
alpha = if (isLight) 0.85f else 0.92f
|
||||
),
|
||||
secondaryHighlight = if (isLight) {
|
||||
Color.White.copy(alpha = 0.5f)
|
||||
} else {
|
||||
Color.White.copy(alpha = 0.08f)
|
||||
},
|
||||
shadow = scheme.onSurface.copy(alpha = 0.12f),
|
||||
highlight = if (isLight) {
|
||||
Color.White.copy(alpha = 0.9f)
|
||||
} else {
|
||||
Color.White.copy(alpha = 0.06f)
|
||||
},
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
private fun Modifier.applyShadow(
|
||||
shadow: BaseUITheme.Shadow,
|
||||
shape: Shape,
|
||||
@Composable
|
||||
fun outlinedGradient(colors: ButtonColors, pressed: Boolean): Brush {
|
||||
val top = if (pressed) colors.containerPressed else colors.containerLighter
|
||||
val bottom = if (pressed) colors.containerPressed else colors.containerDarker
|
||||
return remember(colors, pressed) { Brush.verticalGradient(listOf(top, bottom)) }
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun primaryGradient(colors: ButtonColors, pressed: Boolean): Brush {
|
||||
val alpha = if (pressed) 0.85f else 1f
|
||||
return remember(colors, pressed) {
|
||||
Brush.verticalGradient(
|
||||
listOf(colors.accent.copy(alpha = alpha), colors.accent)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun secondaryGradient(colors: ButtonColors, pressed: Boolean): Brush {
|
||||
val top = if (pressed) colors.secondaryContainerPressed else colors.secondaryContainer
|
||||
val bottom = if (pressed) {
|
||||
colors.secondaryContainerPressed
|
||||
} else {
|
||||
colors.secondaryContainer.copy(
|
||||
alpha = if (top.luminance() > 0.5f) 0.92f else 1f
|
||||
)
|
||||
}
|
||||
return remember(colors, pressed) { Brush.verticalGradient(listOf(top, bottom)) }
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun badgeGradient(colors: ButtonColors): Brush = remember(colors) {
|
||||
Brush.verticalGradient(listOf(colors.containerLighter, colors.containerDarker))
|
||||
}
|
||||
|
||||
@Composable
|
||||
internal fun buttonShadow(
|
||||
shape: androidx.compose.ui.graphics.Shape,
|
||||
pressed: Boolean,
|
||||
primary: Boolean,
|
||||
colors: ButtonColors,
|
||||
hovered: Boolean = false,
|
||||
): Modifier {
|
||||
return if (shadow.elevation > 0.dp) {
|
||||
this.shadow(
|
||||
elevation = shadow.elevation,
|
||||
shape = shape,
|
||||
ambientColor = shadow.ambientColor,
|
||||
spotColor = shadow.spotColor,
|
||||
val elevation = when {
|
||||
pressed -> 1.dp
|
||||
hovered -> 9.dp
|
||||
else -> 6.dp
|
||||
}
|
||||
val ambient = if (primary) {
|
||||
colors.accent.copy(
|
||||
alpha = when {
|
||||
pressed -> 0.2f
|
||||
hovered -> 0.45f
|
||||
else -> 0.35f
|
||||
}
|
||||
)
|
||||
} else {
|
||||
this
|
||||
colors.shadow.copy(
|
||||
alpha = when {
|
||||
pressed -> 0.08f
|
||||
hovered -> 0.22f
|
||||
else -> 0.15f
|
||||
}
|
||||
)
|
||||
}
|
||||
val spot = if (primary) {
|
||||
colors.accent.copy(
|
||||
alpha = when {
|
||||
pressed -> 0.25f
|
||||
hovered -> 0.5f
|
||||
else -> 0.4f
|
||||
}
|
||||
)
|
||||
} else {
|
||||
colors.shadow.copy(
|
||||
alpha = when {
|
||||
pressed -> 0.1f
|
||||
hovered -> 0.26f
|
||||
else -> 0.18f
|
||||
}
|
||||
)
|
||||
}
|
||||
return Modifier.shadow(
|
||||
elevation = elevation,
|
||||
shape = shape,
|
||||
ambientColor = ambient,
|
||||
spotColor = spot,
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
@ -116,16 +235,18 @@ fun OutlineButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
hoverOnly: Boolean = false,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveButtonState(style, isPressed, isHovered)
|
||||
val gradient = outlinedGradient(colors, isPressed)
|
||||
val border = colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
|
||||
Box(
|
||||
@ -134,12 +255,18 @@ 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 buttonShadow(
|
||||
shape,
|
||||
isPressed,
|
||||
primary = false,
|
||||
colors,
|
||||
hovered = isHovered
|
||||
)
|
||||
.clip(state.shape)
|
||||
)
|
||||
.clip(shape)
|
||||
.then(
|
||||
if (hoverOnly && !isHovered) Modifier else Modifier.background(state.colors.background, state.shape)
|
||||
.border(BorderStroke(state.border.width, state.border.color), state.shape)
|
||||
if (hoverOnly && !isHovered) Modifier else Modifier.background(gradient, shape)
|
||||
.border(BorderStroke(0.5.dp, border), shape)
|
||||
)
|
||||
.clickable(
|
||||
enabled = enabled,
|
||||
@ -149,7 +276,7 @@ fun OutlineButton(
|
||||
)
|
||||
.then(if (hoverOnly && !isHovered) Modifier else Modifier.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(state.colors.highlight, Color.Transparent),
|
||||
colors = listOf(colors.highlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -162,17 +289,13 @@ fun OutlineButton(
|
||||
)
|
||||
}
|
||||
})
|
||||
.padding(state.padding),
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
content = {
|
||||
CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
|
||||
content()
|
||||
}
|
||||
},
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -182,15 +305,16 @@ fun PrimaryButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.primary
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveButtonState(style, isPressed, isHovered)
|
||||
val gradient = primaryGradient(colors, isPressed)
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
|
||||
Box(
|
||||
@ -198,10 +322,10 @@ fun PrimaryButton(
|
||||
.defaultMinSize(minHeight = ButtonMinHeight)
|
||||
.hoverable(interactionSource = interactionSource, enabled = enabled)
|
||||
.graphicsLayer { translationY = lift.toPx() }
|
||||
.applyShadow(state.shadow, state.shape)
|
||||
.clip(state.shape)
|
||||
.background(state.colors.background, state.shape)
|
||||
.border(BorderStroke(state.border.width, state.border.color), state.shape)
|
||||
.then(buttonShadow(shape, isPressed, primary = true, colors, hovered = isHovered))
|
||||
.clip(shape)
|
||||
.background(gradient, shape)
|
||||
.border(BorderStroke(0.5.dp, colors.accent), shape)
|
||||
.clickable(
|
||||
enabled = enabled,
|
||||
interactionSource = interactionSource,
|
||||
@ -210,7 +334,7 @@ fun PrimaryButton(
|
||||
)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(state.colors.highlight, Color.Transparent),
|
||||
colors = listOf(Color.White.copy(alpha = 0.25f), Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -223,10 +347,10 @@ fun PrimaryButton(
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(state.padding),
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
|
||||
CompositionLocalProvider(LocalContentColor provides colors.onAccent) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
@ -241,15 +365,16 @@ fun SecondaryButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.secondary
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveButtonState(style, isPressed, isHovered)
|
||||
val gradient = secondaryGradient(colors, isPressed)
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
|
||||
Box(
|
||||
@ -257,10 +382,13 @@ fun SecondaryButton(
|
||||
.defaultMinSize(minHeight = ButtonMinHeight)
|
||||
.hoverable(interactionSource = interactionSource, enabled = enabled)
|
||||
.graphicsLayer { translationY = lift.toPx() }
|
||||
.applyShadow(state.shadow, state.shape)
|
||||
.clip(state.shape)
|
||||
.background(state.colors.background, state.shape)
|
||||
.border(BorderStroke(state.border.width, state.border.color), state.shape)
|
||||
.then(buttonShadow(shape, isPressed, primary = false, colors, hovered = isHovered))
|
||||
.clip(shape)
|
||||
.background(gradient, shape)
|
||||
.border(
|
||||
BorderStroke(0.5.dp, colors.secondaryContainer.copy(alpha = 0.5f)),
|
||||
shape,
|
||||
)
|
||||
.clickable(
|
||||
enabled = enabled,
|
||||
interactionSource = interactionSource,
|
||||
@ -269,7 +397,7 @@ fun SecondaryButton(
|
||||
)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(state.colors.highlight, Color.Transparent),
|
||||
colors = listOf(colors.secondaryHighlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -282,10 +410,10 @@ fun SecondaryButton(
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(state.padding),
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
CompositionLocalProvider(LocalContentColor provides state.colors.foreground) {
|
||||
CompositionLocalProvider(LocalContentColor provides colors.onSecondaryContainer) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
@ -300,60 +428,40 @@ fun IconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.iconButtons.outline
|
||||
OutlineButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = style,
|
||||
shape = shape,
|
||||
contentPadding = PaddingValues(8.dp),
|
||||
colors = colors,
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
|
||||
fun GhostIconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val outlineStyle = baseTheme.iconButtons.outline
|
||||
val ghostStyle = theme ?: BaseUITheme.ButtonStyle(
|
||||
colors = BaseUITheme.InteractionState(
|
||||
hovered = outlineStyle.colors.hovered,
|
||||
pressed = outlineStyle.colors.pressed,
|
||||
focused = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)),
|
||||
foreground = outlineStyle.colors.focused.foreground,
|
||||
highlight = outlineStyle.colors.focused.highlight,
|
||||
),
|
||||
),
|
||||
shape = outlineStyle.shape,
|
||||
shadow = BaseUITheme.InteractionState(
|
||||
hovered = outlineStyle.shadow.hovered,
|
||||
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,
|
||||
)
|
||||
OutlineButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
shape = shape,
|
||||
contentPadding = PaddingValues(8.dp),
|
||||
hoverOnly = true,
|
||||
theme = ghostStyle,
|
||||
colors = colors,
|
||||
) {
|
||||
content()
|
||||
}
|
||||
@ -364,16 +472,17 @@ fun PrimaryIconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.iconButtons.primary
|
||||
PrimaryButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = style,
|
||||
shape = shape,
|
||||
contentPadding = PaddingValues(8.dp),
|
||||
colors = colors,
|
||||
) {
|
||||
content()
|
||||
}
|
||||
@ -384,16 +493,17 @@ fun SecondaryIconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.iconButtons.secondary
|
||||
SecondaryButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = style,
|
||||
shape = shape,
|
||||
contentPadding = PaddingValues(8.dp),
|
||||
colors = colors,
|
||||
) {
|
||||
content()
|
||||
}
|
||||
@ -403,17 +513,15 @@ fun SecondaryIconButton(
|
||||
fun ButtonBadge(
|
||||
count: Int,
|
||||
modifier: Modifier = Modifier,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
colors: ButtonColors? = null,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val state = resolveButtonState(style, isPressed = false, isHovered = false)
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
Box(
|
||||
modifier = modifier
|
||||
.heightIn(min = 22.dp)
|
||||
.defaultMinSize(minWidth = 22.dp)
|
||||
.background(state.colors.background, BadgeShape)
|
||||
.border(1.dp, state.border.color, BadgeShape)
|
||||
.background(badgeGradient(colors), BadgeShape)
|
||||
.border(1.dp, colors.border, BadgeShape)
|
||||
.padding(horizontal = 7.dp),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
@ -423,7 +531,7 @@ fun ButtonBadge(
|
||||
fontWeight = androidx.compose.ui.text.font.FontWeight.SemiBold,
|
||||
maxLines = 1,
|
||||
softWrap = false,
|
||||
color = state.colors.foreground.copy(alpha = 0.7f),
|
||||
color = colors.onContainer.copy(alpha = 0.7f),
|
||||
)
|
||||
}
|
||||
}
|
||||
@ -433,19 +541,18 @@ fun GroupButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 11.dp),
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveButtonState(style, isPressed, isHovered)
|
||||
val overlay = when {
|
||||
isPressed -> state.colors.background
|
||||
isHovered -> state.colors.background
|
||||
else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
|
||||
isPressed -> colors.containerPressed
|
||||
isHovered -> colors.containerPressed.copy(alpha = 0.5f)
|
||||
else -> Color.Transparent
|
||||
}
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
|
||||
@ -461,7 +568,7 @@ fun GroupButton(
|
||||
indication = ripple(),
|
||||
onClick = onClick,
|
||||
)
|
||||
.padding(state.padding),
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Row(
|
||||
@ -477,19 +584,17 @@ fun GroupIconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveButtonState(style, isPressed, isHovered)
|
||||
val overlay = when {
|
||||
isPressed -> state.colors.background
|
||||
isHovered -> state.colors.background
|
||||
else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
|
||||
isPressed -> colors.containerPressed
|
||||
isHovered -> colors.containerPressed.copy(alpha = 0.5f)
|
||||
else -> Color.Transparent
|
||||
}
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
|
||||
@ -514,23 +619,28 @@ fun GroupIconButton(
|
||||
@Composable
|
||||
fun ButtonGroup(
|
||||
modifier: Modifier = Modifier,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val state = resolveButtonState(style, isPressed = false, isHovered = false)
|
||||
val groupShape = state.shape
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
Surface(
|
||||
modifier = modifier
|
||||
.defaultMinSize(minHeight = ButtonMinHeight)
|
||||
.applyShadow(state.shadow, groupShape),
|
||||
shape = groupShape,
|
||||
.then(
|
||||
buttonShadow(
|
||||
GroupShape,
|
||||
pressed = false,
|
||||
primary = false,
|
||||
colors,
|
||||
hovered = false
|
||||
)
|
||||
),
|
||||
shape = GroupShape,
|
||||
color = Color.Transparent,
|
||||
border = BorderStroke(state.border.width, state.border.color),
|
||||
border = BorderStroke(0.5.dp, colors.border),
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier.background(state.colors.background, groupShape),
|
||||
modifier = Modifier.background(outlinedGradient(colors, false), GroupShape),
|
||||
) {
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
content()
|
||||
@ -541,16 +651,14 @@ fun ButtonGroup(
|
||||
|
||||
@Composable
|
||||
fun ButtonGroupDivider(
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
colors: ButtonColors? = null,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current
|
||||
val style = theme ?: baseTheme.buttons.outline
|
||||
val state = resolveButtonState(style, isPressed = false, isHovered = false)
|
||||
val colors = colors ?: rememberButtonColors()
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.width(1.dp)
|
||||
.heightIn(min = 20.dp)
|
||||
.background(state.border.color),
|
||||
.background(colors.border),
|
||||
)
|
||||
}
|
||||
|
||||
@ -558,8 +666,6 @@ fun ButtonGroupDivider(
|
||||
@Composable
|
||||
private fun ButtonsRow1Preview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -604,15 +710,12 @@ private fun ButtonsRow1Preview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun ButtonsRow2Preview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -668,15 +771,12 @@ private fun ButtonsRow2Preview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun ButtonsRow3Preview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -715,15 +815,12 @@ private fun ButtonsRow3Preview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun ButtonsRow4Preview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -760,15 +857,12 @@ private fun ButtonsRow4Preview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Preview(showBackground = true)
|
||||
@Composable
|
||||
private fun ButtonStylesPreview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -794,7 +888,6 @@ private fun ButtonStylesPreview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
enum class VariableIconButtonVariant {
|
||||
@ -810,7 +903,8 @@ fun VariableIconButton(
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ButtonStyle? = null,
|
||||
shape: androidx.compose.ui.graphics.Shape = ButtonShape,
|
||||
colors: ButtonColors? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
when (variant) {
|
||||
@ -818,7 +912,8 @@ fun VariableIconButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = theme,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
content = content,
|
||||
)
|
||||
|
||||
@ -826,7 +921,8 @@ fun VariableIconButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = theme,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
content = content,
|
||||
)
|
||||
|
||||
@ -834,7 +930,8 @@ fun VariableIconButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = theme,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
content = content,
|
||||
)
|
||||
|
||||
@ -842,7 +939,8 @@ fun VariableIconButton(
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = theme,
|
||||
shape = shape,
|
||||
colors = colors,
|
||||
content = content,
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,81 +0,0 @@
|
||||
/*
|
||||
* Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
package dev.krtirtho.spotube.core.ui.base
|
||||
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.unit.dp
|
||||
|
||||
@Composable
|
||||
fun Card(
|
||||
modifier: Modifier = Modifier,
|
||||
theme: BaseUITheme.CardTheme? = null,
|
||||
content: @Composable () -> Unit,
|
||||
) {
|
||||
val cardTheme = theme ?: LocalBaseUITheme.current.card
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.then(
|
||||
if (cardTheme.shadow.elevation > 0.dp) {
|
||||
Modifier.shadow(
|
||||
elevation = cardTheme.shadow.elevation,
|
||||
shape = cardTheme.shape,
|
||||
ambientColor = cardTheme.shadow.ambientColor,
|
||||
spotColor = cardTheme.shadow.spotColor,
|
||||
)
|
||||
} else Modifier
|
||||
)
|
||||
.clip(cardTheme.shape)
|
||||
.background(cardTheme.background, cardTheme.shape)
|
||||
.border(BorderStroke(cardTheme.border.width, cardTheme.border.color), cardTheme.shape)
|
||||
.padding(cardTheme.padding),
|
||||
) {
|
||||
content()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
@androidx.compose.ui.tooling.preview.Preview
|
||||
private fun CardPreview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
) {
|
||||
Card {
|
||||
Box(modifier = Modifier.padding(16.dp))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,6 @@ import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.ripple
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.ui.Alignment
|
||||
@ -51,7 +50,6 @@ import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Path
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.StrokeCap
|
||||
import androidx.compose.ui.graphics.StrokeJoin
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
@ -67,28 +65,9 @@ enum class CheckBoxState {
|
||||
CLEAR;
|
||||
}
|
||||
|
||||
private val CheckBoxShape = RoundedCornerShape(6.dp)
|
||||
private val CheckBoxSize = 22.dp
|
||||
|
||||
private data class ResolvedCheckBoxState(
|
||||
val colors: BaseUITheme.ButtonColors,
|
||||
val shape: Shape,
|
||||
val shadow: BaseUITheme.Shadow,
|
||||
val border: BaseUITheme.Border,
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun resolveCheckBoxState(
|
||||
style: BaseUITheme.ButtonStyle,
|
||||
isPressed: Boolean,
|
||||
isHovered: Boolean,
|
||||
): ResolvedCheckBoxState {
|
||||
return when {
|
||||
isPressed -> ResolvedCheckBoxState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed)
|
||||
isHovered -> ResolvedCheckBoxState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered)
|
||||
else -> ResolvedCheckBoxState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused)
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun CheckBox(
|
||||
state: CheckBoxState = CheckBoxState.UNSELECTED,
|
||||
@ -96,25 +75,69 @@ fun CheckBox(
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
interactionSource: MutableInteractionSource? = null,
|
||||
theme: BaseUITheme.CheckBoxTheme? = null,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current.checkBox
|
||||
val checkBoxTheme = theme ?: baseTheme
|
||||
val colors = rememberButtonColors()
|
||||
val source = interactionSource ?: remember { MutableInteractionSource() }
|
||||
val isPressed by source.collectIsPressedAsState()
|
||||
val isHovered by source.collectIsHoveredAsState()
|
||||
val lift = if (isHovered && !isPressed && onClick != null) (-1).dp else 0.dp
|
||||
|
||||
val isSelected = state == CheckBoxState.SELECTED
|
||||
val isIndeterminate = state == CheckBoxState.INDETERMINATE
|
||||
val isFilled = isSelected || isIndeterminate
|
||||
|
||||
val style = if (isFilled) checkBoxTheme.selected else checkBoxTheme.unselected
|
||||
val resolved = resolveCheckBoxState(style, isPressed, isHovered)
|
||||
val lift = if (isHovered && !isPressed && onClick != null) (-1).dp else 0.dp
|
||||
|
||||
val backgroundBrush = if (isFilled) {
|
||||
primaryGradient(colors, isPressed)
|
||||
} else {
|
||||
outlinedGradient(colors, false)
|
||||
}
|
||||
val borderColor = when {
|
||||
!enabled -> resolved.colors.foreground.copy(alpha = 0.38f)
|
||||
else -> resolved.border.color
|
||||
!enabled -> colors.onContainer.copy(alpha = 0.38f)
|
||||
isFilled -> colors.accent
|
||||
else -> colors.border
|
||||
}
|
||||
val borderWidth = 0.5.dp
|
||||
|
||||
val shadowElevation = when {
|
||||
isPressed -> 1.dp
|
||||
isFilled && isHovered -> 8.dp
|
||||
isFilled -> 6.dp
|
||||
isHovered -> 5.dp
|
||||
else -> 3.dp
|
||||
}
|
||||
val shadowAmbient = if (isFilled) {
|
||||
colors.accent.copy(
|
||||
alpha = when {
|
||||
isPressed -> 0.2f
|
||||
isHovered -> 0.4f
|
||||
else -> 0.3f
|
||||
}
|
||||
)
|
||||
} else {
|
||||
colors.shadow.copy(
|
||||
alpha = when {
|
||||
isPressed -> 0.08f
|
||||
isHovered -> 0.2f
|
||||
else -> 0.15f
|
||||
}
|
||||
)
|
||||
}
|
||||
val shadowSpot = if (isFilled) {
|
||||
colors.accent.copy(
|
||||
alpha = when {
|
||||
isPressed -> 0.25f
|
||||
isHovered -> 0.45f
|
||||
else -> 0.35f
|
||||
}
|
||||
)
|
||||
} else {
|
||||
colors.shadow.copy(
|
||||
alpha = when {
|
||||
isPressed -> 0.1f
|
||||
isHovered -> 0.24f
|
||||
else -> 0.18f
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
val checkProgress by animateFloatAsState(
|
||||
@ -132,29 +155,28 @@ fun CheckBox(
|
||||
modifier = modifier
|
||||
.size(CheckBoxSize)
|
||||
.graphicsLayer { translationY = lift.toPx() }
|
||||
.then(
|
||||
if (resolved.shadow.elevation > 0.dp) {
|
||||
Modifier.shadow(
|
||||
elevation = resolved.shadow.elevation,
|
||||
shape = resolved.shape,
|
||||
ambientColor = resolved.shadow.ambientColor,
|
||||
spotColor = resolved.shadow.spotColor,
|
||||
.shadow(
|
||||
elevation = shadowElevation,
|
||||
shape = CheckBoxShape,
|
||||
ambientColor = shadowAmbient,
|
||||
spotColor = shadowSpot,
|
||||
)
|
||||
} else Modifier
|
||||
)
|
||||
.clip(resolved.shape)
|
||||
.background(resolved.colors.background, resolved.shape)
|
||||
.border(BorderStroke(0.5.dp, borderColor), resolved.shape)
|
||||
.clip(CheckBoxShape)
|
||||
.background(backgroundBrush, CheckBoxShape)
|
||||
.border(BorderStroke(borderWidth, borderColor), CheckBoxShape)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(resolved.colors.highlight, Color.Transparent),
|
||||
val highlight = Brush.verticalGradient(
|
||||
colors = listOf(
|
||||
if (isFilled) Color.White.copy(alpha = 0.25f) else colors.highlight,
|
||||
Color.Transparent,
|
||||
),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
onDrawWithContent {
|
||||
drawContent()
|
||||
drawRect(
|
||||
brush = highlightBrush,
|
||||
brush = highlight,
|
||||
topLeft = Offset.Zero,
|
||||
size = size,
|
||||
)
|
||||
@ -193,7 +215,7 @@ fun CheckBox(
|
||||
}
|
||||
drawPath(
|
||||
path = path,
|
||||
color = checkBoxTheme.checkmarkColor,
|
||||
color = colors.onAccent,
|
||||
style = Stroke(
|
||||
width = stroke,
|
||||
cap = StrokeCap.Round,
|
||||
@ -211,8 +233,8 @@ fun CheckBox(
|
||||
.background(
|
||||
brush = Brush.horizontalGradient(
|
||||
colors = listOf(
|
||||
checkBoxTheme.checkmarkColor,
|
||||
checkBoxTheme.checkmarkColor.copy(alpha = 0.92f),
|
||||
colors.onAccent,
|
||||
colors.onAccent.copy(alpha = 0.92f),
|
||||
)
|
||||
),
|
||||
),
|
||||
@ -225,8 +247,6 @@ fun CheckBox(
|
||||
@Composable
|
||||
fun CheckBoxPreview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -263,5 +283,4 @@ fun CheckBoxPreview() {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -27,10 +27,12 @@ import androidx.compose.foundation.interaction.collectIsHoveredAsState
|
||||
import androidx.compose.foundation.interaction.collectIsPressedAsState
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.RowScope
|
||||
import androidx.compose.foundation.layout.defaultMinSize
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.LocalContentColor
|
||||
import androidx.compose.material3.LocalTextStyle
|
||||
import androidx.compose.material3.Text
|
||||
@ -43,78 +45,57 @@ import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.drawWithCache
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
||||
private val ChipTabShape = RoundedCornerShape(10.dp)
|
||||
private val ChipTabMinHeight = 36.dp
|
||||
|
||||
private data class ResolvedChipState(
|
||||
val colors: BaseUITheme.ButtonColors,
|
||||
val shape: Shape,
|
||||
val shadow: BaseUITheme.Shadow,
|
||||
val border: BaseUITheme.Border,
|
||||
val padding: androidx.compose.foundation.layout.PaddingValues,
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun resolveChipState(
|
||||
style: BaseUITheme.ButtonStyle,
|
||||
isPressed: Boolean,
|
||||
isHovered: Boolean,
|
||||
): ResolvedChipState {
|
||||
return when {
|
||||
isPressed -> ResolvedChipState(style.colors.pressed, style.shape.pressed, style.shadow.pressed, style.border.pressed, style.padding.pressed)
|
||||
isHovered -> ResolvedChipState(style.colors.hovered, style.shape.hovered, style.shadow.hovered, style.border.hovered, style.padding.hovered)
|
||||
else -> ResolvedChipState(style.colors.focused, style.shape.focused, style.shadow.focused, style.border.focused, style.padding.focused)
|
||||
}
|
||||
}
|
||||
|
||||
private fun Modifier.applyChipShadow(
|
||||
shadow: BaseUITheme.Shadow,
|
||||
shape: Shape,
|
||||
): Modifier {
|
||||
return if (shadow.elevation > 0.dp) {
|
||||
this.shadow(
|
||||
elevation = shadow.elevation,
|
||||
shape = shape,
|
||||
ambientColor = shadow.ambientColor,
|
||||
spotColor = shadow.spotColor,
|
||||
)
|
||||
} else {
|
||||
this
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun ChipTab(
|
||||
selected: Boolean,
|
||||
onClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
theme: BaseUITheme.ChipTabTheme? = null,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 14.dp, vertical = 4.dp),
|
||||
content: @Composable RowScope.() -> Unit,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current.chipTab
|
||||
val chipTheme = theme ?: baseTheme
|
||||
val style = if (selected) chipTheme.selected else chipTheme.unselected
|
||||
val colors = rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val state = resolveChipState(style, isPressed, isHovered)
|
||||
val gradient = if (selected) {
|
||||
primaryGradient(colors, isPressed)
|
||||
} else {
|
||||
outlinedGradient(colors, isPressed)
|
||||
}
|
||||
val borderColor = if (selected) {
|
||||
colors.accent
|
||||
} else {
|
||||
colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
|
||||
}
|
||||
val contentColor = if (selected) colors.onAccent else colors.onContainer
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.defaultMinSize(minHeight = ChipTabMinHeight)
|
||||
.hoverable(interactionSource = interactionSource, enabled = enabled)
|
||||
.applyChipShadow(state.shadow, state.shape)
|
||||
.clip(state.shape)
|
||||
.background(state.colors.background, state.shape)
|
||||
.border(BorderStroke(state.border.width, state.border.color), state.shape)
|
||||
.then(
|
||||
buttonShadow(
|
||||
shape = ChipTabShape,
|
||||
pressed = isPressed,
|
||||
primary = selected,
|
||||
colors = colors,
|
||||
hovered = isHovered,
|
||||
)
|
||||
)
|
||||
.clip(ChipTabShape)
|
||||
.background(gradient, ChipTabShape)
|
||||
.border(BorderStroke(0.5.dp, borderColor), ChipTabShape)
|
||||
.clickable(
|
||||
enabled = enabled,
|
||||
interactionSource = interactionSource,
|
||||
@ -122,8 +103,13 @@ fun ChipTab(
|
||||
onClick = onClick,
|
||||
)
|
||||
.drawWithCache {
|
||||
val highlight = if (selected) {
|
||||
Color.White.copy(alpha = 0.25f)
|
||||
} else {
|
||||
colors.highlight
|
||||
}
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(state.colors.highlight, Color.Transparent),
|
||||
colors = listOf(highlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -136,11 +122,11 @@ fun ChipTab(
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(state.padding),
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
CompositionLocalProvider(
|
||||
LocalContentColor provides state.colors.foreground,
|
||||
LocalContentColor provides contentColor,
|
||||
LocalTextStyle provides LocalTextStyle.current.copy(
|
||||
fontWeight = FontWeight.SemiBold,
|
||||
fontSize = 14.sp,
|
||||
@ -163,14 +149,14 @@ fun ChipTab(
|
||||
modifier: Modifier = Modifier,
|
||||
enabled: Boolean = true,
|
||||
leadingIcon: @Composable (() -> Unit)? = null,
|
||||
theme: BaseUITheme.ChipTabTheme? = null,
|
||||
contentPadding: PaddingValues = PaddingValues(horizontal = 16.dp, vertical = 8.dp),
|
||||
) {
|
||||
ChipTab(
|
||||
selected = selected,
|
||||
onClick = onClick,
|
||||
modifier = modifier,
|
||||
enabled = enabled,
|
||||
theme = theme,
|
||||
contentPadding = contentPadding,
|
||||
) {
|
||||
if (leadingIcon != null) {
|
||||
leadingIcon()
|
||||
|
||||
@ -43,7 +43,6 @@ import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.CompositionLocalProvider
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableFloatStateOf
|
||||
import androidx.compose.runtime.mutableIntStateOf
|
||||
@ -80,10 +79,8 @@ fun Slider(
|
||||
steps: Int = 0,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
onValueChangeFinished: () -> Unit = {},
|
||||
theme: BaseUITheme.SliderTheme? = null,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current.slider
|
||||
val sliderTheme = theme ?: baseTheme
|
||||
val colors = rememberButtonColors()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val density = LocalDensity.current
|
||||
@ -92,30 +89,13 @@ fun Slider(
|
||||
val range = valueRange.endInclusive - valueRange.start
|
||||
val fraction = if (range > 0f) ((value - valueRange.start) / range).coerceIn(0f, 1f) else 0f
|
||||
|
||||
val stateColor = when {
|
||||
isPressed -> sliderTheme.trackActiveColor.pressed
|
||||
isHovered -> sliderTheme.trackActiveColor.hovered
|
||||
else -> sliderTheme.trackActiveColor.focused
|
||||
val trackActiveColor = if (enabled) colors.accent else colors.onContainer.copy(alpha = 0.38f)
|
||||
val trackInactiveColor = if (enabled) {
|
||||
colors.border.copy(alpha = 0.6f)
|
||||
} else {
|
||||
colors.onContainer.copy(alpha = 0.2f)
|
||||
}
|
||||
val inactiveColor = when {
|
||||
isPressed -> sliderTheme.trackInactiveColor.pressed
|
||||
isHovered -> sliderTheme.trackInactiveColor.hovered
|
||||
else -> sliderTheme.trackInactiveColor.focused
|
||||
}
|
||||
val thumbColor = when {
|
||||
isPressed -> sliderTheme.thumbColor.pressed
|
||||
isHovered -> sliderTheme.thumbColor.hovered
|
||||
else -> sliderTheme.thumbColor.focused
|
||||
}
|
||||
val thumbShadowState = when {
|
||||
isPressed -> sliderTheme.thumbShadow.pressed
|
||||
isHovered -> sliderTheme.thumbShadow.hovered
|
||||
else -> sliderTheme.thumbShadow.focused
|
||||
}
|
||||
|
||||
val trackActiveColor = if (enabled) stateColor else stateColor.copy(alpha = 0.38f)
|
||||
val trackInactiveColor = if (enabled) inactiveColor else inactiveColor.copy(alpha = 0.38f)
|
||||
val resolvedThumbColor = if (enabled) thumbColor else thumbColor.copy(alpha = 0.38f)
|
||||
val thumbColor = if (enabled) colors.accent else colors.onContainer.copy(alpha = 0.38f)
|
||||
|
||||
val thumbScale by animateFloatAsState(
|
||||
targetValue = when {
|
||||
@ -127,6 +107,12 @@ fun Slider(
|
||||
label = "thumbScale",
|
||||
)
|
||||
|
||||
val thumbElevation = when {
|
||||
isPressed -> 2.dp
|
||||
isHovered -> 8.dp
|
||||
else -> 5.dp
|
||||
}
|
||||
|
||||
Box(
|
||||
modifier = modifier
|
||||
.fillMaxWidth()
|
||||
@ -255,9 +241,9 @@ fun Slider(
|
||||
val x = trackStart + stepSpacing * i
|
||||
drawCircle(
|
||||
color = if (x <= activeEnd) {
|
||||
sliderTheme.stepActiveColor
|
||||
colors.onAccent.copy(alpha = 0.5f)
|
||||
} else {
|
||||
sliderTheme.stepInactiveColor
|
||||
colors.onContainer.copy(alpha = 0.25f)
|
||||
},
|
||||
radius = 2.dp.toPx(),
|
||||
center = Offset(x, trackY),
|
||||
@ -281,17 +267,17 @@ fun Slider(
|
||||
scaleY = thumbScale
|
||||
}
|
||||
.shadow(
|
||||
elevation = thumbShadowState.elevation,
|
||||
elevation = thumbElevation,
|
||||
shape = CircleShape,
|
||||
ambientColor = thumbShadowState.ambientColor,
|
||||
spotColor = thumbShadowState.spotColor,
|
||||
ambientColor = colors.accent.copy(alpha = 0.35f),
|
||||
spotColor = colors.accent.copy(alpha = 0.5f),
|
||||
)
|
||||
.background(
|
||||
brush = Brush.radialGradient(
|
||||
colors = listOf(
|
||||
Color.White.copy(alpha = 0.6f),
|
||||
resolvedThumbColor.copy(alpha = 0.95f),
|
||||
resolvedThumbColor,
|
||||
thumbColor.copy(alpha = 0.95f),
|
||||
thumbColor,
|
||||
),
|
||||
center = Offset(0f, -0.55f),
|
||||
radius = 1.1f,
|
||||
|
||||
@ -34,6 +34,7 @@ import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.defaultMinSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.foundation.text.BasicTextField
|
||||
import androidx.compose.foundation.text.KeyboardActions
|
||||
import androidx.compose.foundation.text.KeyboardOptions
|
||||
@ -51,7 +52,6 @@ import androidx.compose.ui.draw.drawWithCache
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.SolidColor
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.text.input.VisualTransformation
|
||||
@ -61,28 +61,32 @@ import dev.krtirtho.spotube.resources.iconsax.Iconsax
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxSearchBroken
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxTrash
|
||||
|
||||
private val TextFieldShape = RoundedCornerShape(14.dp)
|
||||
private val TextFieldMinHeight = 44.dp
|
||||
|
||||
private data class ResolvedTextFieldState(
|
||||
val background: Brush,
|
||||
val highlight: Color,
|
||||
val shape: Shape,
|
||||
val border: BaseUITheme.Border,
|
||||
val shadow: BaseUITheme.Shadow,
|
||||
val foreground: Color,
|
||||
)
|
||||
|
||||
@Composable
|
||||
private fun resolveTextFieldState(
|
||||
theme: BaseUITheme.TextFieldTheme,
|
||||
isFocused: Boolean,
|
||||
isHovered: Boolean,
|
||||
): ResolvedTextFieldState {
|
||||
return when {
|
||||
isFocused -> ResolvedTextFieldState(theme.background.focused, theme.highlight.focused, theme.shape.focused, theme.border.focused, theme.shadow.focused, theme.foreground.focused)
|
||||
isHovered -> ResolvedTextFieldState(theme.background.hovered, theme.highlight.hovered, theme.shape.hovered, theme.border.hovered, theme.shadow.hovered, theme.foreground.hovered)
|
||||
else -> ResolvedTextFieldState(theme.background.pressed, theme.highlight.pressed, theme.shape.pressed, theme.border.pressed, theme.shadow.pressed, theme.foreground.pressed)
|
||||
internal fun textFieldShadow(
|
||||
shape: androidx.compose.ui.graphics.Shape,
|
||||
focused: Boolean,
|
||||
colors: ButtonColors,
|
||||
): Modifier {
|
||||
val elevation = if (focused) 9.dp else 6.dp
|
||||
val ambient = if (focused) {
|
||||
colors.accent.copy(alpha = 0.2f)
|
||||
} else {
|
||||
colors.shadow.copy(alpha = 0.15f)
|
||||
}
|
||||
val spot = if (focused) {
|
||||
colors.accent.copy(alpha = 0.25f)
|
||||
} else {
|
||||
colors.shadow.copy(alpha = 0.18f)
|
||||
}
|
||||
return Modifier.shadow(
|
||||
elevation = elevation,
|
||||
shape = shape,
|
||||
ambientColor = ambient,
|
||||
spotColor = spot,
|
||||
)
|
||||
}
|
||||
|
||||
@Composable
|
||||
@ -104,29 +108,25 @@ fun TextField(
|
||||
visualTransformation: VisualTransformation = VisualTransformation.None,
|
||||
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
|
||||
textStyle: TextStyle = TextStyle.Default,
|
||||
cursorBrush: Color? = null,
|
||||
theme: BaseUITheme.TextFieldTheme? = null,
|
||||
cursorBrush: Color = MaterialTheme.colorScheme.primary,
|
||||
) {
|
||||
val baseTheme = LocalBaseUITheme.current.textField
|
||||
val textFieldTheme = theme ?: baseTheme
|
||||
val colors = rememberButtonColors()
|
||||
val isFocused by interactionSource.collectIsFocusedAsState()
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
|
||||
val state = resolveTextFieldState(textFieldTheme, isFocused, isHovered)
|
||||
|
||||
val resolvedBorder = if (isError) {
|
||||
BaseUITheme.Border(MaterialTheme.colorScheme.error, state.border.width)
|
||||
} else {
|
||||
state.border
|
||||
val gradient = outlinedGradient(colors, false)
|
||||
val border = when {
|
||||
isError -> MaterialTheme.colorScheme.error
|
||||
isFocused -> MaterialTheme.colorScheme.primary
|
||||
isHovered -> colors.border.copy(alpha = 0.85f)
|
||||
else -> colors.border
|
||||
}
|
||||
|
||||
val contentColor = when {
|
||||
!enabled -> state.foreground.copy(alpha = 0.38f)
|
||||
else -> state.foreground
|
||||
!enabled -> colors.onContainer.copy(alpha = 0.38f)
|
||||
else -> colors.onContainer
|
||||
}
|
||||
|
||||
val cursor = cursorBrush?.let { SolidColor(it) } ?: textFieldTheme.cursor
|
||||
|
||||
Column(modifier = modifier) {
|
||||
AnimatedVisibility(
|
||||
visible = label != null,
|
||||
@ -139,22 +139,13 @@ fun TextField(
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.defaultMinSize(minHeight = TextFieldMinHeight)
|
||||
.then(
|
||||
if (state.shadow.elevation > 0.dp) {
|
||||
Modifier.shadow(
|
||||
elevation = state.shadow.elevation,
|
||||
shape = state.shape,
|
||||
ambientColor = state.shadow.ambientColor,
|
||||
spotColor = state.shadow.spotColor,
|
||||
)
|
||||
} else Modifier
|
||||
)
|
||||
.clip(state.shape)
|
||||
.background(state.background, state.shape)
|
||||
.border(BorderStroke(resolvedBorder.width, resolvedBorder.color), state.shape)
|
||||
.then(textFieldShadow(TextFieldShape, isFocused, colors))
|
||||
.clip(TextFieldShape)
|
||||
.background(gradient, TextFieldShape)
|
||||
.border(BorderStroke(0.5.dp, border), TextFieldShape)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(state.highlight, Color.Transparent),
|
||||
colors = listOf(colors.highlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
@ -167,7 +158,7 @@ fun TextField(
|
||||
)
|
||||
}
|
||||
}
|
||||
.padding(textFieldTheme.padding),
|
||||
.padding(horizontal = 14.dp, vertical = 10.dp),
|
||||
) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
@ -186,7 +177,7 @@ fun TextField(
|
||||
enabled = enabled,
|
||||
readOnly = readOnly,
|
||||
textStyle = textStyle.copy(color = contentColor),
|
||||
cursorBrush = cursor,
|
||||
cursorBrush = SolidColor(cursorBrush),
|
||||
keyboardOptions = keyboardOptions,
|
||||
keyboardActions = keyboardActions,
|
||||
singleLine = singleLine,
|
||||
@ -219,8 +210,6 @@ fun TextField(
|
||||
@Composable
|
||||
fun TextFieldPreview() {
|
||||
MaterialTheme {
|
||||
val theme = rememberBaseUITheme()
|
||||
CompositionLocalProvider(LocalBaseUITheme provides theme) {
|
||||
androidx.compose.material3.Surface(
|
||||
color = MaterialTheme.colorScheme.background,
|
||||
modifier = Modifier.padding(24.dp),
|
||||
@ -253,5 +242,4 @@ fun TextFieldPreview() {
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,756 +0,0 @@
|
||||
/*
|
||||
* Copyright (C) 2026 Kingkor Roy Tirtho and Spotube Contributors
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
package dev.krtirtho.spotube.core.ui.base
|
||||
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.Stable
|
||||
import androidx.compose.runtime.staticCompositionLocalOf
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.Shape
|
||||
import androidx.compose.ui.graphics.SolidColor
|
||||
import androidx.compose.ui.graphics.luminance
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.unit.Dp
|
||||
import androidx.compose.ui.unit.dp
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme.AutoCompleteMenuTheme
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme.CheckBoxTheme
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme.ChipTabTheme
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme.SliderTheme
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme.TextFieldTheme
|
||||
|
||||
@Stable
|
||||
data class BaseUITheme(
|
||||
val buttons: ButtonVariants,
|
||||
val iconButtons: ButtonVariants,
|
||||
val textField: TextFieldTheme,
|
||||
val autoCompleteMenuTheme: AutoCompleteMenuTheme,
|
||||
val slider: SliderTheme,
|
||||
val checkBox: CheckBoxTheme,
|
||||
val chipTab: ChipTabTheme,
|
||||
val card: CardTheme,
|
||||
val listRowTile: ListRowTheme,
|
||||
) {
|
||||
|
||||
@Stable
|
||||
data class InteractionState<T>(
|
||||
val hovered: T,
|
||||
val pressed: T,
|
||||
val focused: T,
|
||||
) {
|
||||
companion object {
|
||||
fun <T> fromSingleValue(value: T): InteractionState<T> {
|
||||
return InteractionState(value, value, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Stable
|
||||
data class AdvancedInteractionState<T>(
|
||||
val hovered: T,
|
||||
val pressed: T,
|
||||
val focused: T,
|
||||
val selected: T,
|
||||
val disabled: T,
|
||||
) {
|
||||
companion object {
|
||||
fun <T> fromSingleValue(value: T): AdvancedInteractionState<T> {
|
||||
return AdvancedInteractionState(value, value, value, value, value)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Stable
|
||||
data class Border(
|
||||
val color: Color,
|
||||
val width: Dp,
|
||||
)
|
||||
|
||||
@Stable
|
||||
data class Shadow(
|
||||
val elevation: Dp,
|
||||
val clip: Boolean = elevation > 0.dp,
|
||||
val ambientColor: Color,
|
||||
val spotColor: Color,
|
||||
)
|
||||
|
||||
@Stable
|
||||
data class ButtonVariants(
|
||||
val primary: ButtonStyle,
|
||||
val secondary: ButtonStyle,
|
||||
val outline: ButtonStyle,
|
||||
val ghost: ButtonStyle,
|
||||
)
|
||||
|
||||
@Stable
|
||||
data class ButtonStyle(
|
||||
val colors: InteractionState<ButtonColors>,
|
||||
val shape: InteractionState<Shape>,
|
||||
val shadow: InteractionState<Shadow>,
|
||||
val border: InteractionState<Border>,
|
||||
val padding: InteractionState<PaddingValues>,
|
||||
)
|
||||
|
||||
@Stable
|
||||
data class ButtonColors(
|
||||
val background: Brush,
|
||||
val foreground: Color,
|
||||
val highlight: Color,
|
||||
)
|
||||
|
||||
data class CardTheme(
|
||||
val background: Brush,
|
||||
val shape: Shape,
|
||||
val border: Border,
|
||||
val padding: PaddingValues,
|
||||
val shadow: Shadow,
|
||||
)
|
||||
|
||||
data class ListRowTheme(
|
||||
val background: AdvancedInteractionState<Brush>,
|
||||
val shape: AdvancedInteractionState<Shape>,
|
||||
val border: AdvancedInteractionState<Border>,
|
||||
val shadow: AdvancedInteractionState<Shadow>,
|
||||
val padding: PaddingValues,
|
||||
val textStyle: AdvancedInteractionState<TextStyle>,
|
||||
val foreground: AdvancedInteractionState<Color>,
|
||||
)
|
||||
|
||||
data class TextFieldTheme(
|
||||
val background: InteractionState<Brush>,
|
||||
val highlight: InteractionState<Color>,
|
||||
val shape: InteractionState<Shape>,
|
||||
val border: InteractionState<Border>,
|
||||
val shadow: InteractionState<Shadow>,
|
||||
val padding: PaddingValues,
|
||||
val textStyle: TextStyle,
|
||||
val cursor: Brush,
|
||||
val foreground: InteractionState<Color>,
|
||||
)
|
||||
|
||||
data class AutoCompleteMenuTheme(
|
||||
val background: Brush,
|
||||
val shape: Shape,
|
||||
val border: Border,
|
||||
val padding: PaddingValues,
|
||||
val shadowElevation: Dp,
|
||||
)
|
||||
|
||||
data class SliderTheme(
|
||||
val trackActiveColor: InteractionState<Color>,
|
||||
val trackInactiveColor: InteractionState<Color>,
|
||||
val thumbColor: InteractionState<Color>,
|
||||
val thumbShadow: InteractionState<Shadow>,
|
||||
val stepActiveColor: Color,
|
||||
val stepInactiveColor: Color,
|
||||
)
|
||||
|
||||
data class CheckBoxTheme(
|
||||
val selected: ButtonStyle,
|
||||
val unselected: ButtonStyle,
|
||||
val checkmarkColor: Color,
|
||||
)
|
||||
|
||||
data class ChipTabTheme(
|
||||
val selected: ButtonStyle,
|
||||
val unselected: ButtonStyle,
|
||||
)
|
||||
}
|
||||
|
||||
val LocalBaseUITheme = staticCompositionLocalOf<BaseUITheme> {
|
||||
throw IllegalStateException("No BaseUITheme provided")
|
||||
}
|
||||
|
||||
@Composable
|
||||
fun rememberBaseUITheme(): BaseUITheme {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
val isLight = scheme.surface.luminance() > 0.5f
|
||||
|
||||
val containerLighter = if (isLight) Color.White else scheme.surfaceContainerHigh
|
||||
val containerDarker = if (isLight) Color(0xFFF2F2F4) else scheme.surfaceContainer
|
||||
val containerPressed = if (isLight) Color(0xFFE0E0E3) else scheme.surfaceContainerHighest
|
||||
val highlight = if (isLight) Color.White.copy(alpha = 0.9f) else Color.White.copy(alpha = 0.06f)
|
||||
val shadowColor = scheme.onSurface
|
||||
val border = scheme.outlineVariant
|
||||
|
||||
val secondaryContainer = scheme.secondaryContainer
|
||||
val secondaryContainerPressed = secondaryContainer.copy(alpha = if (isLight) 0.85f else 0.92f)
|
||||
val secondaryHighlight =
|
||||
if (isLight) Color.White.copy(alpha = 0.5f) else Color.White.copy(alpha = 0.08f)
|
||||
|
||||
val defaultShape = RoundedCornerShape(14.dp)
|
||||
val defaultShapeState =
|
||||
BaseUITheme.InteractionState<Shape>(defaultShape, defaultShape, defaultShape)
|
||||
val noBorder = BaseUITheme.Border(Color.Transparent, 0.dp)
|
||||
val noBorderState = BaseUITheme.InteractionState(noBorder, noBorder, noBorder)
|
||||
val noShadow = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent)
|
||||
val noShadowState = BaseUITheme.InteractionState(noShadow, noShadow, noShadow)
|
||||
val defaultButtonPadding = BaseUITheme.InteractionState(
|
||||
PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
PaddingValues(horizontal = 20.dp, vertical = 10.dp),
|
||||
)
|
||||
val iconButtonPadding = BaseUITheme.InteractionState(
|
||||
PaddingValues(8.dp),
|
||||
PaddingValues(8.dp),
|
||||
PaddingValues(8.dp),
|
||||
)
|
||||
|
||||
val outlineColors = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = highlight,
|
||||
),
|
||||
pressed = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = highlight,
|
||||
),
|
||||
focused = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = highlight,
|
||||
),
|
||||
)
|
||||
val outlineShadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
9.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.22f),
|
||||
shadowColor.copy(alpha = 0.26f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
1.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.08f),
|
||||
shadowColor.copy(alpha = 0.1f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
6.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.15f),
|
||||
shadowColor.copy(alpha = 0.18f)
|
||||
),
|
||||
)
|
||||
val outlineBorder = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Border(border, 0.5.dp),
|
||||
pressed = BaseUITheme.Border(border.copy(alpha = 0.7f), 0.5.dp),
|
||||
focused = BaseUITheme.Border(border, 0.5.dp),
|
||||
)
|
||||
|
||||
val primaryColors = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(scheme.primary, scheme.primary)),
|
||||
foreground = scheme.onPrimary,
|
||||
highlight = Color.White.copy(alpha = 0.25f),
|
||||
),
|
||||
pressed = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
scheme.primary.copy(alpha = 0.85f),
|
||||
scheme.primary
|
||||
)
|
||||
),
|
||||
foreground = scheme.onPrimary,
|
||||
highlight = Color.White.copy(alpha = 0.25f),
|
||||
),
|
||||
focused = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(scheme.primary, scheme.primary)),
|
||||
foreground = scheme.onPrimary,
|
||||
highlight = Color.White.copy(alpha = 0.25f),
|
||||
),
|
||||
)
|
||||
val primaryShadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
9.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.45f),
|
||||
scheme.primary.copy(alpha = 0.5f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
1.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.2f),
|
||||
scheme.primary.copy(alpha = 0.25f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
6.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.35f),
|
||||
scheme.primary.copy(alpha = 0.4f)
|
||||
),
|
||||
)
|
||||
val primaryBorder = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Border(scheme.primary, 0.5.dp),
|
||||
pressed = BaseUITheme.Border(scheme.primary, 0.5.dp),
|
||||
focused = BaseUITheme.Border(scheme.primary, 0.5.dp),
|
||||
)
|
||||
|
||||
val secondaryColors = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
secondaryContainer,
|
||||
secondaryContainer.copy(alpha = if (secondaryContainer.luminance() > 0.5f) 0.92f else 1f)
|
||||
)
|
||||
),
|
||||
foreground = scheme.onSecondaryContainer,
|
||||
highlight = secondaryHighlight,
|
||||
),
|
||||
pressed = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
secondaryContainerPressed,
|
||||
secondaryContainerPressed
|
||||
)
|
||||
),
|
||||
foreground = scheme.onSecondaryContainer,
|
||||
highlight = secondaryHighlight,
|
||||
),
|
||||
focused = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
secondaryContainer,
|
||||
secondaryContainer.copy(alpha = if (secondaryContainer.luminance() > 0.5f) 0.92f else 1f)
|
||||
)
|
||||
),
|
||||
foreground = scheme.onSecondaryContainer,
|
||||
highlight = secondaryHighlight,
|
||||
),
|
||||
)
|
||||
val secondaryShadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
9.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.22f),
|
||||
shadowColor.copy(alpha = 0.26f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
1.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.08f),
|
||||
shadowColor.copy(alpha = 0.1f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
6.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.15f),
|
||||
shadowColor.copy(alpha = 0.18f)
|
||||
),
|
||||
)
|
||||
val secondaryBorder = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
|
||||
pressed = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
|
||||
focused = BaseUITheme.Border(secondaryContainer.copy(alpha = 0.5f), 0.5.dp),
|
||||
)
|
||||
|
||||
val ghostColors = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
containerPressed.copy(alpha = 0.5f),
|
||||
containerPressed.copy(alpha = 0.5f)
|
||||
)
|
||||
),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = Color.Transparent,
|
||||
),
|
||||
pressed = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(containerPressed, containerPressed)),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = Color.Transparent,
|
||||
),
|
||||
focused = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent)),
|
||||
foreground = scheme.onSurface,
|
||||
highlight = Color.Transparent,
|
||||
),
|
||||
)
|
||||
|
||||
val outlineStyle = BaseUITheme.ButtonStyle(
|
||||
outlineColors,
|
||||
defaultShapeState,
|
||||
outlineShadow,
|
||||
outlineBorder,
|
||||
defaultButtonPadding
|
||||
)
|
||||
val primaryStyle = BaseUITheme.ButtonStyle(
|
||||
primaryColors,
|
||||
defaultShapeState,
|
||||
primaryShadow,
|
||||
primaryBorder,
|
||||
defaultButtonPadding
|
||||
)
|
||||
val secondaryStyle = BaseUITheme.ButtonStyle(
|
||||
secondaryColors,
|
||||
defaultShapeState,
|
||||
secondaryShadow,
|
||||
secondaryBorder,
|
||||
defaultButtonPadding
|
||||
)
|
||||
val ghostStyle = BaseUITheme.ButtonStyle(
|
||||
ghostColors,
|
||||
defaultShapeState,
|
||||
noShadowState,
|
||||
noBorderState,
|
||||
defaultButtonPadding
|
||||
)
|
||||
|
||||
val outlineIconStyle = BaseUITheme.ButtonStyle(
|
||||
outlineColors,
|
||||
defaultShapeState,
|
||||
outlineShadow,
|
||||
outlineBorder,
|
||||
iconButtonPadding
|
||||
)
|
||||
val primaryIconStyle = BaseUITheme.ButtonStyle(
|
||||
primaryColors,
|
||||
defaultShapeState,
|
||||
primaryShadow,
|
||||
primaryBorder,
|
||||
iconButtonPadding
|
||||
)
|
||||
val secondaryIconStyle = BaseUITheme.ButtonStyle(
|
||||
secondaryColors,
|
||||
defaultShapeState,
|
||||
secondaryShadow,
|
||||
secondaryBorder,
|
||||
iconButtonPadding
|
||||
)
|
||||
val ghostIconStyle = BaseUITheme.ButtonStyle(
|
||||
ghostColors,
|
||||
defaultShapeState,
|
||||
noShadowState,
|
||||
noBorderState,
|
||||
iconButtonPadding
|
||||
)
|
||||
|
||||
val textFieldForeground = BaseUITheme.InteractionState(
|
||||
hovered = scheme.onSurface,
|
||||
pressed = scheme.onSurface,
|
||||
focused = scheme.onSurface,
|
||||
)
|
||||
|
||||
val checkBoxShape = RoundedCornerShape(6.dp)
|
||||
val checkBoxShapeState =
|
||||
BaseUITheme.InteractionState<Shape>(checkBoxShape, checkBoxShape, checkBoxShape)
|
||||
val noPadding =
|
||||
BaseUITheme.InteractionState(PaddingValues(0.dp), PaddingValues(0.dp), PaddingValues(0.dp))
|
||||
|
||||
val chipTabShape = RoundedCornerShape(10.dp)
|
||||
val chipTabShapeState =
|
||||
BaseUITheme.InteractionState<Shape>(chipTabShape, chipTabShape, chipTabShape)
|
||||
val chipTabPadding = BaseUITheme.InteractionState(
|
||||
PaddingValues(horizontal = 14.dp, vertical = 4.dp),
|
||||
PaddingValues(horizontal = 14.dp, vertical = 4.dp),
|
||||
PaddingValues(horizontal = 14.dp, vertical = 4.dp),
|
||||
)
|
||||
|
||||
return BaseUITheme(
|
||||
buttons = BaseUITheme.ButtonVariants(
|
||||
primary = primaryStyle,
|
||||
secondary = secondaryStyle,
|
||||
outline = outlineStyle,
|
||||
ghost = ghostStyle,
|
||||
),
|
||||
iconButtons = BaseUITheme.ButtonVariants(
|
||||
primary = primaryIconStyle,
|
||||
secondary = secondaryIconStyle,
|
||||
outline = outlineIconStyle,
|
||||
ghost = ghostIconStyle,
|
||||
),
|
||||
textField = TextFieldTheme(
|
||||
background = BaseUITheme.InteractionState(
|
||||
hovered = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
pressed = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
focused = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
),
|
||||
highlight = BaseUITheme.InteractionState(
|
||||
hovered = highlight,
|
||||
pressed = highlight,
|
||||
focused = highlight,
|
||||
),
|
||||
shape = BaseUITheme.InteractionState(
|
||||
hovered = defaultShape,
|
||||
pressed = defaultShape,
|
||||
focused = defaultShape,
|
||||
),
|
||||
border = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Border(border.copy(alpha = 0.85f), 0.5.dp),
|
||||
pressed = BaseUITheme.Border(border, 0.5.dp),
|
||||
focused = BaseUITheme.Border(scheme.primary, 0.5.dp),
|
||||
),
|
||||
shadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
9.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.22f),
|
||||
shadowColor.copy(alpha = 0.26f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
6.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.15f),
|
||||
shadowColor.copy(alpha = 0.18f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
9.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.2f),
|
||||
scheme.primary.copy(alpha = 0.25f)
|
||||
),
|
||||
),
|
||||
padding = PaddingValues(horizontal = 14.dp, vertical = 10.dp),
|
||||
textStyle = TextStyle.Default,
|
||||
cursor = SolidColor(scheme.primary),
|
||||
foreground = textFieldForeground,
|
||||
),
|
||||
autoCompleteMenuTheme = AutoCompleteMenuTheme(
|
||||
background = Brush.verticalGradient(
|
||||
listOf(
|
||||
scheme.surfaceContainerHigh,
|
||||
scheme.surfaceContainer
|
||||
)
|
||||
),
|
||||
shape = RoundedCornerShape(12.dp),
|
||||
border = BaseUITheme.Border(border, 0.5.dp),
|
||||
padding = PaddingValues(0.dp),
|
||||
shadowElevation = 8.dp,
|
||||
),
|
||||
slider = SliderTheme(
|
||||
trackActiveColor = BaseUITheme.InteractionState(
|
||||
hovered = scheme.primary,
|
||||
pressed = scheme.primary,
|
||||
focused = scheme.primary,
|
||||
),
|
||||
trackInactiveColor = BaseUITheme.InteractionState(
|
||||
hovered = border.copy(alpha = 0.6f),
|
||||
pressed = border.copy(alpha = 0.6f),
|
||||
focused = border.copy(alpha = 0.6f),
|
||||
),
|
||||
thumbColor = BaseUITheme.InteractionState(
|
||||
hovered = scheme.primary,
|
||||
pressed = scheme.primary,
|
||||
focused = scheme.primary,
|
||||
),
|
||||
thumbShadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
8.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.4f),
|
||||
scheme.primary.copy(alpha = 0.5f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
2.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.2f),
|
||||
scheme.primary.copy(alpha = 0.25f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
5.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.35f),
|
||||
scheme.primary.copy(alpha = 0.4f)
|
||||
),
|
||||
),
|
||||
stepActiveColor = scheme.onPrimary.copy(alpha = 0.5f),
|
||||
stepInactiveColor = scheme.onSurface.copy(alpha = 0.25f),
|
||||
),
|
||||
checkBox = CheckBoxTheme(
|
||||
selected = BaseUITheme.ButtonStyle(
|
||||
colors = primaryColors,
|
||||
shape = checkBoxShapeState,
|
||||
shadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
8.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.4f),
|
||||
scheme.primary.copy(alpha = 0.45f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
1.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.2f),
|
||||
scheme.primary.copy(alpha = 0.25f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
6.dp,
|
||||
true,
|
||||
scheme.primary.copy(alpha = 0.3f),
|
||||
scheme.primary.copy(alpha = 0.35f)
|
||||
),
|
||||
),
|
||||
border = primaryBorder,
|
||||
padding = noPadding,
|
||||
),
|
||||
unselected = BaseUITheme.ButtonStyle(
|
||||
colors = outlineColors,
|
||||
shape = checkBoxShapeState,
|
||||
shadow = BaseUITheme.InteractionState(
|
||||
hovered = BaseUITheme.Shadow(
|
||||
5.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.2f),
|
||||
shadowColor.copy(alpha = 0.24f)
|
||||
),
|
||||
pressed = BaseUITheme.Shadow(
|
||||
1.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.08f),
|
||||
shadowColor.copy(alpha = 0.1f)
|
||||
),
|
||||
focused = BaseUITheme.Shadow(
|
||||
3.dp,
|
||||
true,
|
||||
shadowColor.copy(alpha = 0.15f),
|
||||
shadowColor.copy(alpha = 0.18f)
|
||||
),
|
||||
),
|
||||
border = outlineBorder,
|
||||
padding = noPadding,
|
||||
),
|
||||
checkmarkColor = scheme.onPrimary,
|
||||
),
|
||||
chipTab = ChipTabTheme(
|
||||
selected = BaseUITheme.ButtonStyle(
|
||||
colors = primaryColors,
|
||||
shape = chipTabShapeState,
|
||||
shadow = primaryShadow,
|
||||
border = primaryBorder,
|
||||
padding = chipTabPadding,
|
||||
),
|
||||
unselected = BaseUITheme.ButtonStyle(
|
||||
colors = outlineColors,
|
||||
shape = chipTabShapeState,
|
||||
shadow = outlineShadow,
|
||||
border = outlineBorder,
|
||||
padding = chipTabPadding,
|
||||
),
|
||||
),
|
||||
card = BaseUITheme.CardTheme(
|
||||
background = Brush.verticalGradient(listOf(containerLighter, containerDarker)),
|
||||
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)),
|
||||
),
|
||||
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))),
|
||||
),
|
||||
shape = BaseUITheme.AdvancedInteractionState(
|
||||
hovered = RoundedCornerShape(8.dp),
|
||||
pressed = RoundedCornerShape(8.dp),
|
||||
focused = RoundedCornerShape(8.dp),
|
||||
selected = RoundedCornerShape(8.dp),
|
||||
disabled = RoundedCornerShape(8.dp),
|
||||
),
|
||||
border = BaseUITheme.AdvancedInteractionState(
|
||||
hovered = BaseUITheme.Border(Color.Transparent, 0.dp),
|
||||
pressed = BaseUITheme.Border(Color.Transparent, 0.dp),
|
||||
focused = BaseUITheme.Border(Color.Transparent, 0.dp),
|
||||
selected = BaseUITheme.Border(Color.Transparent, 0.dp),
|
||||
disabled = BaseUITheme.Border(Color.Transparent, 0.dp),
|
||||
),
|
||||
shadow = BaseUITheme.AdvancedInteractionState(
|
||||
hovered = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
|
||||
pressed = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
|
||||
focused = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
|
||||
selected = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
|
||||
disabled = BaseUITheme.Shadow(0.dp, false, Color.Transparent, Color.Transparent),
|
||||
),
|
||||
padding = PaddingValues(horizontal = 8.dp, vertical = 6.dp),
|
||||
textStyle = BaseUITheme.AdvancedInteractionState(
|
||||
hovered = TextStyle.Default,
|
||||
pressed = TextStyle.Default,
|
||||
focused = TextStyle.Default,
|
||||
selected = TextStyle.Default,
|
||||
disabled = TextStyle.Default,
|
||||
),
|
||||
foreground = BaseUITheme.AdvancedInteractionState(
|
||||
hovered = scheme.onSurface,
|
||||
pressed = scheme.onSurface,
|
||||
focused = scheme.onSurface,
|
||||
selected = scheme.onSurface,
|
||||
disabled = scheme.onSurface.copy(alpha = 0.38f),
|
||||
),
|
||||
),
|
||||
)
|
||||
}
|
||||
|
||||
// Helper functions for easier theme overrides
|
||||
|
||||
fun BaseUITheme.ButtonStyle.copyShape(shape: Shape): BaseUITheme.ButtonStyle =
|
||||
copy(shape = BaseUITheme.InteractionState.fromSingleValue(shape))
|
||||
|
||||
fun BaseUITheme.ButtonStyle.copyShadow(shadow: BaseUITheme.Shadow): BaseUITheme.ButtonStyle =
|
||||
copy(shadow = BaseUITheme.InteractionState.fromSingleValue(shadow))
|
||||
|
||||
fun BaseUITheme.ButtonStyle.copyBorder(border: BaseUITheme.Border): BaseUITheme.ButtonStyle =
|
||||
copy(border = BaseUITheme.InteractionState.fromSingleValue(border))
|
||||
|
||||
fun BaseUITheme.ButtonStyle.copyPadding(padding: PaddingValues): BaseUITheme.ButtonStyle =
|
||||
copy(padding = BaseUITheme.InteractionState.fromSingleValue(padding))
|
||||
|
||||
fun BaseUITheme.ButtonStyle.copyColors(colors: BaseUITheme.ButtonColors): BaseUITheme.ButtonStyle =
|
||||
copy(colors = BaseUITheme.InteractionState.fromSingleValue(colors))
|
||||
|
||||
@Composable
|
||||
fun invertedButtonStyle(): BaseUITheme.ButtonStyle {
|
||||
val scheme = MaterialTheme.colorScheme
|
||||
val isLight = scheme.surface.luminance() > 0.5f
|
||||
val shadowColor = scheme.onSurface
|
||||
|
||||
val invertedColors = BaseUITheme.ButtonColors(
|
||||
background = Brush.verticalGradient(listOf(scheme.onSurface, scheme.onSurface)),
|
||||
foreground = scheme.surface,
|
||||
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)),
|
||||
foreground = scheme.surface,
|
||||
highlight = if (isLight) Color.White.copy(alpha = 0.1f) else Color.White.copy(alpha = 0.05f),
|
||||
)
|
||||
val border = BaseUITheme.Border(scheme.onSurfaceVariant, 0.5.dp)
|
||||
val shadow = BaseUITheme.Shadow(
|
||||
elevation = 6.dp,
|
||||
clip = true,
|
||||
ambientColor = shadowColor.copy(alpha = 0.2f),
|
||||
spotColor = shadowColor.copy(alpha = 0.25f),
|
||||
)
|
||||
|
||||
return BaseUITheme.ButtonStyle(
|
||||
colors = BaseUITheme.InteractionState(
|
||||
hovered = invertedColors,
|
||||
pressed = pressedColors,
|
||||
focused = invertedColors,
|
||||
),
|
||||
shape = BaseUITheme.InteractionState.fromSingleValue(RoundedCornerShape(14.dp)),
|
||||
shadow = BaseUITheme.InteractionState.fromSingleValue(shadow),
|
||||
border = BaseUITheme.InteractionState.fromSingleValue(border),
|
||||
padding = BaseUITheme.InteractionState.fromSingleValue(PaddingValues(8.dp)),
|
||||
)
|
||||
}
|
||||
@ -21,8 +21,10 @@ import androidx.compose.animation.AnimatedContent
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.animation.togetherWith
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.ExperimentalFoundationApi
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.combinedClickable
|
||||
import androidx.compose.foundation.hoverable
|
||||
@ -61,10 +63,10 @@ import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.drawWithCache
|
||||
import androidx.compose.ui.focus.focusModifier
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.luminance
|
||||
import androidx.compose.ui.layout.ContentScale
|
||||
import androidx.compose.ui.platform.LocalDensity
|
||||
import androidx.compose.ui.platform.LocalWindowInfo
|
||||
@ -84,13 +86,14 @@ import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.common.Thumbnail
|
||||
import dev.krtirtho.plugin_interfaces.plugin_apis.metadata.track.MetadataTrack
|
||||
import dev.krtirtho.spotube.core.ui.base.ButtonGroup
|
||||
import dev.krtirtho.spotube.core.ui.base.ButtonGroupDivider
|
||||
import dev.krtirtho.spotube.core.ui.base.Card
|
||||
import dev.krtirtho.spotube.core.ui.base.CheckBox
|
||||
import dev.krtirtho.spotube.core.ui.base.CheckBoxState
|
||||
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.IconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.TextField
|
||||
import dev.krtirtho.spotube.core.ui.base.buttonShadow
|
||||
import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
|
||||
import dev.krtirtho.spotube.core.ui.misc.SkeletonTree
|
||||
import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
|
||||
import dev.krtirtho.spotube.core.ui.misc.shimmerApply
|
||||
@ -345,10 +348,25 @@ fun TrackList(
|
||||
}
|
||||
|
||||
item(key = "track-card") {
|
||||
Card(
|
||||
val colors = rememberButtonColors()
|
||||
val trackListShape = MaterialTheme.shapes.large
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth()
|
||||
.padding(vertical = 8.dp),
|
||||
.padding(vertical = 8.dp)
|
||||
.then(
|
||||
buttonShadow(
|
||||
trackListShape,
|
||||
pressed = false,
|
||||
primary = false,
|
||||
colors,
|
||||
hovered = false
|
||||
)
|
||||
)
|
||||
.clip(trackListShape)
|
||||
.background(MaterialTheme.colorScheme.surfaceContainer, trackListShape)
|
||||
.border(BorderStroke(0.5.dp, colors.border), trackListShape)
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
@ -514,21 +532,17 @@ private fun TrackListRow(
|
||||
onArtistsOverflowClick: () -> Unit,
|
||||
modifier: Modifier = Modifier,
|
||||
) {
|
||||
val rowTheme = LocalBaseUITheme.current.listRowTile
|
||||
val isLight = MaterialTheme.colorScheme.surface.luminance() > 0.5f
|
||||
val rowColors = rememberButtonColors()
|
||||
val artworkInteractionSource = remember { MutableInteractionSource() }
|
||||
val isArtworkHovered by artworkInteractionSource.collectIsHoveredAsState()
|
||||
val rowInteractionSource = remember { MutableInteractionSource() }
|
||||
val isRowHovered by rowInteractionSource.collectIsHoveredAsState()
|
||||
val rowBackgroundColor = when {
|
||||
isSelected -> rowTheme.background.selected
|
||||
isCurrentTrack && isCurrentTrackPlaying -> rowTheme.background.hovered
|
||||
isCurrentTrack -> rowTheme.background.focused
|
||||
else -> Brush.verticalGradient(listOf(Color.Transparent, Color.Transparent))
|
||||
isSelected -> MaterialTheme.colorScheme.primaryContainer.copy(alpha = 0.3f)
|
||||
isCurrentTrack && isCurrentTrackPlaying -> MaterialTheme.colorScheme.primary.copy(alpha = 0.14f)
|
||||
isCurrentTrack -> MaterialTheme.colorScheme.onSurface.copy(alpha = 0.06f)
|
||||
else -> Color.Transparent
|
||||
}
|
||||
val highlightColor = Color.White.copy(
|
||||
alpha = if (isLight) 0.9f else 0.06f
|
||||
)
|
||||
|
||||
Row(
|
||||
modifier = modifier
|
||||
@ -541,7 +555,7 @@ private fun TrackListRow(
|
||||
.background(rowBackgroundColor)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(highlightColor, Color.Transparent),
|
||||
colors = listOf(rowColors.highlight, Color.Transparent),
|
||||
startY = 0f,
|
||||
endY = size.height * 0.5f,
|
||||
)
|
||||
|
||||
@ -33,9 +33,9 @@ import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Icon
|
||||
import dev.krtirtho.spotube.core.ui.base.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Scaffold
|
||||
import androidx.compose.runtime.Composable
|
||||
@ -49,16 +49,14 @@ import androidx.compose.ui.text.style.TextOverflow
|
||||
import androidx.compose.ui.tooling.preview.PreviewLightDark
|
||||
import androidx.compose.ui.unit.dp
|
||||
import coil3.compose.AsyncImage
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.PrimaryIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton
|
||||
import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
|
||||
import dev.krtirtho.spotube.core.ui.misc.shimmerApply
|
||||
import dev.krtirtho.spotube.resources.iconsax.Iconsax
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxPause
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxPauseCircle
|
||||
import dev.krtirtho.spotube.resources.iconsax.Play
|
||||
|
||||
@Composable
|
||||
fun PlayableCard(
|
||||
@ -110,11 +108,7 @@ fun PlayableCard(
|
||||
SecondaryIconButton(
|
||||
onClick = onAddToQueue,
|
||||
modifier = Modifier.size(30.dp),
|
||||
theme = LocalBaseUITheme.current.iconButtons.secondary.copy(
|
||||
shape = BaseUITheme.InteractionState.fromSingleValue(
|
||||
CircleShape
|
||||
)
|
||||
)
|
||||
shape = RoundedCornerShape(6.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = Iconsax.IconsaxAddSquare,
|
||||
@ -127,17 +121,12 @@ fun PlayableCard(
|
||||
PrimaryIconButton(
|
||||
onClick = onPlay,
|
||||
modifier = Modifier.size(30.dp),
|
||||
theme = LocalBaseUITheme.current.iconButtons.secondary.copy(
|
||||
shape = BaseUITheme.InteractionState.fromSingleValue(
|
||||
CircleShape
|
||||
)
|
||||
)
|
||||
|
||||
shape = RoundedCornerShape(6.dp)
|
||||
) {
|
||||
Icon(
|
||||
imageVector = if (isPlaying) {
|
||||
Iconsax.IconsaxPause
|
||||
} else Iconsax.IconsaxPlay,
|
||||
Iconsax.IconsaxPauseCircle
|
||||
} else Iconsax.Play,
|
||||
contentDescription = "Play",
|
||||
)
|
||||
}
|
||||
|
||||
@ -83,13 +83,10 @@ import dev.krtirtho.spotube.core.audioplayer.LoopState
|
||||
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
|
||||
import dev.krtirtho.spotube.core.navigation.NavigationCommands
|
||||
import dev.krtirtho.spotube.core.navigation.Routes
|
||||
import dev.krtirtho.spotube.core.ui.base.BaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.GhostIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.IconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.Slider
|
||||
import dev.krtirtho.spotube.core.ui.base.copyShape
|
||||
import dev.krtirtho.spotube.core.ui.base.invertedButtonStyle
|
||||
import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadStatus
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
|
||||
@ -469,10 +466,7 @@ fun AppExpandedPlayer(
|
||||
textAlign = TextAlign.Center,
|
||||
)
|
||||
}
|
||||
IconButton(
|
||||
onClick = onQueue,
|
||||
theme = LocalBaseUITheme.current.iconButtons.outline.copyShape(CircleShape)
|
||||
) {
|
||||
IconButton(onClick = onQueue, shape = CircleShape) {
|
||||
Icon(Iconsax.IconsaxMusicFilter, contentDescription = "Queue")
|
||||
}
|
||||
}
|
||||
@ -532,14 +526,20 @@ fun AppExpandedPlayer(
|
||||
}
|
||||
IconButton(
|
||||
onClick = ::onPlayPause,
|
||||
theme = invertedButtonStyle().copyShape(CircleShape),
|
||||
colors = rememberButtonColors().copy(
|
||||
containerDarker = MaterialTheme.colorScheme.onSurface,
|
||||
containerLighter = MaterialTheme.colorScheme.onSurface,
|
||||
containerPressed = MaterialTheme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
modifier = Modifier
|
||||
.size(72.dp),
|
||||
shape = CircleShape,
|
||||
) {
|
||||
Icon(
|
||||
if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
|
||||
contentDescription = if (playerUiState.isPlaying) "Pause" else "Play",
|
||||
modifier = Modifier.size(30.dp),
|
||||
tint = MaterialTheme.colorScheme.surface,
|
||||
)
|
||||
}
|
||||
GhostIconButton(onClick = ::onSkipNext) {
|
||||
|
||||
@ -28,7 +28,6 @@ import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.CircleShape
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
@ -55,12 +54,9 @@ import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
|
||||
import dev.krtirtho.spotube.core.audioplayer.LoopState
|
||||
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
|
||||
import dev.krtirtho.spotube.core.ui.base.GhostIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.IconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.Slider
|
||||
import dev.krtirtho.spotube.core.ui.base.VariableIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.VariableIconButtonVariant
|
||||
import dev.krtirtho.spotube.core.ui.base.copyShape
|
||||
import dev.krtirtho.spotube.core.ui.base.invertedButtonStyle
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
|
||||
import dev.krtirtho.spotube.modules.saved_tracks.SAVED_TRACKS_COLLECTION_ID
|
||||
@ -278,12 +274,7 @@ fun AppLargePlayer(
|
||||
GhostIconButton(onClick = ::onSkipPrevious) {
|
||||
Icon(Iconsax.IconsaxPrevious, contentDescription = "Previous")
|
||||
}
|
||||
IconButton(
|
||||
onClick = ::onPlayPause,
|
||||
theme = invertedButtonStyle().copyShape(CircleShape),
|
||||
modifier = Modifier
|
||||
.size(50.dp),
|
||||
) {
|
||||
GhostIconButton(onClick = ::onPlayPause, modifier = Modifier.size(44.dp)) {
|
||||
Icon(
|
||||
if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
|
||||
contentDescription = if (playerUiState.isPlaying) "Pause" else "Play or pause",
|
||||
|
||||
@ -21,8 +21,14 @@ import androidx.compose.animation.AnimatedVisibility
|
||||
import androidx.compose.animation.core.animateDpAsState
|
||||
import androidx.compose.animation.fadeIn
|
||||
import androidx.compose.animation.fadeOut
|
||||
import androidx.compose.foundation.BorderStroke
|
||||
import androidx.compose.foundation.background
|
||||
import androidx.compose.foundation.border
|
||||
import androidx.compose.foundation.clickable
|
||||
import androidx.compose.foundation.hoverable
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.interaction.collectIsHoveredAsState
|
||||
import androidx.compose.foundation.interaction.collectIsPressedAsState
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Box
|
||||
import androidx.compose.foundation.layout.Column
|
||||
@ -36,26 +42,34 @@ import androidx.compose.foundation.layout.height
|
||||
import androidx.compose.foundation.layout.padding
|
||||
import androidx.compose.foundation.layout.size
|
||||
import androidx.compose.foundation.layout.width
|
||||
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.material3.ripple
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.runtime.saveable.rememberSaveable
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.drawWithCache
|
||||
import androidx.compose.ui.graphics.Brush
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.ui.graphics.vector.ImageVector
|
||||
import androidx.compose.ui.unit.dp
|
||||
import dev.krtirtho.spotube.core.navigation.NavigationState
|
||||
import dev.krtirtho.spotube.core.navigation.Navigator
|
||||
import dev.krtirtho.spotube.core.navigation.Routes
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.OutlineButton
|
||||
import dev.krtirtho.spotube.core.ui.base.SecondaryButton
|
||||
import dev.krtirtho.spotube.core.ui.base.copyPadding
|
||||
import dev.krtirtho.spotube.core.ui.base.buttonShadow
|
||||
import dev.krtirtho.spotube.core.ui.base.outlinedGradient
|
||||
import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
|
||||
import dev.krtirtho.spotube.modules.downloads.DownloadBadgeIndicator
|
||||
import dev.krtirtho.spotube.modules.library.LibraryState
|
||||
import dev.krtirtho.spotube.modules.library.LibraryTab
|
||||
@ -201,16 +215,66 @@ fun SidebarItem(
|
||||
SecondaryButton(
|
||||
onClick = onClick,
|
||||
modifier = buttonModifier,
|
||||
theme = LocalBaseUITheme.current.buttons.secondary.copyPadding(contentPadding),
|
||||
contentPadding = contentPadding,
|
||||
content = itemContent,
|
||||
)
|
||||
} else {
|
||||
OutlineButton(
|
||||
val colors = rememberButtonColors()
|
||||
val interactionSource = remember { MutableInteractionSource() }
|
||||
val isHovered by interactionSource.collectIsHoveredAsState()
|
||||
val isPressed by interactionSource.collectIsPressedAsState()
|
||||
val gradient = outlinedGradient(colors, isPressed)
|
||||
val border = colors.border.copy(alpha = if (isPressed) 0.7f else 1f)
|
||||
val lift = if (isHovered && !isPressed) (-1).dp else 0.dp
|
||||
val shape = RoundedCornerShape(14.dp)
|
||||
|
||||
Box(
|
||||
modifier = buttonModifier
|
||||
.hoverable(interactionSource = interactionSource)
|
||||
.graphicsLayer { translationY = lift.toPx() }
|
||||
.clip(shape)
|
||||
.then(
|
||||
if (isHovered || isPressed) {
|
||||
buttonShadow(
|
||||
shape,
|
||||
isPressed,
|
||||
primary = false,
|
||||
colors,
|
||||
hovered = isHovered
|
||||
).background(gradient, shape)
|
||||
.border(BorderStroke(0.5.dp, border), shape)
|
||||
.drawWithCache {
|
||||
val highlightBrush = Brush.verticalGradient(
|
||||
colors = listOf(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,
|
||||
)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
Modifier
|
||||
}
|
||||
)
|
||||
.clickable(
|
||||
interactionSource = interactionSource,
|
||||
indication = ripple(),
|
||||
onClick = onClick,
|
||||
modifier = buttonModifier,
|
||||
theme = LocalBaseUITheme.current.buttons.outline.copyPadding(contentPadding),
|
||||
hoverOnly = true,
|
||||
)
|
||||
.padding(contentPadding),
|
||||
contentAlignment = Alignment.Center,
|
||||
) {
|
||||
Row(
|
||||
verticalAlignment = Alignment.CenterVertically,
|
||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||
content = itemContent,
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -27,8 +27,6 @@ import androidx.lifecycle.compose.collectAsStateWithLifecycle
|
||||
import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
|
||||
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
|
||||
import dev.krtirtho.spotube.core.ui.base.IconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.copyShape
|
||||
import dev.krtirtho.spotube.modules.saved_tracks.SavedState
|
||||
import dev.krtirtho.spotube.modules.saved_tracks.SavedTracksViewModel
|
||||
import dev.krtirtho.spotube.modules.saved_tracks.rememberIsSavedTracks
|
||||
@ -71,7 +69,7 @@ fun PlayerHeartButton(
|
||||
IconButton(
|
||||
onClick = ::onLike,
|
||||
enabled = isSavedTrackState is SavedState.Success,
|
||||
theme = LocalBaseUITheme.current.iconButtons.outline.copyShape(CircleShape),
|
||||
shape = CircleShape,
|
||||
) {
|
||||
Icon(
|
||||
imageVector = if (isLiked) Iconsax.IconsaxHeart2 else Iconsax.IconsaxHeart,
|
||||
|
||||
@ -37,19 +37,21 @@ import androidx.compose.foundation.lazy.items
|
||||
import androidx.compose.foundation.lazy.rememberLazyListState
|
||||
import androidx.compose.material3.DropdownMenu
|
||||
import androidx.compose.material3.DropdownMenuItem
|
||||
import androidx.compose.material3.FilledTonalIconButton
|
||||
import androidx.compose.material3.Icon
|
||||
import androidx.compose.material3.IconButton
|
||||
import androidx.compose.material3.MaterialTheme
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.runtime.LaunchedEffect
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.runtime.getValue
|
||||
import androidx.compose.runtime.mutableIntStateOf
|
||||
import androidx.compose.runtime.mutableStateListOf
|
||||
import androidx.compose.runtime.mutableStateOf
|
||||
import androidx.compose.runtime.remember
|
||||
import androidx.compose.runtime.setValue
|
||||
import androidx.compose.runtime.collectAsState
|
||||
import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
@ -61,11 +63,7 @@ import compose.icons.FeatherIcons
|
||||
import compose.icons.feathericons.MoreVertical
|
||||
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
|
||||
import dev.krtirtho.spotube.core.di.rememberLogger
|
||||
import dev.krtirtho.spotube.core.ui.base.GhostIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.LocalBaseUITheme
|
||||
import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton
|
||||
import dev.krtirtho.spotube.core.ui.base.TextField
|
||||
import dev.krtirtho.spotube.core.ui.base.copyShape
|
||||
import dev.krtirtho.spotube.resources.iconsax.Iconsax
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
|
||||
import dev.krtirtho.spotube.resources.iconsax.IconsaxMusicSquareRemove
|
||||
@ -188,9 +186,9 @@ fun PlayerQueueContent(
|
||||
singleLine = true,
|
||||
modifier = Modifier.weight(1f),
|
||||
)
|
||||
SecondaryIconButton(
|
||||
FilledTonalIconButton(
|
||||
onClick = viewModel::clearQueue,
|
||||
theme = LocalBaseUITheme.current.iconButtons.secondary.copyShape(MaterialTheme.shapes.small),
|
||||
shape = MaterialTheme.shapes.small,
|
||||
) {
|
||||
Icon(Iconsax.IconsaxTrash, contentDescription = "Clear Queue")
|
||||
}
|
||||
@ -335,7 +333,7 @@ private fun QueueItemRow(
|
||||
Spacer(modifier = Modifier.width(4.dp))
|
||||
|
||||
Box {
|
||||
GhostIconButton(
|
||||
IconButton(
|
||||
onClick = { showMenu = true },
|
||||
modifier = Modifier.size(36.dp),
|
||||
) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user