feat: Enhance biometric authentication switch with animated UI and improved styling
This commit is contained in:
@@ -11,6 +11,7 @@ import androidx.activity.result.contract.ActivityResultContracts
|
||||
import androidx.compose.animation.*
|
||||
import androidx.compose.animation.core.*
|
||||
import androidx.compose.foundation.*
|
||||
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||
import androidx.compose.foundation.layout.*
|
||||
import androidx.compose.foundation.layout.WindowInsets
|
||||
import androidx.compose.foundation.layout.asPaddingValues
|
||||
@@ -27,6 +28,7 @@ import androidx.compose.ui.Alignment
|
||||
import androidx.compose.ui.Modifier
|
||||
import androidx.compose.ui.draw.clip
|
||||
import androidx.compose.ui.draw.drawBehind
|
||||
import androidx.compose.ui.draw.shadow
|
||||
import androidx.compose.ui.geometry.Offset
|
||||
import androidx.compose.ui.graphics.Color
|
||||
import androidx.compose.ui.graphics.graphicsLayer
|
||||
@@ -1065,23 +1067,67 @@ private fun TelegramBiometricItem(
|
||||
|
||||
Spacer(modifier = Modifier.width(20.dp))
|
||||
|
||||
Column(modifier = Modifier.weight(1f)) {
|
||||
Text(
|
||||
text = "Biometric Authentication",
|
||||
fontSize = 16.sp,
|
||||
color = textColor,
|
||||
modifier = Modifier.weight(1f)
|
||||
color = textColor
|
||||
)
|
||||
|
||||
Switch(
|
||||
checked = isEnabled,
|
||||
onCheckedChange = { onToggle() },
|
||||
colors = SwitchDefaults.colors(
|
||||
checkedThumbColor = Color.White,
|
||||
checkedTrackColor = primaryBlue,
|
||||
uncheckedThumbColor = Color.White,
|
||||
uncheckedTrackColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
|
||||
if (isEnabled) {
|
||||
Text(
|
||||
text = "Face ID / Touch ID",
|
||||
fontSize = 13.sp,
|
||||
color = textColor.copy(alpha = 0.5f),
|
||||
modifier = Modifier.padding(top = 2.dp)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// iOS-style animated switch
|
||||
val animatedThumbOffset by animateFloatAsState(
|
||||
targetValue = if (isEnabled) 1f else 0f,
|
||||
animationSpec = spring(
|
||||
dampingRatio = Spring.DampingRatioMediumBouncy,
|
||||
stiffness = Spring.StiffnessLow
|
||||
),
|
||||
label = "switchThumb"
|
||||
)
|
||||
|
||||
val trackColor by animateColorAsState(
|
||||
targetValue = if (isEnabled) primaryBlue else
|
||||
if (isDarkTheme) Color(0xFF39393D) else Color(0xFFE9E9EA),
|
||||
animationSpec = tween(300),
|
||||
label = "trackColor"
|
||||
)
|
||||
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.width(51.dp)
|
||||
.height(31.dp)
|
||||
.clip(RoundedCornerShape(15.5.dp))
|
||||
.background(trackColor)
|
||||
.clickable(
|
||||
interactionSource = remember { MutableInteractionSource() },
|
||||
indication = null,
|
||||
onClick = { onToggle() }
|
||||
)
|
||||
.padding(2.dp)
|
||||
) {
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(27.dp)
|
||||
.align(Alignment.CenterStart)
|
||||
.offset(x = (20.dp * animatedThumbOffset))
|
||||
.shadow(
|
||||
elevation = if (isEnabled) 3.dp else 2.dp,
|
||||
shape = CircleShape,
|
||||
spotColor = Color.Black.copy(alpha = 0.15f)
|
||||
)
|
||||
.clip(CircleShape)
|
||||
.background(Color.White)
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user