Merge pull request #710 from synonymdev/fix/calculator-preview-keyboard

fix: calculator preview keyboard overlap

Author: ovitrif

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,

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")
                 )
             }
         }

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("") }
             )
         }
     }

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,18 +31,18 @@ fun CalculatorInput(
     currencySymbol: String,
     currencyName: String,
     modifier: Modifier = Modifier,
-    visualTransformation: VisualTransformation = VisualTransformation.None
+    visualTransformation: VisualTransformation = VisualTransformation.None,
 ) {
     TextInput(
         value = value,
         singleLine = true,
         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()
             )
         }
     }