Skip to content

Commit cd5c24a

Browse files
bmc08gtbmc08gt
authored
Merge pull request #94 from code-payments/fix/access-key-clipping
fix(accesskey): prevent clipping of blur
2 parents d65e1ad + fb1ed09 commit cd5c24a

3 files changed

Lines changed: 119 additions & 95 deletions

File tree

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

Lines changed: 88 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ import androidx.compose.runtime.setValue
3131
import androidx.compose.ui.Alignment
3232
import androidx.compose.ui.ExperimentalComposeUiApi
3333
import androidx.compose.ui.Modifier
34+
import androidx.compose.ui.draw.alpha
3435
import androidx.compose.ui.draw.scale
3536
import androidx.compose.ui.graphics.asImageBitmap
3637
import androidx.compose.ui.layout.ContentScale
@@ -42,6 +43,7 @@ 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.zIndex
4547
import androidx.constraintlayout.compose.ConstraintLayout
4648
import androidx.constraintlayout.compose.Dimension
4749
import androidx.hilt.navigation.compose.hiltViewModel
@@ -54,6 +56,7 @@ import com.getcode.theme.BrandLight
5456
import com.getcode.theme.CodeTheme
5557
import com.getcode.theme.White
5658
import com.getcode.util.IntentUtils
59+
import com.getcode.util.addIf
5760
import com.getcode.util.measured
5861
import com.getcode.util.swallowClicks
5962
import com.getcode.view.components.AccessKeySelectionContainer
@@ -132,6 +135,10 @@ fun AccessKey(
132135
words = dataState.words.joinToString(" ")
133136
)
134137

138+
var textHeight by remember {
139+
mutableStateOf(0.dp)
140+
}
141+
135142
AccessKeySelectionContainer(
136143
modifier = Modifier
137144
.fillMaxSize()
@@ -140,84 +147,98 @@ fun AccessKey(
140147
) {
141148
Cloudy(
142149
modifier = Modifier
143-
.fillMaxSize()
144-
.padding(horizontal = CodeTheme.dimens.inset)
145-
.padding(vertical = CodeTheme.dimens.grid.x4),
150+
.fillMaxSize(),
146151
enabled = selectionState.shown
147152
) {
148-
Column(
153+
Box(
149154
modifier = Modifier
150-
.align(Alignment.TopCenter)
151-
.fillMaxHeight()
152-
.padding(bottom = buttonHeight),
153-
verticalArrangement = Arrangement.Center,
154-
horizontalAlignment = Alignment.CenterHorizontally
155+
.fillMaxSize()
156+
.padding(horizontal = CodeTheme.dimens.inset)
157+
.padding(vertical = CodeTheme.dimens.grid.x4),
155158
) {
156-
AnimatedVisibility(
157-
visibleState = isAccessKeyVisible,
158-
enter = fadeIn(animationSpec = tween(300, 0)),
159-
exit = fadeOut(animationSpec = tween(300, 0))
160-
) {
161-
dataState.accessKeyCroppedBitmap?.let { bitmap ->
162-
Image(
163-
modifier = Modifier
164-
.fillMaxWidth()
165-
.weight(1f)
166-
.scale(selectionState.scale.value),
167-
bitmap = bitmap.asImageBitmap(),
168-
contentDescription = dataState.wordsFormatted,
169-
)
170-
}
159+
Column(modifier = Modifier
160+
.align(Alignment.BottomCenter)
161+
.measured { buttonHeight = it.height }) {
162+
CodeButton(
163+
modifier = Modifier,
164+
onClick = {
165+
onExportClick()
166+
},
167+
text = stringResource(R.string.action_saveAccessKey),
168+
buttonState = ButtonState.Filled,
169+
isLoading = dataState.isLoading,
170+
enabled = dataState.isEnabled,
171+
isSuccess = dataState.isSuccess,
172+
)
173+
174+
CodeButton(
175+
modifier = Modifier,
176+
onClick = {
177+
BottomBarManager.showMessage(
178+
BottomBarManager.BottomBarMessage(
179+
title = context.getString(R.string.prompt_title_wroteThemDown),
180+
subtitle = context
181+
.getString(R.string.prompt_description_wroteThemDown),
182+
positiveText = context
183+
.getString(R.string.action_yesWroteThemDown),
184+
negativeText = context.getString(R.string.action_cancel),
185+
onPositive = { onSkipClick() },
186+
onNegative = {}
187+
)
188+
)
189+
},
190+
text = stringResource(R.string.action_wroteThemDownInstead),
191+
buttonState = ButtonState.Subtle,
192+
enabled = dataState.isEnabled,
193+
isPaddedVertical = false,
194+
)
171195
}
196+
}
197+
}
172198

173-
Text(
174-
modifier = Modifier
175-
.padding(vertical = CodeTheme.dimens.grid.x2),
176-
style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
177-
color = White,
178-
text = stringResource(R.string.subtitle_accessKeyDescription)
179-
)
199+
Column(
200+
modifier = Modifier
201+
.align(Alignment.TopCenter)
202+
.fillMaxHeight()
203+
.padding(bottom = buttonHeight)
204+
,
205+
verticalArrangement = Arrangement.Center,
206+
horizontalAlignment = Alignment.CenterHorizontally
207+
) {
208+
AnimatedVisibility(
209+
visibleState = isAccessKeyVisible,
210+
enter = fadeIn(animationSpec = tween(300, 0)),
211+
exit = fadeOut(animationSpec = tween(300, 0))
212+
) {
213+
dataState.accessKeyCroppedBitmap?.let { bitmap ->
214+
Image(
215+
modifier = Modifier
216+
.fillMaxWidth()
217+
.weight(1f)
218+
.scale(selectionState.scale.value),
219+
bitmap = bitmap.asImageBitmap(),
220+
contentDescription = dataState.wordsFormatted,
221+
)
222+
}
180223
}
181224

182-
Column(modifier = Modifier
183-
.align(Alignment.BottomCenter)
184-
.measured { buttonHeight = it.height }) {
185-
CodeButton(
186-
modifier = Modifier,
187-
onClick = {
188-
onExportClick()
189-
},
190-
text = stringResource(R.string.action_saveAccessKey),
191-
buttonState = ButtonState.Filled,
192-
isLoading = dataState.isLoading,
193-
enabled = dataState.isEnabled,
194-
isSuccess = dataState.isSuccess,
195-
)
225+
val textAlpha by animateFloatAsState(
226+
if (selectionState.shown) 0f else 1f,
227+
label = "text alpha"
228+
)
196229

197-
CodeButton(
198-
modifier = Modifier,
199-
onClick = {
200-
BottomBarManager.showMessage(
201-
BottomBarManager.BottomBarMessage(
202-
title = context.getString(R.string.prompt_title_wroteThemDown),
203-
subtitle = context
204-
.getString(R.string.prompt_description_wroteThemDown),
205-
positiveText = context
206-
.getString(R.string.action_yesWroteThemDown),
207-
negativeText = context.getString(R.string.action_cancel),
208-
onPositive = { onSkipClick() },
209-
onNegative = {}
210-
)
211-
)
212-
},
213-
text = stringResource(R.string.action_wroteThemDownInstead),
214-
buttonState = ButtonState.Subtle,
215-
enabled = dataState.isEnabled,
216-
isPaddedVertical = false,
217-
)
218-
}
230+
Text(
231+
modifier = Modifier
232+
.alpha(textAlpha)
233+
.padding(vertical = CodeTheme.dimens.grid.x2),
234+
style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
235+
color = White,
236+
text = stringResource(R.string.subtitle_accessKeyDescription)
237+
.replace(". ", ".\n")
238+
)
219239
}
220240

241+
221242
BackHandler {
222243
BottomBarManager.showMessage(
223244
BottomBarManager.BottomBarMessage(

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -146,11 +146,6 @@ abstract class BaseAccessKeyViewModel(private val resources: ResourceHelper) : B
146146
targetWidth, targetHeight,
147147
Bitmap.Config.ARGB_8888
148148
).applyCanvas {
149-
val paintBackground = Paint()
150-
paintBackground.color = Brand.toAGColor()
151-
paintBackground.style = Paint.Style.FILL
152-
drawPaint(paintBackground)
153-
154149
val accessBgActualWidth =
155150
accessKeyBg.getScaledWidth(resources.displayMetrics)
156151
drawBitmap(

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

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -141,32 +141,42 @@ fun BackupKey(
141141
Cloudy(
142142
modifier = Modifier
143143
.fillMaxSize()
144-
.padding(horizontal = CodeTheme.dimens.inset)
145144
.padding(vertical = CodeTheme.dimens.grid.x4),
146145
enabled = selectionState.shown
147146
) {
148-
Text(
147+
Box(
149148
modifier = Modifier
150-
.padding(vertical = CodeTheme.dimens.grid.x2)
151-
.measured { textHeight = it.height },
152-
style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
153-
color = BrandLight,
154-
text = stringResource(R.string.subtitle_accessKeyDescription)
155-
)
156-
157-
Column(
158-
modifier = Modifier
159-
.align(Alignment.BottomCenter)
160-
.measured { buttonHeight = it.height }
161-
) {
162-
CodeButton(
163-
onClick = { onExportClick() },
164-
text = stringResource(R.string.action_saveAccessKey),
165-
buttonState = ButtonState.Filled,
166-
isLoading = dataState.isLoading,
167-
enabled = dataState.isEnabled,
168-
isSuccess = dataState.isSuccess,
149+
.fillMaxSize()
150+
.padding(
151+
horizontal = CodeTheme.dimens.inset,
152+
vertical = CodeTheme.dimens.grid.x4
153+
)
154+
) {
155+
Text(
156+
modifier = Modifier
157+
.align(Alignment.TopCenter)
158+
.padding(vertical = CodeTheme.dimens.grid.x2)
159+
.measured { textHeight = it.height },
160+
style = CodeTheme.typography.body2.copy(textAlign = TextAlign.Center),
161+
color = BrandLight,
162+
text = stringResource(R.string.subtitle_accessKeyDescription)
163+
.replace(". ", ".\n")
169164
)
165+
166+
Column(
167+
modifier = Modifier
168+
.align(Alignment.BottomCenter)
169+
.measured { buttonHeight = it.height }
170+
) {
171+
CodeButton(
172+
onClick = { onExportClick() },
173+
text = stringResource(R.string.action_saveAccessKey),
174+
buttonState = ButtonState.Filled,
175+
isLoading = dataState.isLoading,
176+
enabled = dataState.isEnabled,
177+
isSuccess = dataState.isSuccess,
178+
)
179+
}
170180
}
171181
}
172182

@@ -196,8 +206,6 @@ fun BackupKey(
196206
}
197207
}
198208
}
199-
200-
201209
}
202210

203211
LaunchedEffect(viewModel) {

0 commit comments

Comments
 (0)