Simplify the layout of the onboarding splash screen (#6320)

* Simplify the layout of the onboarding splash screen
* Re-organise OnboardingSplashScreen.
* Fix frame drops for real this time.
This commit is contained in:
Doug
2022-06-22 09:54:21 +01:00
committed by GitHub
parent 4e62819f49
commit 30283509f7
5 changed files with 114 additions and 123 deletions
@@ -24,7 +24,6 @@ struct OnboardingSplashScreenPageContent {
let message: String
let image: ImageAsset
let darkImage: ImageAsset
let gradient: Gradient
}
// MARK: View model
@@ -38,19 +37,14 @@ enum OnboardingSplashScreenViewModelResult {
struct OnboardingSplashScreenViewState: BindableState, CustomDebugStringConvertible {
// MARK: - Constants
private enum Constants {
static let gradientColors = [
Color(red: 0.95, green: 0.98, blue: 0.96),
Color(red: 0.89, green: 0.96, blue: 0.97),
Color(red: 0.95, green: 0.89, blue: 0.97),
Color(red: 0.81, green: 0.95, blue: 0.91),
Color(red: 0.95, green: 0.98, blue: 0.96)
]
}
// MARK: - Properties
/// The colours of the background gradient shown behind the 4 pages.
private let gradientColors = [
Color(red: 0.95, green: 0.98, blue: 0.96),
Color(red: 0.89, green: 0.96, blue: 0.97),
Color(red: 0.95, green: 0.89, blue: 0.97),
Color(red: 0.81, green: 0.95, blue: 0.91),
Color(red: 0.95, green: 0.98, blue: 0.96)
]
/// An array containing all content of the carousel pages
let content: [OnboardingSplashScreenPageContent]
@@ -61,6 +55,13 @@ struct OnboardingSplashScreenViewState: BindableState, CustomDebugStringConverti
"OnboardingSplashScreenViewState at page \(bindings.pageIndex)."
}
/// The background gradient for all 4 pages and the hidden page at the start of the carousel.
var backgroundGradient: Gradient {
// Include the extra stop for the hidden page at the start of the carousel.
let hiddenPageColor = gradientColors[gradientColors.count - 2]
return Gradient(colors: [hiddenPageColor] + gradientColors)
}
init() {
// The pun doesn't translate, so we only use it for English.
let locale = Locale.current
@@ -70,23 +71,19 @@ struct OnboardingSplashScreenViewState: BindableState, CustomDebugStringConverti
OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage1Title,
message: VectorL10n.onboardingSplashPage1Message,
image: Asset.Images.onboardingSplashScreenPage1,
darkImage: Asset.Images.onboardingSplashScreenPage1Dark,
gradient: Gradient(colors: [Constants.gradientColors[0], Constants.gradientColors[1]])),
darkImage: Asset.Images.onboardingSplashScreenPage1Dark),
OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage2Title,
message: VectorL10n.onboardingSplashPage2Message,
image: Asset.Images.onboardingSplashScreenPage2,
darkImage: Asset.Images.onboardingSplashScreenPage2Dark,
gradient: Gradient(colors: [Constants.gradientColors[1], Constants.gradientColors[2]])),
darkImage: Asset.Images.onboardingSplashScreenPage2Dark),
OnboardingSplashScreenPageContent(title: VectorL10n.onboardingSplashPage3Title,
message: VectorL10n.onboardingSplashPage3Message,
image: Asset.Images.onboardingSplashScreenPage3,
darkImage: Asset.Images.onboardingSplashScreenPage3Dark,
gradient: Gradient(colors: [Constants.gradientColors[2], Constants.gradientColors[3]])),
darkImage: Asset.Images.onboardingSplashScreenPage3Dark),
OnboardingSplashScreenPageContent(title: page4Title,
message: VectorL10n.onboardingSplashPage4Message,
image: Asset.Images.onboardingSplashScreenPage4,
darkImage: Asset.Images.onboardingSplashScreenPage4Dark,
gradient: Gradient(colors: [Constants.gradientColors[3], Constants.gradientColors[4]])),
darkImage: Asset.Images.onboardingSplashScreenPage4Dark),
]
self.bindings = OnboardingSplashScreenBindings()
}