From 06481327fdd59e7bd3b8627239cc5f5f0c1af4d1 Mon Sep 17 00:00:00 2001 From: Tangem Date: Sun, 7 Aug 2022 22:32:40 +0400 Subject: [PATCH] Updated on 2026-08-14 --- .../ui/appsettings/AppSettingsScreen.kt | 13 +- .../details/ui/common/TangemSwitch.kt | 157 +++++++++++------- .../details/ui/details/DetailsViewModel.kt | 1 + 3 files changed, 97 insertions(+), 74 deletions(-) diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/appsettings/AppSettingsScreen.kt b/app/src/main/java/com/tangem/tap/features/details/ui/appsettings/AppSettingsScreen.kt index 71f13c39b4..9b1dd4af03 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/appsettings/AppSettingsScreen.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/appsettings/AppSettingsScreen.kt @@ -11,8 +11,6 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.shape.CornerSize import androidx.compose.material.AlertDialog import androidx.compose.material.MaterialTheme -import androidx.compose.material.Switch -import androidx.compose.material.SwitchDefaults import androidx.compose.material.Text import androidx.compose.material.TextButton import androidx.compose.runtime.Composable @@ -31,6 +29,7 @@ import androidx.compose.ui.unit.sp import com.tangem.tap.common.compose.TangemTypography import com.tangem.tap.features.details.redux.PrivacySetting import com.tangem.tap.features.details.ui.common.SettingsScreensScaffold +import com.tangem.tap.features.details.ui.common.TangemSwitch import com.tangem.wallet.R @Composable @@ -125,7 +124,7 @@ fun AppSettingsElement( color = colorResource(id = R.color.text_secondary), ) } - Switch( + TangemSwitch( checked = checked, onCheckedChange = { onCheckedChange( @@ -135,14 +134,8 @@ fun AppSettingsElement( onDialogStateChange = onDialogStateChange, ) }, - colors = SwitchDefaults.colors( - checkedThumbColor = colorResource(id = R.color.control_key), - uncheckedThumbColor = colorResource(id = R.color.control_key), - checkedTrackColor = colorResource(id = R.color.control_checked), - uncheckedTrackColor = colorResource(id = R.color.icon_informative), - ), modifier = modifier - .padding(start = 20.dp, end = 20.dp), + .padding(20.dp), ) } } diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/common/TangemSwitch.kt b/app/src/main/java/com/tangem/tap/features/details/ui/common/TangemSwitch.kt index 02b698421a..3132bb6fcc 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/common/TangemSwitch.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/common/TangemSwitch.kt @@ -1,87 +1,116 @@ package com.tangem.tap.features.details.ui.common -import androidx.compose.animation.core.animateFloatAsState -import androidx.compose.foundation.Canvas -import androidx.compose.foundation.gestures.detectTapGestures -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.fillMaxSize +import androidx.compose.animation.animateColor +import androidx.compose.animation.core.FastOutLinearInEasing +import androidx.compose.animation.core.LinearOutSlowInEasing +import androidx.compose.animation.core.animateDp +import androidx.compose.animation.core.tween +import androidx.compose.animation.core.updateTransition +import androidx.compose.foundation.BorderStroke +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.indication +import androidx.compose.foundation.interaction.MutableInteractionSource +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.offset +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.Card +import androidx.compose.material.ripple.rememberRipple import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.geometry.CornerRadius -import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.drawscope.Fill -import androidx.compose.ui.input.pointer.pointerInput -import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.res.colorResource -import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp import com.tangem.wallet.R @Composable fun TangemSwitch( - checked: Boolean, - onCheckedChange: (Boolean) -> Unit, modifier: Modifier = Modifier, - width: Dp = 48.dp, - height: Dp = 24.dp, - checkedTrackColor: Color = colorResource(id = R.color.control_checked), - uncheckedTrackColor: Color = colorResource(id = R.color.icon_informative), - selectorColor: Color = colorResource(id = R.color.background_secondary), - gapBetweenThumbAndTrackEdge: Dp = 3.dp, + enabledColor: Color = colorResource(id = R.color.control_checked), + disabledColor: Color = colorResource(id = R.color.icon_informative), + size: Dp = 48.dp, + checked: Boolean = false, + onCheckedChange: (Boolean) -> Unit, ) { - val thumbRadius = (height / 2) - gapBetweenThumbAndTrackEdge - val animatePosition = animateFloatAsState( - targetValue = if (checked) - with(LocalDensity.current) { (width - thumbRadius - gapBetweenThumbAndTrackEdge).toPx() } - else - with(LocalDensity.current) { (thumbRadius + gapBetweenThumbAndTrackEdge).toPx() }, - ) - - Canvas( - modifier = modifier - .size(width = width, height = height) - .pointerInput(Unit) { - detectTapGestures( - onTap = { - onCheckedChange(checked) - }, - ) - }, + val transition = updateTransition(checked, label = "SwitchState") + val color by transition.animateColor( + transitionSpec = { + tween(200, easing = FastOutLinearInEasing) + }, + label = "", ) { - drawRoundRect( - color = if (checked) checkedTrackColor else uncheckedTrackColor, - cornerRadius = CornerRadius(x = 35.dp.toPx(), y = 35.dp.toPx()), - style = Fill, - ) - - drawCircle( - color = selectorColor, - radius = thumbRadius.toPx(), - center = Offset( - x = animatePosition.value, - y = size.height / 2, - ), - ) + when (it) { + true -> enabledColor + false -> disabledColor + } + } + val interactionSource = remember { MutableInteractionSource() } + val clickable = Modifier.clickable( + interactionSource = interactionSource, + indication = null, + ) { + if (!checked) { + onCheckedChange(true) + } else { + onCheckedChange(false) + } } - Spacer(modifier = Modifier.height(18.dp)) -} - -@Preview -@Composable -fun TangemSwitchPreview() { - Column( - modifier = Modifier.fillMaxSize(), - verticalArrangement = Arrangement.Center, - horizontalAlignment = Alignment.CenterHorizontally, + Box( + modifier = Modifier + .then(clickable) + .indication( + interactionSource = MutableInteractionSource(), + indication = rememberRipple( + bounded = true, + radius = 100.dp, + color = Color.Transparent, + ), + ), ) { - TangemSwitch(true, {}) + BoxWithConstraints( + modifier = modifier + .width(size) + .height(size / 2) + .indication(MutableInteractionSource(), null) + .background(color = color, shape = RoundedCornerShape(100)), + contentAlignment = Alignment.CenterStart, + ) { + val roundCardSize = this.maxWidth / 2 + val xOffset by transition.animateDp( + transitionSpec = { + tween(150, easing = LinearOutSlowInEasing) + }, + label = "xOffset", + ) { state -> + when (state) { + false -> 0.dp + true -> this.maxWidth - roundCardSize + } + } + + Card( + modifier = Modifier + .size(this.maxWidth / 2) + .offset(x = xOffset, y = 0.dp) + .padding(3.dp), + shape = RoundedCornerShape(100), + backgroundColor = Color.White, + border = BorderStroke( + if (!checked) 0.5.dp else 0.dp, + color = Color.LightGray, + ), + ) { + } + } } } \ No newline at end of file diff --git a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsViewModel.kt b/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsViewModel.kt index 9e6dc602e2..ecb6a30a0b 100644 --- a/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsViewModel.kt +++ b/app/src/main/java/com/tangem/tap/features/details/ui/details/DetailsViewModel.kt @@ -28,6 +28,7 @@ class DetailsViewModel(private val store: Store) { SettingsElement.PrivacyPolicy -> { if (state.privacyPolicyUrl != null) it else null } + SettingsElement.AppSettings -> null // TODO: until we implement settings from this screen else -> it } }