Merge pull request #147 from code-payments/chore/access-key-sizing-layout

fix: handle access key sizing and layout issues

Author: bmc08gt

app/src/main/java/com/getcode/ui/components/CodeButton.kt

@@ -11,15 +11,23 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.graphics.takeOrElse
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.isSpecified
+import androidx.compose.ui.unit.isUnspecified
 import com.getcode.R
 import com.getcode.theme.*
+import com.getcode.ui.utils.addIf
+import com.getcode.ui.utils.measured
 import com.getcode.ui.utils.plus
 
 enum class ButtonState {
@@ -60,9 +68,16 @@ fun CodeButton(
         LocalMinimumInteractiveComponentEnforcement provides false,
         LocalRippleTheme provides ripple
     ) {
+
+        var size by remember {
+            mutableStateOf(DpSize.Unspecified)
+        }
+
         Button(
             onClick = onClick,
-            modifier = modifier,
+            modifier = Modifier
+                .addIf(size.isSpecified) { Modifier.size(size) }
+                .addIf(size.isUnspecified) { Modifier.measured { size = it }}.then(modifier),
             colors = colors,
             border = border,
             enabled = isEnabled,
@@ -177,7 +192,7 @@ fun getButtonBorder(buttonState: ButtonState, isEnabled: Boolean = true): Border
         if (buttonState == ButtonState.Bordered && isEnabled) {
             BorderStroke(border, White50)
         } else {
-            null
+            BorderStroke(border, Transparent)
         }
     }
 }

app/src/main/java/com/getcode/view/login/AccessKey.kt

@@ -34,6 +34,7 @@ import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.scale
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
@@ -42,6 +43,8 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.isSpecified
+import androidx.compose.ui.unit.isUnspecified
 import androidx.hilt.navigation.compose.hiltViewModel
 import com.getcode.LocalTopBarPadding
 import com.getcode.R
@@ -60,6 +63,8 @@ import com.getcode.ui.components.CodeButton
 import com.getcode.ui.components.PermissionCheck
 import com.getcode.ui.components.getPermissionLauncher
 import com.getcode.ui.components.rememberSelectionState
+import com.getcode.ui.utils.addIf
+import com.getcode.ui.utils.debugBounds
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Preview
@@ -145,16 +150,15 @@ fun AccessKey(
                     .fillMaxSize()
                     .padding(horizontal = CodeTheme.dimens.inset)
                     .padding(vertical = CodeTheme.dimens.grid.x4)
-                    .measured { buttonHeight = it.height },
             ) {
-                Column(modifier = Modifier
-                    .align(Alignment.BottomCenter)
-                    .measured { buttonHeight = it.height }) {
+                Column(
+                    modifier = Modifier
+                        .align(Alignment.BottomCenter)
+                        .measured { buttonHeight = it.height },
+                ) {
                     CodeButton(
                         modifier = Modifier.fillMaxWidth(),
-                        onClick = {
-                            onExportClick()
-                        },
+                        onClick = onExportClick,
                         text = stringResource(R.string.action_saveAccessKey),
                         buttonState = ButtonState.Filled,
                         isLoading = dataState.isLoading,
@@ -191,7 +195,7 @@ fun AccessKey(
                 .align(Alignment.TopCenter)
                 .fillMaxHeight()
                 .padding(LocalTopBarPadding.current)
-                .padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4),
+                .addIf(buttonHeight.isSpecified) { Modifier.padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4) },
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
             Column(
@@ -211,7 +215,6 @@ fun AccessKey(
                     dataState.accessKeyCroppedBitmap?.let { bitmap ->
                         Image(
                             modifier = Modifier
-                                .aspectRatio(0.607f, matchHeightConstraintsFirst = true)
                                 .fillMaxWidth()
                                 .weight(1f)
                                 .scale(selectionState.scale.value),
@@ -231,7 +234,7 @@ fun AccessKey(
             Text(
                 modifier = Modifier
                     .alpha(textAlpha)
-                    .padding(vertical = CodeTheme.dimens.grid.x2),
+                    .padding(bottom = CodeTheme.dimens.grid.x6),
                 style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
                 color = White,
                 text = stringResource(R.string.subtitle_accessKeyDescription)

app/src/main/java/com/getcode/view/main/account/BackupKey.kt

@@ -34,7 +34,10 @@ import androidx.compose.ui.graphics.asImageBitmap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.isSpecified
+import com.getcode.LocalTopBarPadding
 import com.getcode.R
 import com.getcode.manager.TopBarManager
 import com.getcode.navigation.core.LocalCodeNavigator
@@ -49,6 +52,8 @@ import com.getcode.ui.components.CodeButton
 import com.getcode.ui.components.PermissionCheck
 import com.getcode.ui.components.getPermissionLauncher
 import com.getcode.ui.components.rememberSelectionState
+import com.getcode.ui.utils.addIf
+import com.getcode.ui.utils.debugBounds
 
 @Composable
 fun BackupKey(
@@ -103,11 +108,11 @@ fun BackupKey(
 
 
     var buttonHeight by remember {
-        mutableStateOf(0.dp)
+        mutableStateOf(Dp.Unspecified)
     }
 
     var textHeight by remember {
-        mutableStateOf(0.dp)
+        mutableStateOf(Dp.Unspecified)
     }
 
     val selectionState = rememberSelectionState(
@@ -163,29 +168,35 @@ fun BackupKey(
         Column(
             modifier = Modifier
                 .align(Alignment.TopCenter)
-                // highly specific aspect ratio from iOS :)
-                .aspectRatio(0.607f, matchHeightConstraintsFirst = true)
                 .fillMaxHeight()
-                .padding(vertical = CodeTheme.dimens.grid.x4)
-                .padding(top = textHeight)
-                .padding(bottom = buttonHeight),
-            verticalArrangement = Arrangement.Center,
+                .addIf(textHeight.isSpecified) { Modifier.padding(top = textHeight) }
+                .addIf(buttonHeight.isSpecified) { Modifier.padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4) },
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            AnimatedVisibility(
-                visibleState = isAccessKeyVisible,
-                enter = fadeIn(animationSpec = tween(300, 0)),
-                exit = fadeOut(animationSpec = tween(300, 0))
+            Column(
+                modifier = Modifier
+                    // highly specific aspect ratio from iOS :)
+                    .aspectRatio(0.607f, matchHeightConstraintsFirst = true)
+                    .fillMaxWidth()
+                    .weight(1f),
+                verticalArrangement = Arrangement.Center,
+                horizontalAlignment = Alignment.CenterHorizontally
             ) {
-                dataState.accessKeyCroppedBitmap?.let { bitmap ->
-                    Image(
-                        modifier = Modifier
-                            .fillMaxWidth()
-                            .weight(1f)
-                            .scale(selectionState.scale.value),
-                        bitmap = bitmap.asImageBitmap(),
-                        contentDescription = dataState.wordsFormatted,
-                    )
+                AnimatedVisibility(
+                    visibleState = isAccessKeyVisible,
+                    enter = fadeIn(animationSpec = tween(300, 0)),
+                    exit = fadeOut(animationSpec = tween(300, 0))
+                ) {
+                    dataState.accessKeyCroppedBitmap?.let { bitmap ->
+                        Image(
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .weight(1f)
+                                .scale(selectionState.scale.value),
+                            bitmap = bitmap.asImageBitmap(),
+                            contentDescription = dataState.wordsFormatted,
+                        )
+                    }
                 }
             }
         }