mirror of
https://github.com/bbara04/Purefin.git
synced 2026-07-24 03:36:51 +00:00
refactor(ui): drop focus border from circular buttons
- Remove focusedBorderWidth/focusedBorderColor from CircularIconButton - Add new CircularTextButton component - Replace skip segment FilledTonalButton with CircularTextButton - Clean up unused imports
This commit is contained in:
@@ -285,13 +285,16 @@ fun PlayerScreen(
|
|||||||
enter = fadeIn(),
|
enter = fadeIn(),
|
||||||
exit = fadeOut(),
|
exit = fadeOut(),
|
||||||
modifier = Modifier
|
modifier = Modifier
|
||||||
.align(Alignment.BottomEnd)
|
.align(Alignment.CenterEnd)
|
||||||
.padding(
|
.padding(
|
||||||
end = 24.dp,
|
end = 24.dp,
|
||||||
bottom = if (horizontalSeekPreviewPositionMs != null) 96.dp else 24.dp
|
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
SkipSegmentButton(onClick = { viewModel.skipActiveSegment() })
|
SkipSegmentButton(
|
||||||
|
size = 72.dp,
|
||||||
|
fontSize = 22,
|
||||||
|
onClick = { viewModel.skipActiveSegment() }
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -10,11 +10,7 @@ import androidx.compose.foundation.layout.Spacer
|
|||||||
import androidx.compose.foundation.layout.fillMaxSize
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
import androidx.compose.foundation.layout.fillMaxWidth
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
import androidx.compose.foundation.layout.height
|
import androidx.compose.foundation.layout.height
|
||||||
import androidx.compose.foundation.layout.heightIn
|
|
||||||
import androidx.compose.foundation.layout.padding
|
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.material.icons.Icons
|
import androidx.compose.material.icons.Icons
|
||||||
import androidx.compose.material.icons.outlined.ArrowBack
|
import androidx.compose.material.icons.outlined.ArrowBack
|
||||||
import androidx.compose.material.icons.outlined.Cast
|
import androidx.compose.material.icons.outlined.Cast
|
||||||
@@ -26,9 +22,6 @@ import androidx.compose.material.icons.outlined.PlaylistPlay
|
|||||||
import androidx.compose.material.icons.outlined.Replay10
|
import androidx.compose.material.icons.outlined.Replay10
|
||||||
import androidx.compose.material.icons.outlined.SkipNext
|
import androidx.compose.material.icons.outlined.SkipNext
|
||||||
import androidx.compose.material.icons.outlined.SkipPrevious
|
import androidx.compose.material.icons.outlined.SkipPrevious
|
||||||
import androidx.compose.material3.ButtonDefaults
|
|
||||||
import androidx.compose.material3.FilledTonalButton
|
|
||||||
import androidx.compose.material3.Icon
|
|
||||||
import androidx.compose.material3.MaterialTheme
|
import androidx.compose.material3.MaterialTheme
|
||||||
import androidx.compose.material3.Text
|
import androidx.compose.material3.Text
|
||||||
import androidx.compose.runtime.Composable
|
import androidx.compose.runtime.Composable
|
||||||
@@ -38,9 +31,11 @@ import androidx.compose.ui.graphics.Brush
|
|||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.platform.testTag
|
import androidx.compose.ui.platform.testTag
|
||||||
import androidx.compose.ui.text.font.FontWeight
|
import androidx.compose.ui.text.font.FontWeight
|
||||||
|
import androidx.compose.ui.unit.Dp
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
import hu.bbara.purefin.core.player.model.PlayerUiState
|
import hu.bbara.purefin.core.player.model.PlayerUiState
|
||||||
import hu.bbara.purefin.core.player.model.TrackOption
|
import hu.bbara.purefin.core.player.model.TrackOption
|
||||||
|
import hu.bbara.purefin.ui.common.button.CircularTextButton
|
||||||
import hu.bbara.purefin.ui.common.button.GhostIconButton
|
import hu.bbara.purefin.ui.common.button.GhostIconButton
|
||||||
import hu.bbara.purefin.ui.common.button.PurefinIconButton
|
import hu.bbara.purefin.ui.common.button.PurefinIconButton
|
||||||
|
|
||||||
@@ -278,32 +273,21 @@ internal const val PlayerSkipSegmentButtonTag = "player_skip_segment_button"
|
|||||||
@Composable
|
@Composable
|
||||||
fun SkipSegmentButton(
|
fun SkipSegmentButton(
|
||||||
onClick: () -> Unit,
|
onClick: () -> Unit,
|
||||||
|
fontSize: Int = 18,
|
||||||
|
size: Dp = 52.dp,
|
||||||
modifier: Modifier = Modifier
|
modifier: Modifier = Modifier
|
||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
val scheme = MaterialTheme.colorScheme
|
||||||
|
|
||||||
FilledTonalButton(
|
CircularTextButton(
|
||||||
onClick = onClick,
|
|
||||||
modifier = modifier.heightIn(min = 44.dp),
|
|
||||||
shape = RoundedCornerShape(50),
|
|
||||||
colors = ButtonDefaults.filledTonalButtonColors(
|
|
||||||
containerColor = scheme.secondary.copy(alpha = 0.92f),
|
|
||||||
contentColor = scheme.onSecondary
|
|
||||||
),
|
|
||||||
contentPadding = ButtonDefaults.ButtonWithIconContentPadding
|
|
||||||
) {
|
|
||||||
Text(
|
|
||||||
text = "Skip",
|
text = "Skip",
|
||||||
style = MaterialTheme.typography.labelLarge,
|
textColor = scheme.onSecondary,
|
||||||
fontWeight = FontWeight.Bold
|
fontSize = fontSize,
|
||||||
|
containerColor = scheme.secondary,
|
||||||
|
size = size,
|
||||||
|
onClick = onClick,
|
||||||
|
modifier = modifier
|
||||||
)
|
)
|
||||||
Spacer(modifier = Modifier.width(8.dp))
|
|
||||||
Icon(
|
|
||||||
imageVector = Icons.Outlined.SkipNext,
|
|
||||||
contentDescription = null,
|
|
||||||
modifier = Modifier.size(18.dp)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
|
|||||||
@@ -2,7 +2,6 @@ package hu.bbara.purefin.ui.common.button
|
|||||||
|
|
||||||
import androidx.compose.animation.animateColorAsState
|
import androidx.compose.animation.animateColorAsState
|
||||||
import androidx.compose.animation.core.animateFloatAsState
|
import androidx.compose.animation.core.animateFloatAsState
|
||||||
import androidx.compose.foundation.border
|
|
||||||
import androidx.compose.foundation.layout.size
|
import androidx.compose.foundation.layout.size
|
||||||
import androidx.compose.foundation.shape.CircleShape
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
import androidx.compose.material3.FilledIconButton
|
import androidx.compose.material3.FilledIconButton
|
||||||
@@ -22,7 +21,7 @@ import androidx.compose.ui.unit.Dp
|
|||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
internal fun CircularIconButton(
|
fun CircularIconButton(
|
||||||
icon: ImageVector,
|
icon: ImageVector,
|
||||||
contentDescription: String?,
|
contentDescription: String?,
|
||||||
containerColor: Color,
|
containerColor: Color,
|
||||||
@@ -31,8 +30,6 @@ internal fun CircularIconButton(
|
|||||||
onClick: () -> Unit,
|
onClick: () -> Unit,
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
focusedScale: Float = 1f,
|
focusedScale: Float = 1f,
|
||||||
focusedBorderWidth: Dp,
|
|
||||||
focusedBorderColor: Color,
|
|
||||||
focusedBackgroundColor: Color = containerColor
|
focusedBackgroundColor: Color = containerColor
|
||||||
) {
|
) {
|
||||||
var isFocused by remember { mutableStateOf(false) }
|
var isFocused by remember { mutableStateOf(false) }
|
||||||
@@ -40,10 +37,6 @@ internal fun CircularIconButton(
|
|||||||
targetValue = if (isFocused) focusedScale else 1f,
|
targetValue = if (isFocused) focusedScale else 1f,
|
||||||
label = "scale"
|
label = "scale"
|
||||||
)
|
)
|
||||||
val borderColor by animateColorAsState(
|
|
||||||
targetValue = if (isFocused) focusedBorderColor else Color.Transparent,
|
|
||||||
label = "border"
|
|
||||||
)
|
|
||||||
val backgroundColor by animateColorAsState(
|
val backgroundColor by animateColorAsState(
|
||||||
targetValue = if (isFocused) focusedBackgroundColor else containerColor,
|
targetValue = if (isFocused) focusedBackgroundColor else containerColor,
|
||||||
label = "background"
|
label = "background"
|
||||||
@@ -60,11 +53,6 @@ internal fun CircularIconButton(
|
|||||||
modifier = modifier
|
modifier = modifier
|
||||||
.graphicsLayer { scaleX = scale; scaleY = scale }
|
.graphicsLayer { scaleX = scale; scaleY = scale }
|
||||||
.size(size)
|
.size(size)
|
||||||
.border(
|
|
||||||
width = if (isFocused) focusedBorderWidth else focusedBorderWidth * 0,
|
|
||||||
color = borderColor,
|
|
||||||
shape = CircleShape
|
|
||||||
)
|
|
||||||
.onFocusChanged { isFocused = it.isFocused || it.hasFocus }
|
.onFocusChanged { isFocused = it.isFocused || it.hasFocus }
|
||||||
) {
|
) {
|
||||||
Icon(
|
Icon(
|
||||||
|
|||||||
@@ -0,0 +1,63 @@
|
|||||||
|
package hu.bbara.purefin.ui.common.button
|
||||||
|
|
||||||
|
import androidx.compose.animation.animateColorAsState
|
||||||
|
import androidx.compose.animation.core.animateFloatAsState
|
||||||
|
import androidx.compose.foundation.layout.height
|
||||||
|
import androidx.compose.foundation.shape.CircleShape
|
||||||
|
import androidx.compose.material3.ButtonDefaults
|
||||||
|
import androidx.compose.material3.FilledTonalButton
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
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.ui.Modifier
|
||||||
|
import androidx.compose.ui.focus.onFocusChanged
|
||||||
|
import androidx.compose.ui.graphics.Color
|
||||||
|
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
|
||||||
|
|
||||||
|
@Composable
|
||||||
|
fun CircularTextButton(
|
||||||
|
text: String,
|
||||||
|
textColor: Color,
|
||||||
|
fontSize: Int,
|
||||||
|
containerColor: Color,
|
||||||
|
size: Dp,
|
||||||
|
onClick: () -> Unit,
|
||||||
|
modifier: Modifier = Modifier,
|
||||||
|
focusedScale: Float = 1f,
|
||||||
|
focusedBackgroundColor: Color = containerColor
|
||||||
|
) {
|
||||||
|
var isFocused by remember { mutableStateOf(false) }
|
||||||
|
val scale by animateFloatAsState(
|
||||||
|
targetValue = if (isFocused) focusedScale else 1f,
|
||||||
|
label = "scale"
|
||||||
|
)
|
||||||
|
val backgroundColor by animateColorAsState(
|
||||||
|
targetValue = if (isFocused) focusedBackgroundColor else containerColor,
|
||||||
|
label = "background"
|
||||||
|
)
|
||||||
|
|
||||||
|
FilledTonalButton(
|
||||||
|
onClick = onClick,
|
||||||
|
colors = ButtonDefaults.filledTonalButtonColors(
|
||||||
|
containerColor = backgroundColor,
|
||||||
|
contentColor = textColor
|
||||||
|
),
|
||||||
|
shape = CircleShape,
|
||||||
|
modifier = modifier
|
||||||
|
.graphicsLayer { scaleX = scale; scaleY = scale }
|
||||||
|
.height(size)
|
||||||
|
.onFocusChanged { isFocused = it.isFocused || it.hasFocus }
|
||||||
|
) {
|
||||||
|
Text(
|
||||||
|
text = text,
|
||||||
|
fontSize = fontSize.sp,
|
||||||
|
fontWeight = FontWeight.Bold
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -5,7 +5,6 @@ import androidx.compose.runtime.Composable
|
|||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.graphics.vector.ImageVector
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
import androidx.compose.ui.unit.Dp
|
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
@@ -15,8 +14,6 @@ fun GhostIconButton(
|
|||||||
onClick: () -> Unit,
|
onClick: () -> Unit,
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
focusedScale: Float = 1f,
|
focusedScale: Float = 1f,
|
||||||
focusedBorderWidth: Dp = 0.dp,
|
|
||||||
focusedBorderColor: Color = Color.Transparent,
|
|
||||||
focusedBackgroundColor: Color? = null
|
focusedBackgroundColor: Color? = null
|
||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
val scheme = MaterialTheme.colorScheme
|
||||||
@@ -31,7 +28,5 @@ fun GhostIconButton(
|
|||||||
onClick = onClick,
|
onClick = onClick,
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
focusedScale = focusedScale,
|
focusedScale = focusedScale,
|
||||||
focusedBorderWidth = focusedBorderWidth,
|
|
||||||
focusedBorderColor = focusedBorderColor
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -30,7 +30,5 @@ fun MediaActionButton(
|
|||||||
onClick = onClick,
|
onClick = onClick,
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
focusedScale = focusedScale,
|
focusedScale = focusedScale,
|
||||||
focusedBorderWidth = focusedBorderWidth,
|
|
||||||
focusedBorderColor = focusedBorderColor
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import androidx.compose.runtime.Composable
|
|||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.graphics.vector.ImageVector
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
import androidx.compose.ui.unit.Dp
|
|
||||||
import androidx.compose.ui.unit.dp
|
import androidx.compose.ui.unit.dp
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
@@ -16,8 +15,6 @@ fun PurefinIconButton(
|
|||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
size: Int = 52,
|
size: Int = 52,
|
||||||
focusedScale: Float = 1f,
|
focusedScale: Float = 1f,
|
||||||
focusedBorderWidth: Dp = 0.dp,
|
|
||||||
focusedBorderColor: Color = Color.Transparent,
|
|
||||||
focusedBackgroundColor: Color? = null
|
focusedBackgroundColor: Color? = null
|
||||||
) {
|
) {
|
||||||
val scheme = MaterialTheme.colorScheme
|
val scheme = MaterialTheme.colorScheme
|
||||||
@@ -31,7 +28,5 @@ fun PurefinIconButton(
|
|||||||
onClick = onClick,
|
onClick = onClick,
|
||||||
modifier = modifier,
|
modifier = modifier,
|
||||||
focusedScale = focusedScale,
|
focusedScale = focusedScale,
|
||||||
focusedBorderWidth = focusedBorderWidth,
|
|
||||||
focusedBorderColor = focusedBorderColor
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user