diff --git a/app/src/main/java/to/bitkit/ui/components/TextInput.kt b/app/src/main/java/to/bitkit/ui/components/TextInput.kt index 390f2ae7a..ed89f9542 100644 --- a/app/src/main/java/to/bitkit/ui/components/TextInput.kt +++ b/app/src/main/java/to/bitkit/ui/components/TextInput.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions import androidx.compose.material3.Text import androidx.compose.material3.TextField +import androidx.compose.material3.TextFieldColors import androidx.compose.runtime.Composable import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue @@ -46,6 +47,7 @@ fun TextInput( supportingText: @Composable (() -> Unit)? = null, visualTransformation: VisualTransformation = VisualTransformation.None, textStyle: TextStyle = AppTextStyles.BodySSB, + colors: TextFieldColors = AppTextFieldDefaults.semiTransparent, ) { var textFieldValue by remember { mutableStateOf(TextFieldValue(value)) } @@ -75,7 +77,7 @@ fun TextInput( maxLines = maxLines, minLines = minLines, singleLine = singleLine, - colors = AppTextFieldDefaults.semiTransparent, + colors = colors, shape = AppShapes.small, keyboardOptions = keyboardOptions, keyboardActions = keyboardActions, diff --git a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/CalculatorPreviewScreen.kt b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/CalculatorPreviewScreen.kt index 0a9678b65..1a542baa6 100644 --- a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/CalculatorPreviewScreen.kt +++ b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/CalculatorPreviewScreen.kt @@ -1,11 +1,13 @@ package to.bitkit.ui.screens.widgets.calculator +import androidx.compose.animation.AnimatedVisibility +import androidx.compose.animation.expandVertically +import androidx.compose.animation.shrinkVertically import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.imePadding import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width @@ -26,16 +28,19 @@ import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel import androidx.lifecycle.compose.collectAsStateWithLifecycle import to.bitkit.R import to.bitkit.ui.components.BodyM +import to.bitkit.ui.components.FillHeight import to.bitkit.ui.components.Headline import to.bitkit.ui.components.PrimaryButton import to.bitkit.ui.components.SecondaryButton import to.bitkit.ui.components.Text13Up +import to.bitkit.ui.components.VerticalSpacer import to.bitkit.ui.scaffold.AppTopBar import to.bitkit.ui.scaffold.DrawerNavIcon -import to.bitkit.ui.scaffold.ScreenColumn import to.bitkit.ui.screens.widgets.calculator.components.CalculatorCard +import to.bitkit.ui.shared.util.screen import to.bitkit.ui.theme.AppThemeSurface import to.bitkit.ui.theme.Colors +import to.bitkit.ui.utils.keyboardAsState import to.bitkit.viewmodels.CurrencyViewModel @Composable @@ -73,8 +78,12 @@ fun CalculatorPreviewContent( currencyViewModel: CurrencyViewModel?, isCalculatorWidgetEnabled: Boolean, ) { - ScreenColumn( - modifier = Modifier.testTag("facts_preview_screen") + val isKeyboardVisible by keyboardAsState() + + Column( + modifier = Modifier + .screen() + .testTag("facts_preview_screen") ) { AppTopBar( titleText = stringResource(R.string.widgets__widget__nav_title), @@ -84,47 +93,58 @@ fun CalculatorPreviewContent( Column( modifier = Modifier + .imePadding() .padding(horizontal = 16.dp) .testTag("main_content") ) { - Spacer(modifier = Modifier.height(26.dp)) - - Row( - modifier = Modifier - .fillMaxWidth() - .testTag("header_row"), - verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.SpaceBetween + AnimatedVisibility( + visible = !isKeyboardVisible, + enter = expandVertically(), + exit = shrinkVertically(), ) { - Headline( - text = AnnotatedString(stringResource(R.string.widgets__calculator__name)), - modifier = Modifier - .width(200.dp) - .testTag("widget_title") - ) - Icon( - painter = painterResource(R.drawable.widget_math_operation), - contentDescription = null, - tint = Color.Unspecified, - modifier = Modifier - .size(64.dp) - .testTag("widget_icon") - ) - } + Column { + VerticalSpacer(26.dp) - BodyM( - text = stringResource(R.string.widgets__facts__description), - color = Colors.White64, - modifier = Modifier - .padding(vertical = 16.dp) - .testTag("widget_description") - ) + Row( + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, + modifier = Modifier + .fillMaxWidth() + .testTag("header_row") + ) { + Headline( + text = AnnotatedString(stringResource(R.string.widgets__calculator__name)), + modifier = Modifier + .width(200.dp) + .testTag("widget_title") + ) + Icon( + painter = painterResource(R.drawable.widget_math_operation), + contentDescription = null, + tint = Color.Unspecified, + modifier = Modifier + .size(64.dp) + .testTag("widget_icon") + ) + } - HorizontalDivider( - modifier = Modifier.testTag("divider") - ) + BodyM( + text = stringResource(R.string.widgets__facts__description), + color = Colors.White64, + modifier = Modifier + .padding(vertical = 16.dp) + .testTag("widget_description") + ) - Spacer(modifier = Modifier.weight(1f)) + HorizontalDivider( + modifier = Modifier.testTag("divider") + ) + } + } + + if (!isKeyboardVisible) { + FillHeight() + } Text13Up( stringResource(R.string.common__preview), @@ -136,37 +156,37 @@ fun CalculatorPreviewContent( currencyViewModel?.let { CalculatorCard( - modifier = Modifier.fillMaxWidth(), showWidgetTitle = showWidgetTitles, - currencyViewModel = it + currencyViewModel = it, + modifier = Modifier.fillMaxWidth() ) } Row( + horizontalArrangement = Arrangement.spacedBy(16.dp), modifier = Modifier .padding(vertical = 21.dp) .fillMaxWidth() - .testTag("buttons_row"), - horizontalArrangement = Arrangement.spacedBy(16.dp) + .testTag("buttons_row") ) { if (isCalculatorWidgetEnabled) { SecondaryButton( text = stringResource(R.string.common__delete), + fullWidth = false, + onClick = onClickDelete, modifier = Modifier .weight(1f) - .testTag("WidgetDelete"), - fullWidth = false, - onClick = onClickDelete + .testTag("WidgetDelete") ) } PrimaryButton( text = stringResource(R.string.common__save), + fullWidth = false, + onClick = onClickSave, modifier = Modifier .weight(1f) - .testTag("WidgetSave"), - fullWidth = false, - onClick = onClickSave + .testTag("WidgetSave") ) } } diff --git a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorCard.kt b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorCard.kt index 7888d6000..85797afff 100644 --- a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorCard.kt +++ b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorCard.kt @@ -101,7 +101,7 @@ fun CalculatorCardContent( Box( modifier = modifier .clip(shape = MaterialTheme.shapes.medium) - .background(Colors.White10) + .background(Colors.Gray6) ) { Column( modifier = Modifier @@ -129,14 +129,14 @@ fun CalculatorCardContent( // Fiat input with decimal transformation CalculatorInput( - modifier = Modifier - .fillMaxWidth() - .onFocusChanged { focusState -> if (focusState.hasFocus) onFiatChange("") }, value = fiatValue, onValueChange = onFiatChange, currencySymbol = fiatSymbol, currencyName = fiatName, - visualTransformation = MonetaryVisualTransformation(decimalPlaces = 2) + visualTransformation = MonetaryVisualTransformation(decimalPlaces = 2), + modifier = Modifier + .fillMaxWidth() + .onFocusChanged { focusState -> if (focusState.hasFocus) onFiatChange("") } ) } } diff --git a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorInput.kt b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorInput.kt index dbc43b51c..182cd5c72 100644 --- a/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorInput.kt +++ b/app/src/main/java/to/bitkit/ui/screens/widgets/calculator/components/CalculatorInput.kt @@ -20,6 +20,7 @@ import androidx.compose.ui.unit.dp import to.bitkit.ui.components.BodyMSB import to.bitkit.ui.components.CaptionB import to.bitkit.ui.components.TextInput +import to.bitkit.ui.theme.AppTextFieldDefaults import to.bitkit.ui.theme.AppThemeSurface import to.bitkit.ui.theme.Colors @@ -30,7 +31,7 @@ fun CalculatorInput( currencySymbol: String, currencyName: String, modifier: Modifier = Modifier, - visualTransformation: VisualTransformation = VisualTransformation.None + visualTransformation: VisualTransformation = VisualTransformation.None, ) { TextInput( value = value, @@ -38,10 +39,10 @@ fun CalculatorInput( onValueChange = onValueChange, leadingIcon = { Box( + contentAlignment = Alignment.Center, modifier = Modifier - .background(color = Colors.White10, shape = CircleShape) - .size(32.dp), - contentAlignment = Alignment.Center + .background(color = Colors.Gray6, shape = CircleShape) + .size(32.dp) ) { BodyMSB(currencySymbol, color = Colors.Brand) } @@ -50,8 +51,12 @@ fun CalculatorInput( keyboardType = KeyboardType.Number ), suffix = { CaptionB(currencyName.uppercase(), color = Colors.Gray1) }, - modifier = modifier, - visualTransformation = visualTransformation + colors = AppTextFieldDefaults.noIndicatorColors.copy( + focusedContainerColor = Colors.Black, + unfocusedContainerColor = Colors.Black + ), + visualTransformation = visualTransformation, + modifier = modifier ) } @@ -60,22 +65,24 @@ fun CalculatorInput( private fun Preview() { AppThemeSurface { Column( - modifier = Modifier.fillMaxSize().padding(16.dp), - verticalArrangement = Arrangement.spacedBy(16.dp) + verticalArrangement = Arrangement.spacedBy(16.dp), + modifier = Modifier + .fillMaxSize() + .padding(16.dp) ) { CalculatorInput( - modifier = Modifier.fillMaxWidth(), value = "100000", onValueChange = {}, currencySymbol = "₿", - currencyName = "BITCOIN" + currencyName = "BITCOIN", + modifier = Modifier.fillMaxWidth() ) CalculatorInput( - modifier = Modifier.fillMaxWidth(), value = "4.55", onValueChange = {}, currencySymbol = "$", - currencyName = "USD" + currencyName = "USD", + modifier = Modifier.fillMaxWidth() ) } }