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.*
|
||||||
import androidx.compose.animation.core.*
|
import androidx.compose.animation.core.*
|
||||||
import androidx.compose.foundation.*
|
import androidx.compose.foundation.*
|
||||||
|
import androidx.compose.foundation.interaction.MutableInteractionSource
|
||||||
import androidx.compose.foundation.layout.*
|
import androidx.compose.foundation.layout.*
|
||||||
import androidx.compose.foundation.layout.WindowInsets
|
import androidx.compose.foundation.layout.WindowInsets
|
||||||
import androidx.compose.foundation.layout.asPaddingValues
|
import androidx.compose.foundation.layout.asPaddingValues
|
||||||
@@ -27,6 +28,7 @@ import androidx.compose.ui.Alignment
|
|||||||
import androidx.compose.ui.Modifier
|
import androidx.compose.ui.Modifier
|
||||||
import androidx.compose.ui.draw.clip
|
import androidx.compose.ui.draw.clip
|
||||||
import androidx.compose.ui.draw.drawBehind
|
import androidx.compose.ui.draw.drawBehind
|
||||||
|
import androidx.compose.ui.draw.shadow
|
||||||
import androidx.compose.ui.geometry.Offset
|
import androidx.compose.ui.geometry.Offset
|
||||||
import androidx.compose.ui.graphics.Color
|
import androidx.compose.ui.graphics.Color
|
||||||
import androidx.compose.ui.graphics.graphicsLayer
|
import androidx.compose.ui.graphics.graphicsLayer
|
||||||
@@ -1065,23 +1067,67 @@ private fun TelegramBiometricItem(
|
|||||||
|
|
||||||
Spacer(modifier = Modifier.width(20.dp))
|
Spacer(modifier = Modifier.width(20.dp))
|
||||||
|
|
||||||
|
Column(modifier = Modifier.weight(1f)) {
|
||||||
Text(
|
Text(
|
||||||
text = "Biometric Authentication",
|
text = "Biometric Authentication",
|
||||||
fontSize = 16.sp,
|
fontSize = 16.sp,
|
||||||
color = textColor,
|
color = textColor
|
||||||
modifier = Modifier.weight(1f)
|
|
||||||
)
|
)
|
||||||
|
|
||||||
Switch(
|
if (isEnabled) {
|
||||||
checked = isEnabled,
|
Text(
|
||||||
onCheckedChange = { onToggle() },
|
text = "Face ID / Touch ID",
|
||||||
colors = SwitchDefaults.colors(
|
fontSize = 13.sp,
|
||||||
checkedThumbColor = Color.White,
|
color = textColor.copy(alpha = 0.5f),
|
||||||
checkedTrackColor = primaryBlue,
|
modifier = Modifier.padding(top = 2.dp)
|
||||||
uncheckedThumbColor = Color.White,
|
|
||||||
uncheckedTrackColor = if (isDarkTheme) Color(0xFF3A3A3A) else Color(0xFFE0E0E0)
|
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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