[#65] Add background gradient

2021-12-09 15:18:18 -05:00 · 2021-12-09 15:18:18 -05:00 · 84795ad213
parent ca457b1116
commit 84795ad213
7 changed files with 131 additions and 85 deletions
--- 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()
+                    }
                }
            }
        }
--- 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
+            )
        }
    }
 }
--- 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
@ -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
+    )
+}
--- 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")
--- 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")
    }
 }
--- 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
--- 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,