Skip to content

Commit 4853ce4

Browse files
bmc08gtbmc08gt
committed
fix: handle access key sizing and layout issues
Signed-off-by: Brandon McAnsh <git@bmcreations.dev>
1 parent 8af9131 commit 4853ce4

3 files changed

Lines changed: 62 additions & 33 deletions

File tree

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

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,15 +11,23 @@ import androidx.compose.runtime.Composable
1111
import androidx.compose.runtime.CompositionLocalProvider
1212
import androidx.compose.runtime.derivedStateOf
1313
import androidx.compose.runtime.getValue
14+
import androidx.compose.runtime.mutableStateOf
1415
import androidx.compose.runtime.remember
16+
import androidx.compose.runtime.setValue
1517
import androidx.compose.ui.Modifier
1618
import androidx.compose.ui.graphics.Color
1719
import androidx.compose.ui.graphics.Shape
1820
import androidx.compose.ui.graphics.takeOrElse
1921
import androidx.compose.ui.res.painterResource
22+
import androidx.compose.ui.unit.Dp
23+
import androidx.compose.ui.unit.DpSize
2024
import androidx.compose.ui.unit.dp
25+
import androidx.compose.ui.unit.isSpecified
26+
import androidx.compose.ui.unit.isUnspecified
2127
import com.getcode.R
2228
import com.getcode.theme.*
29+
import com.getcode.ui.utils.addIf
30+
import com.getcode.ui.utils.measured
2331
import com.getcode.ui.utils.plus
2432

2533
enum class ButtonState {
@@ -60,9 +68,16 @@ fun CodeButton(
6068
LocalMinimumInteractiveComponentEnforcement provides false,
6169
LocalRippleTheme provides ripple
6270
) {
71+
72+
var size by remember {
73+
mutableStateOf(DpSize.Unspecified)
74+
}
75+
6376
Button(
6477
onClick = onClick,
65-
modifier = modifier,
78+
modifier = Modifier
79+
.addIf(size.isSpecified) { Modifier.size(size) }
80+
.addIf(size.isUnspecified) { Modifier.measured { size = it }}.then(modifier),
6681
colors = colors,
6782
border = border,
6883
enabled = isEnabled,
@@ -177,7 +192,7 @@ fun getButtonBorder(buttonState: ButtonState, isEnabled: Boolean = true): Border
177192
if (buttonState == ButtonState.Bordered && isEnabled) {
178193
BorderStroke(border, White50)
179194
} else {
180-
null
195+
BorderStroke(border, Transparent)
181196
}
182197
}
183198
}

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

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import androidx.compose.ui.ExperimentalComposeUiApi
3434
import androidx.compose.ui.Modifier
3535
import androidx.compose.ui.draw.alpha
3636
import androidx.compose.ui.draw.scale
37+
import androidx.compose.ui.graphics.Color
3738
import androidx.compose.ui.graphics.asImageBitmap
3839
import androidx.compose.ui.layout.ContentScale
3940
import androidx.compose.ui.platform.LocalContext
@@ -42,6 +43,8 @@ import androidx.compose.ui.res.stringResource
4243
import androidx.compose.ui.text.style.TextAlign
4344
import androidx.compose.ui.tooling.preview.Preview
4445
import androidx.compose.ui.unit.dp
46+
import androidx.compose.ui.unit.isSpecified
47+
import androidx.compose.ui.unit.isUnspecified
4548
import androidx.hilt.navigation.compose.hiltViewModel
4649
import com.getcode.LocalTopBarPadding
4750
import com.getcode.R
@@ -60,6 +63,8 @@ import com.getcode.ui.components.CodeButton
6063
import com.getcode.ui.components.PermissionCheck
6164
import com.getcode.ui.components.getPermissionLauncher
6265
import com.getcode.ui.components.rememberSelectionState
66+
import com.getcode.ui.utils.addIf
67+
import com.getcode.ui.utils.debugBounds
6368

6469
@OptIn(ExperimentalComposeUiApi::class)
6570
@Preview
@@ -145,16 +150,15 @@ fun AccessKey(
145150
.fillMaxSize()
146151
.padding(horizontal = CodeTheme.dimens.inset)
147152
.padding(vertical = CodeTheme.dimens.grid.x4)
148-
.measured { buttonHeight = it.height },
149153
) {
150-
Column(modifier = Modifier
151-
.align(Alignment.BottomCenter)
152-
.measured { buttonHeight = it.height }) {
154+
Column(
155+
modifier = Modifier
156+
.align(Alignment.BottomCenter)
157+
.measured { buttonHeight = it.height },
158+
) {
153159
CodeButton(
154160
modifier = Modifier.fillMaxWidth(),
155-
onClick = {
156-
onExportClick()
157-
},
161+
onClick = onExportClick,
158162
text = stringResource(R.string.action_saveAccessKey),
159163
buttonState = ButtonState.Filled,
160164
isLoading = dataState.isLoading,
@@ -191,7 +195,7 @@ fun AccessKey(
191195
.align(Alignment.TopCenter)
192196
.fillMaxHeight()
193197
.padding(LocalTopBarPadding.current)
194-
.padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4),
198+
.addIf(buttonHeight.isSpecified) { Modifier.padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4) },
195199
horizontalAlignment = Alignment.CenterHorizontally
196200
) {
197201
Column(
@@ -211,7 +215,6 @@ fun AccessKey(
211215
dataState.accessKeyCroppedBitmap?.let { bitmap ->
212216
Image(
213217
modifier = Modifier
214-
.aspectRatio(0.607f, matchHeightConstraintsFirst = true)
215218
.fillMaxWidth()
216219
.weight(1f)
217220
.scale(selectionState.scale.value),
@@ -231,7 +234,7 @@ fun AccessKey(
231234
Text(
232235
modifier = Modifier
233236
.alpha(textAlpha)
234-
.padding(vertical = CodeTheme.dimens.grid.x2),
237+
.padding(bottom = CodeTheme.dimens.grid.x6),
235238
style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
236239
color = White,
237240
text = stringResource(R.string.subtitle_accessKeyDescription)

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

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,10 @@ import androidx.compose.ui.graphics.asImageBitmap
3434
import androidx.compose.ui.platform.LocalContext
3535
import androidx.compose.ui.res.stringResource
3636
import androidx.compose.ui.text.style.TextAlign
37+
import androidx.compose.ui.unit.Dp
3738
import androidx.compose.ui.unit.dp
39+
import androidx.compose.ui.unit.isSpecified
40+
import com.getcode.LocalTopBarPadding
3841
import com.getcode.R
3942
import com.getcode.manager.TopBarManager
4043
import com.getcode.navigation.core.LocalCodeNavigator
@@ -49,6 +52,8 @@ import com.getcode.ui.components.CodeButton
4952
import com.getcode.ui.components.PermissionCheck
5053
import com.getcode.ui.components.getPermissionLauncher
5154
import com.getcode.ui.components.rememberSelectionState
55+
import com.getcode.ui.utils.addIf
56+
import com.getcode.ui.utils.debugBounds
5257

5358
@Composable
5459
fun BackupKey(
@@ -103,11 +108,11 @@ fun BackupKey(
103108

104109

105110
var buttonHeight by remember {
106-
mutableStateOf(0.dp)
111+
mutableStateOf(Dp.Unspecified)
107112
}
108113

109114
var textHeight by remember {
110-
mutableStateOf(0.dp)
115+
mutableStateOf(Dp.Unspecified)
111116
}
112117

113118
val selectionState = rememberSelectionState(
@@ -163,29 +168,35 @@ fun BackupKey(
163168
Column(
164169
modifier = Modifier
165170
.align(Alignment.TopCenter)
166-
// highly specific aspect ratio from iOS :)
167-
.aspectRatio(0.607f, matchHeightConstraintsFirst = true)
168171
.fillMaxHeight()
169-
.padding(vertical = CodeTheme.dimens.grid.x4)
170-
.padding(top = textHeight)
171-
.padding(bottom = buttonHeight),
172-
verticalArrangement = Arrangement.Center,
172+
.addIf(textHeight.isSpecified) { Modifier.padding(top = textHeight) }
173+
.addIf(buttonHeight.isSpecified) { Modifier.padding(bottom = buttonHeight + CodeTheme.dimens.grid.x4) },
173174
horizontalAlignment = Alignment.CenterHorizontally
174175
) {
175-
AnimatedVisibility(
176-
visibleState = isAccessKeyVisible,
177-
enter = fadeIn(animationSpec = tween(300, 0)),
178-
exit = fadeOut(animationSpec = tween(300, 0))
176+
Column(
177+
modifier = Modifier
178+
// highly specific aspect ratio from iOS :)
179+
.aspectRatio(0.607f, matchHeightConstraintsFirst = true)
180+
.fillMaxWidth()
181+
.weight(1f),
182+
verticalArrangement = Arrangement.Center,
183+
horizontalAlignment = Alignment.CenterHorizontally
179184
) {
180-
dataState.accessKeyCroppedBitmap?.let { bitmap ->
181-
Image(
182-
modifier = Modifier
183-
.fillMaxWidth()
184-
.weight(1f)
185-
.scale(selectionState.scale.value),
186-
bitmap = bitmap.asImageBitmap(),
187-
contentDescription = dataState.wordsFormatted,
188-
)
185+
AnimatedVisibility(
186+
visibleState = isAccessKeyVisible,
187+
enter = fadeIn(animationSpec = tween(300, 0)),
188+
exit = fadeOut(animationSpec = tween(300, 0))
189+
) {
190+
dataState.accessKeyCroppedBitmap?.let { bitmap ->
191+
Image(
192+
modifier = Modifier
193+
.fillMaxWidth()
194+
.weight(1f)
195+
.scale(selectionState.scale.value),
196+
bitmap = bitmap.asImageBitmap(),
197+
contentDescription = dataState.wordsFormatted,
198+
)
199+
}
189200
}
190201
}
191202
}

0 commit comments

Comments
 (0)