From 84795ad213216c46ca838278fc4feccd73342cbc Mon Sep 17 00:00:00 2001 From: Carter Jernigan Date: Thu, 9 Dec 2021 15:18:18 -0500 Subject: [PATCH] [#65] Add background gradient --- .../main/java/cash/z/ecc/ui/MainActivity.kt | 58 ++++++++++-------- .../z/ecc/ui/screen/backup/view/BackupView.kt | 60 +++++++++---------- .../z/ecc/ui/screen/common/GradientSurface.kt | 20 +++++++ .../z/ecc/ui/screen/debug/view/DesignGuide.kt | 4 +- .../z/ecc/ui/screen/home/view/HomeView.kt | 14 ++--- .../screen/onboarding/view/OnboardingView.kt | 45 +++++++------- .../main/java/cash/z/ecc/ui/theme/Theme.kt | 15 ++++- 7 files changed, 131 insertions(+), 85 deletions(-) create mode 100644 ui-lib/src/main/java/cash/z/ecc/ui/screen/common/GradientSurface.kt diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt b/ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt index 6fd1d18e..e9dd9c04 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt @@ -9,14 +9,18 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.viewModels import androidx.annotation.VisibleForTesting +import androidx.compose.foundation.layout.fillMaxHeight +import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState +import androidx.compose.ui.Modifier import androidx.core.content.res.ResourcesCompat import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen import androidx.lifecycle.lifecycleScope import cash.z.ecc.sdk.model.PersistableWallet import cash.z.ecc.ui.screen.backup.view.BackupWallet import cash.z.ecc.ui.screen.backup.viewmodel.BackupViewModel +import cash.z.ecc.ui.screen.common.GradientSurface import cash.z.ecc.ui.screen.home.view.Home import cash.z.ecc.ui.screen.home.viewmodel.WalletState import cash.z.ecc.ui.screen.home.viewmodel.WalletViewModel @@ -56,42 +60,48 @@ class MainActivity : ComponentActivity() { } private fun setupSplashScreen() { - installSplashScreen().also { - val start = SystemClock.elapsedRealtime().milliseconds - it.setKeepVisibleCondition { - if (SPLASH_SCREEN_DELAY > Duration.ZERO) { - val now = SystemClock.elapsedRealtime().milliseconds + val splashScreen = installSplashScreen() + val start = SystemClock.elapsedRealtime().milliseconds - // This delay is for debug purposes only; do not enable for production usage. - if (now - start < SPLASH_SCREEN_DELAY) { - return@setKeepVisibleCondition true - } + splashScreen.setKeepVisibleCondition { + if (SPLASH_SCREEN_DELAY > Duration.ZERO) { + val now = SystemClock.elapsedRealtime().milliseconds + + // This delay is for debug purposes only; do not enable for production usage. + if (now - start < SPLASH_SCREEN_DELAY) { + return@setKeepVisibleCondition true } - - WalletState.Loading == walletViewModel.state.value } + + WalletState.Loading == walletViewModel.state.value } } private fun setupUiContent() { setContent { ZcashTheme { - val walletState = walletViewModel.state.collectAsState().value + GradientSurface( + Modifier + .fillMaxWidth() + .fillMaxHeight() + ) { + val walletState = walletViewModel.state.collectAsState().value - when (walletState) { - WalletState.Loading -> { - // For now, keep displaying splash screen using condition above. - // In the future, we might consider displaying something different here. + when (walletState) { + WalletState.Loading -> { + // For now, keep displaying splash screen using condition above. + // In the future, we might consider displaying something different here. + } + WalletState.NoWallet -> { + WrapOnboarding() + } + is WalletState.NeedsBackup -> WrapBackup(walletState.persistableWallet) + is WalletState.Ready -> WrapHome(walletState.persistableWallet) } - WalletState.NoWallet -> { - WrapOnboarding() - } - is WalletState.NeedsBackup -> WrapBackup(walletState.persistableWallet) - is WalletState.Ready -> WrapHome(walletState.persistableWallet) - } - if (walletState != WalletState.Loading) { - reportFullyDrawn() + if (walletState != WalletState.Loading) { + reportFullyDrawn() + } } } } diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/screen/backup/view/BackupView.kt b/ui-lib/src/main/java/cash/z/ecc/ui/screen/backup/view/BackupView.kt index 7ef505e5..b93257a9 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/screen/backup/view/BackupView.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/screen/backup/view/BackupView.kt @@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material.Card -import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier @@ -26,6 +25,7 @@ import cash.z.ecc.ui.screen.common.Body import cash.z.ecc.ui.screen.common.CHIP_GRID_ROW_SIZE import cash.z.ecc.ui.screen.common.Chip import cash.z.ecc.ui.screen.common.ChipGrid +import cash.z.ecc.ui.screen.common.GradientSurface import cash.z.ecc.ui.screen.common.Header import cash.z.ecc.ui.screen.common.NavigationButton import cash.z.ecc.ui.screen.common.PrimaryButton @@ -37,14 +37,16 @@ import cash.z.ecc.ui.theme.ZcashTheme @Preview(device = Devices.PIXEL_4) @Composable fun ComposablePreview() { - ZcashTheme(darkTheme = true) { - BackupWallet( - PersistableWalletFixture.new(), - BackupState(BackupStage.Test), - TestChoices(), - onCopyToClipboard = {}, - onComplete = {} - ) + ZcashTheme(darkTheme = false) { + GradientSurface { + BackupWallet( + PersistableWalletFixture.new(), + BackupState(BackupStage.EducationOverview), + TestChoices(), + onCopyToClipboard = {}, + onComplete = {} + ) + } } } @@ -59,27 +61,25 @@ fun BackupWallet( onCopyToClipboard: () -> Unit, onComplete: () -> Unit, ) { - Surface { - Column { - when (backupState.current.collectAsState().value) { - BackupStage.EducationOverview -> EducationOverview(onNext = backupState::goNext) - BackupStage.EducationRecoveryPhrase -> EducationRecoveryPhrase(onNext = backupState::goNext) - BackupStage.Seed -> SeedPhrase( - wallet, - onNext = backupState::goNext, - onCopyToClipboard = onCopyToClipboard - ) - BackupStage.Test -> Test( - wallet, - selectedTestChoices, - onBack = backupState::goPrevious, - onNext = backupState::goNext - ) - BackupStage.Complete -> Complete( - onComplete = onComplete, - onBackToSeedPhrase = backupState::goToSeed - ) - } + Column { + when (backupState.current.collectAsState().value) { + BackupStage.EducationOverview -> EducationOverview(onNext = backupState::goNext) + BackupStage.EducationRecoveryPhrase -> EducationRecoveryPhrase(onNext = backupState::goNext) + BackupStage.Seed -> SeedPhrase( + wallet, + onNext = backupState::goNext, + onCopyToClipboard = onCopyToClipboard + ) + BackupStage.Test -> Test( + wallet, + selectedTestChoices, + onBack = backupState::goPrevious, + onNext = backupState::goNext + ) + BackupStage.Complete -> Complete( + onComplete = onComplete, + onBackToSeedPhrase = backupState::goToSeed + ) } } } diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/screen/common/GradientSurface.kt b/ui-lib/src/main/java/cash/z/ecc/ui/screen/common/GradientSurface.kt new file mode 100644 index 00000000..9c2c0471 --- /dev/null +++ b/ui-lib/src/main/java/cash/z/ecc/ui/screen/common/GradientSurface.kt @@ -0,0 +1,20 @@ +package cash.z.ecc.ui.screen.common + +import androidx.compose.foundation.background +import androidx.compose.material.Surface +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.RectangleShape +import cash.z.ecc.ui.theme.ZcashTheme + +@Composable +fun GradientSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) { + Surface( + color = Color.Transparent, + modifier = modifier + .background(ZcashTheme.colors.surfaceGradient()), + shape = RectangleShape, + content = content + ) +} diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt b/ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt index 173355a7..ece8def7 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt @@ -2,7 +2,6 @@ package cash.z.ecc.ui.screen.debug.view import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.material.Surface import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.List import androidx.compose.material.icons.filled.Person @@ -12,6 +11,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.tooling.preview.Preview import cash.z.ecc.ui.screen.common.Body import cash.z.ecc.ui.screen.common.Chip +import cash.z.ecc.ui.screen.common.GradientSurface import cash.z.ecc.ui.screen.common.Header import cash.z.ecc.ui.screen.common.NavigationButton import cash.z.ecc.ui.screen.common.PinkProgress @@ -35,7 +35,7 @@ fun ComposablePreview() { // Allowing magic numbers since this is debug-only @Suppress("MagicNumber") fun DesignGuide() { - Surface { + GradientSurface { Column { Header(text = "H1") Body(text = "body") diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/screen/home/view/HomeView.kt b/ui-lib/src/main/java/cash/z/ecc/ui/screen/home/view/HomeView.kt index 13457761..791e2570 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/screen/home/view/HomeView.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/screen/home/view/HomeView.kt @@ -1,28 +1,28 @@ package cash.z.ecc.ui.screen.home.view import androidx.compose.foundation.layout.Column -import androidx.compose.material.Surface import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.ui.tooling.preview.Preview import cash.z.ecc.sdk.fixture.PersistableWalletFixture import cash.z.ecc.sdk.model.PersistableWallet +import cash.z.ecc.ui.screen.common.GradientSurface import cash.z.ecc.ui.theme.ZcashTheme @Preview @Composable fun ComposablePreview() { ZcashTheme(darkTheme = true) { - Home(PersistableWalletFixture.new()) + GradientSurface { + Home(PersistableWalletFixture.new()) + } } } @Composable fun Home(@Suppress("UNUSED_PARAMETER") persistableWallet: PersistableWallet) { - Surface { - Column { - // Placeholder - Text("Welcome to your wallet") - } + Column { + // Placeholder + Text("Welcome to your wallet") } } diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt b/ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt index afc8dd2c..e27004fc 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt @@ -7,10 +7,10 @@ import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.material.Icon -import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.ui.Modifier @@ -22,6 +22,7 @@ import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview import cash.z.ecc.ui.R import cash.z.ecc.ui.screen.common.Body +import cash.z.ecc.ui.screen.common.GradientSurface import cash.z.ecc.ui.screen.common.Header import cash.z.ecc.ui.screen.common.NavigationButton import cash.z.ecc.ui.screen.common.PinkProgress @@ -38,11 +39,13 @@ import cash.z.ecc.ui.theme.ZcashTheme @Composable fun ComposablePreview() { ZcashTheme(darkTheme = true) { - Onboarding( - OnboardingState(OnboardingStage.UnifiedAddresses), - onImportWallet = {}, - onCreateWallet = {} - ) + GradientSurface { + Onboarding( + OnboardingState(OnboardingStage.UnifiedAddresses), + onImportWallet = {}, + onCreateWallet = {} + ) + } } } @@ -56,24 +59,22 @@ fun Onboarding( onImportWallet: () -> Unit, onCreateWallet: () -> Unit ) { - Surface { - Column { - TopNavButtons(onboardingState) + Column { + TopNavButtons(onboardingState) - val onboardingStage = onboardingState.current.collectAsState().value + val onboardingStage = onboardingState.current.collectAsState().value - when (onboardingStage) { - OnboardingStage.ShieldedByDefault -> ShieldedByDefault() - OnboardingStage.UnifiedAddresses -> UnifiedAddresses() - OnboardingStage.More -> More() - OnboardingStage.Wallet -> Wallet( - onCreateWallet = onCreateWallet, - onImportWallet = onImportWallet - ) - } - - BottomNav(onboardingStage.getProgress(), onboardingState::goNext) + when (onboardingStage) { + OnboardingStage.ShieldedByDefault -> ShieldedByDefault() + OnboardingStage.UnifiedAddresses -> UnifiedAddresses() + OnboardingStage.More -> More() + OnboardingStage.Wallet -> Wallet( + onCreateWallet = onCreateWallet, + onImportWallet = onImportWallet + ) } + + BottomNav(onboardingStage.getProgress(), onboardingState::goNext) } } @@ -100,6 +101,8 @@ private fun TopNavButtons(onboardingState: OnboardingState) { private fun BottomNav(progress: Progress, onNext: () -> Unit) { if (progress.current != progress.last) { Column { + Spacer(modifier = Modifier.fillMaxHeight().weight(MINIMAL_WEIGHT, true)) + SecondaryButton(onNext, stringResource(R.string.onboarding_next), Modifier.fillMaxWidth()) // Converts from index to human numbering diff --git a/ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt b/ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt index 086e6493..d49ee6b0 100644 --- a/ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt +++ b/ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt @@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider import androidx.compose.runtime.Immutable import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color private val DarkColorPalette = darkColors( @@ -34,6 +35,7 @@ private val LightColorPalette = lightColors( @Immutable data class ExtendedColors( + val surfaceEnd: Color, val onBackgroundHeader: Color, val tertiary: Color, val onTertiary: Color, @@ -43,9 +45,18 @@ data class ExtendedColors( val progressEnd: Color, val progressBackground: Color, val chipIndex: Color -) +) { + @Composable + fun surfaceGradient() = Brush.verticalGradient( + colors = listOf( + MaterialTheme.colors.surface, + ZcashTheme.colors.surfaceEnd + ) + ) +} val DarkExtendedColorPalette = ExtendedColors( + surfaceEnd = Dark.backgroundEnd, onBackgroundHeader = Dark.textHeaderOnBackground, tertiary = Dark.tertiaryButton, onTertiary = Dark.textTertiaryButton, @@ -58,6 +69,7 @@ val DarkExtendedColorPalette = ExtendedColors( ) val LightExtendedColorPalette = ExtendedColors( + surfaceEnd = Light.backgroundEnd, onBackgroundHeader = Light.textHeaderOnBackground, tertiary = Light.tertiaryButton, onTertiary = Light.textTertiaryButton, @@ -71,6 +83,7 @@ val LightExtendedColorPalette = ExtendedColors( val LocalExtendedColors = staticCompositionLocalOf { ExtendedColors( + surfaceEnd = Color.Unspecified, onBackgroundHeader = Color.Unspecified, tertiary = Color.Unspecified, onTertiary = Color.Unspecified,