From 224344d4e3fc5cfdf9f4f6b000e564a2762f25dd Mon Sep 17 00:00:00 2001 From: Milan Date: Wed, 20 Nov 2024 14:35:59 +0100 Subject: [PATCH] Fix seed visibility (#1691) * Fix seed view words visibility * Code cleanup * Add better clipping to ripple effect * Changelogs update --------- Co-authored-by: Honza --- CHANGELOG.md | 3 ++ docs/whatsNew/WHATS_NEW_EN.md | 3 ++ docs/whatsNew/WHATS_NEW_ES.md | 3 ++ .../ui/design/newcomponent/PreviewScreens.kt | 10 +++- .../zcash/ui/screen/seed/view/SeedView.kt | 54 ++++++++++++------- 5 files changed, 53 insertions(+), 20 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 96c86541..aa5e268e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,9 @@ and this application adheres to [Semantic Versioning](https://semver.org/spec/v2 - Flexa feature has been turned on - Disclaimer added to integrations screen +### Fixed +- The Seed screen recovery phrase has been improved to properly display on small screens + ## [1.2.2 (789)] - 2024-11-18 ### Added diff --git a/docs/whatsNew/WHATS_NEW_EN.md b/docs/whatsNew/WHATS_NEW_EN.md index 29f10852..0435c0d1 100644 --- a/docs/whatsNew/WHATS_NEW_EN.md +++ b/docs/whatsNew/WHATS_NEW_EN.md @@ -13,6 +13,9 @@ directly impact users rather than highlighting other key architectural updates.* - Flexa feature has been turned on - Disclaimer added to integrations screen +### Fixed +- The Seed screen recovery phrase has been improved to properly display on small screens + ## [1.2.2 (789)] - 2024-11-18 ### Added diff --git a/docs/whatsNew/WHATS_NEW_ES.md b/docs/whatsNew/WHATS_NEW_ES.md index 662c4643..67d8ba6f 100644 --- a/docs/whatsNew/WHATS_NEW_ES.md +++ b/docs/whatsNew/WHATS_NEW_ES.md @@ -13,6 +13,9 @@ directly impact users rather than highlighting other key architectural updates.* - Flexa feature has been turned on - Disclaimer added to integrations screen +### Fixed +- The Seed screen recovery phrase has been improved to properly display on small screens + ## [1.2.2 (789)] - 2024-11-18 ### Agregado diff --git a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/newcomponent/PreviewScreens.kt b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/newcomponent/PreviewScreens.kt index 38ab9e04..d1d69470 100644 --- a/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/newcomponent/PreviewScreens.kt +++ b/ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/newcomponent/PreviewScreens.kt @@ -11,13 +11,19 @@ import kotlin.annotation.AnnotationRetention.SOURCE annotation class PreviewScreens @Preview(name = "1: Light preview", showBackground = true) -@Preview(name = "2: Light preview small", showBackground = true, device = Devices.NEXUS_5) +@Preview( + name = "2: Light preview small", + showBackground = true, + device = Devices.NEXUS_5, + fontScale = 1.5f +) @Preview(name = "3: Dark preview", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES) @Preview( name = "4: Dark preview small", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES, - device = Devices.NEXUS_5 + device = Devices.NEXUS_5, + fontScale = 1.5f ) @Retention(SOURCE) annotation class PreviewScreenSizes diff --git a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/view/SeedView.kt b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/view/SeedView.kt index fa60c668..2f7f3be3 100644 --- a/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/view/SeedView.kt +++ b/ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seed/view/SeedView.kt @@ -12,6 +12,7 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowColumn +import androidx.compose.foundation.layout.FlowColumnOverflow import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize @@ -33,6 +34,7 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha import androidx.compose.ui.draw.blur +import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalDensity @@ -193,17 +195,26 @@ private fun SeedSecret( Row( modifier = if (state.tooltip != null) { - Modifier.clickable { - scope.launch { - if (tooltipState.isVisible) { - tooltipState.dismiss() - } else { - tooltipState.show() + Modifier + .clip(RoundedCornerShape(ZashiDimensions.Radius.radiusMd)) + .clickable { + scope.launch { + if (tooltipState.isVisible) { + tooltipState.dismiss() + } else { + tooltipState.show() + } } } - } + .padding( + horizontal = ZashiDimensions.Spacing.spacingXs, + vertical = ZashiDimensions.Spacing.spacingSm + ) } else { - Modifier + Modifier.padding( + horizontal = ZashiDimensions.Spacing.spacingXs, + vertical = ZashiDimensions.Spacing.spacingSm + ) } ) { Text( @@ -249,7 +260,6 @@ private fun SeedSecret( } } } - Spacer(Modifier.height(ZashiDimensions.Spacing.spacingSm)) SecretContent(state = state) } @@ -279,7 +289,7 @@ private fun SecretContent(state: SeedSecretState) { } then Modifier .blurCompat(blur.value, 14.dp) - .padding(horizontal = 24.dp, vertical = 18.dp) + .padding(vertical = 18.dp) ) { if (state.mode == SeedSecretState.Mode.SEED) { SecretSeedContent(state) @@ -338,9 +348,15 @@ private fun Modifier.blurCompat( } @Composable -private fun SecretBirthdayContent(state: SeedSecretState) { +private fun SecretBirthdayContent( + state: SeedSecretState, + modifier: Modifier = Modifier +) { Text( - modifier = Modifier.fillMaxWidth(), + modifier = + modifier + .fillMaxWidth() + .padding(horizontal = 24.dp), textAlign = TextAlign.Start, text = state.text.getValue(), style = ZashiTypography.textMd, @@ -358,14 +374,13 @@ private fun SecretSeedContent(state: SeedSecretState) { .fillMaxWidth() .padding(end = 8.dp), maxItemsInEachColumn = 8, - horizontalArrangement = Arrangement.SpaceBetween, + horizontalArrangement = Arrangement.SpaceAround, verticalArrangement = spacedBy(6.dp), - maxLines = 8 + maxLines = 8, + overflow = FlowColumnOverflow.Visible, ) { state.text.getValue().split(" ").fastForEachIndexed { i, s -> - Row( - modifier = Modifier - ) { + Row { Text( modifier = Modifier.width(18.dp), textAlign = TextAlign.End, @@ -401,7 +416,10 @@ private fun RevealedPreview() = seed = SeedSecretState( title = stringRes("Seed"), - text = stringRes((1..24).joinToString(" ") { "trala" }), + text = + stringRes( + (1..24).joinToString(" ") { "trala" } + "longer_tralala" + ), tooltip = null, isRevealed = true, mode = SeedSecretState.Mode.SEED,