ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-02 12:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

#40: Update SplashScreen to match Element iOS.

Browse Source
This commit is contained in:
Doug
2022-06-22 09:52:55 +01:00
committed by GitHub
parent 7dcd494de8
commit 9f2ed68e37
6 changed files with 155 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Other/SwiftUI/Layout/ReadableFrameModifier.swift
+39
View File
@@ -0,0 +1,39 @@
//
// Copyright 2022 New Vector Ltd
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
import SwiftUI
// swiftlint:disable private_over_fileprivate
/// Positions this view within an invisible frame that fills the width of its parent view,
/// whilst limiting the width of the content to a readable size (which is customizable).
fileprivate struct ReadableFrameModifier: ViewModifier {
var maxWidth: CGFloat
func body(content: Content) -> some View {
content
.frame(maxWidth: maxWidth)
.frame(maxWidth: .infinity)
}
}
extension View {
/// Positions this view within an invisible frame that fills the width of its parent view,
/// whilst limiting the width of the content to a readable size (which is customizable).
func readableFrame(maxWidth: CGFloat = 600) -> some View {
modifier(ReadableFrameModifier(maxWidth: maxWidth))
}
}
ElementX/Sources/Screens/Authentication/UIConstants.swift
+7 -1
View File
@@ -18,9 +18,15 @@ import SwiftUI
/// Standard constants used across the app's UI.
struct UIConstants {
static let maxContentWidth: CGFloat = 600
static let maxContentHeight: CGFloat = 750
/// The padding used between the top of the main content and the navigation bar.
static let topPaddingToNavigationBar: CGFloat = 16
/// The padding used between the footer and the bottom of the view.
static let actionButtonBottomPadding: CGFloat = 24
/// The height to use for top/bottom spacers to pad the views to fit the `maxContentHeight`.
static func spacerHeight(in geometry: GeometryProxy) -> CGFloat {
max(0, (geometry.size.height - maxContentHeight) / 2)
}
}
ElementX/Sources/Screens/SplashScreen/SplashScreenModels.swift
+26 -22
View File
@@ -28,7 +28,6 @@ struct SplashScreenPageContent {
let title: AttributedString
let message: String
let image: ImageAsset
let gradient: Gradient
}
// MARK: View model
@@ -41,20 +40,29 @@ enum SplashScreenViewModelAction {
// MARK: View
struct SplashScreenViewState: BindableState {
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)
]
}
/// 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: [SplashScreenPageContent]
var bindings: SplashScreenBindings
/// 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.
// (The last color is the right-hand stop, but we need the left-hand stop,
// so take the last but one color from the array).
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
@@ -62,21 +70,17 @@ struct SplashScreenViewState: BindableState {
content = [
SplashScreenPageContent(title: ElementL10n.ftueAuthCarouselSecureTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselSecureBody,
image: Asset.Images.splashScreenPage1,
gradient: Gradient(colors: [Constants.gradientColors[0], Constants.gradientColors[1]])),
message: ElementL10n.ftueAuthCarouselSecureBody,
image: Asset.Images.splashScreenPage1),
SplashScreenPageContent(title: ElementL10n.ftueAuthCarouselControlTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselControlBody,
image: Asset.Images.splashScreenPage2,
gradient: Gradient(colors: [Constants.gradientColors[1], Constants.gradientColors[2]])),
message: ElementL10n.ftueAuthCarouselControlBody,
image: Asset.Images.splashScreenPage2),
SplashScreenPageContent(title: ElementL10n.ftueAuthCarouselEncryptedTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselEncryptedBody,
image: Asset.Images.splashScreenPage3,
gradient: Gradient(colors: [Constants.gradientColors[2], Constants.gradientColors[3]])),
message: ElementL10n.ftueAuthCarouselEncryptedBody,
image: Asset.Images.splashScreenPage3),
SplashScreenPageContent(title: page4Title.tinting("."),
message: ElementL10n.ftueAuthCarouselWorkplaceBody(ElementInfoPlist.cfBundleName),
image: Asset.Images.splashScreenPage4,
gradient: Gradient(colors: [Constants.gradientColors[3], Constants.gradientColors[4]]))
message: ElementL10n.ftueAuthCarouselWorkplaceBody(ElementInfoPlist.cfBundleName),
image: Asset.Images.splashScreenPage4)
]
bindings = SplashScreenBindings()
}
ElementX/Sources/Screens/SplashScreen/View/SplashScreen.swift
+48 -37
View File
@@ -23,13 +23,12 @@ struct SplashScreen: View {
// MARK: Private
@Environment(\.colorScheme) private var colorScheme
@Environment(\.layoutDirection) private var layoutDirection
private var isLeftToRight: Bool { layoutDirection == .leftToRight }
private var pageCount: Int { viewModel.viewState.content.count }
/// The dimensions of the stack with the action buttons and page indicator.
@State private var overlayFrame: CGRect = .zero
/// A timer to automatically animate the pages.
@State private var pageTimer: Timer?
/// The amount of offset to apply when a drag gesture is in progress.
@@ -41,61 +40,53 @@ struct SplashScreen: View {
var body: some View {
GeometryReader { geometry in
ZStack(alignment: .leading) {
VStack(alignment: .leading) {
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
// The main content of the carousel
HStack(spacing: 0) {
HStack(alignment: .top, spacing: 0) {
// Add a hidden page at the start of the carousel duplicating the content of the last page
SplashScreenPage(content: viewModel.viewState.content[pageCount - 1],
overlayHeight: overlayFrame.height + geometry.safeAreaInsets.bottom)
SplashScreenPage(content: viewModel.viewState.content[pageCount - 1])
.frame(width: geometry.size.width)
.tag(-1)
.accessibilityIdentifier("hiddenPage")
ForEach(0..<pageCount, id: \.self) { index in
SplashScreenPage(content: viewModel.viewState.content[index],
overlayHeight: overlayFrame.height + geometry.safeAreaInsets.bottom)
SplashScreenPage(content: viewModel.viewState.content[index])
.frame(width: geometry.size.width)
.tag(index)
}
}
.offset(x: (CGFloat(viewModel.pageIndex + 1) * -geometry.size.width) + dragOffset)
.gesture(
DragGesture()
.onChanged(handleDragGestureChange)
.onEnded { handleDragGestureEnded($0, viewSize: geometry.size) }
)
.offset(x: pageOffset(in: geometry))
overlay
Spacer()
SplashScreenPageIndicator(pageCount: pageCount, pageIndex: viewModel.pageIndex)
.frame(width: geometry.size.width)
}
}
.background(Color.element.background.ignoresSafeArea())
.navigationBarHidden(true)
.onAppear(perform: startTimer)
.onDisappear(perform: stopTimer)
}
/// The only part of the UI that isn't inside of the carousel.
var overlay: some View {
VStack(spacing: 50) {
Color.clear
Color.clear
VStack {
SplashScreenPageIndicator(pageCount: pageCount,
pageIndex: viewModel.pageIndex)
.padding(.bottom)
Spacer()
buttons
.padding(.horizontal, 16)
.frame(maxWidth: UIConstants.maxContentWidth)
.frame(width: geometry.size.width)
.padding(.bottom, UIConstants.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
}
.background(ViewFrameReader(frame: $overlayFrame))
.frame(maxHeight: .infinity)
.background(background.ignoresSafeArea().offset(x: pageOffset(in: geometry)))
.gesture(
DragGesture()
.onChanged(handleDragGestureChange)
.onEnded { handleDragGestureEnded($0, viewSize: geometry.size) }
)
}
.navigationBarHidden(true)
.onAppear(perform: startTimer)
.onDisappear(perform: stopTimer)
}
/// The main action buttons.
@@ -106,6 +97,21 @@ struct SplashScreen: View {
}
.buttonStyle(.elementAction(.xLarge))
}
.padding(.horizontal, 16)
.readableFrame()
}
@ViewBuilder
/// The view's background, showing a gradient in light mode and a solid colour in dark mode.
var background: some View {
if colorScheme == .light {
LinearGradient(gradient: viewModel.viewState.backgroundGradient,
startPoint: .leading,
endPoint: .trailing)
.flipsForRightToLeftLayoutDirection(true)
} else {
Color.element.background
}
}
// MARK: - Animation
@@ -152,6 +158,11 @@ struct SplashScreen: View {
viewModel.pageIndex = -1
}
/// The offset to apply to the `HStack` of pages.
private func pageOffset(in geometry: GeometryProxy) -> CGFloat {
(CGFloat(viewModel.pageIndex + 1) * -geometry.size.width) + dragOffset
}
// MARK: - Gestures
/// Whether or not a drag gesture is valid or not.
ElementX/Sources/Screens/SplashScreen/View/SplashScreenPage.swift
+22 -43
View File
@@ -20,59 +20,38 @@ struct SplashScreenPage: View {
// MARK: - Properties
// MARK: Private
@Environment(\.colorScheme) private var colorScheme
// MARK: Public
/// The content that this page should display.
let content: SplashScreenPageContent
/// The height of the non-scrollable content in the splash screen.
let overlayHeight: CGFloat
// MARK: - Views
@ViewBuilder
var backgroundGradient: some View {
if colorScheme != .dark {
LinearGradient(gradient: content.gradient, startPoint: .leading, endPoint: .trailing)
.flipsForRightToLeftLayoutDirection(true)
}
}
var body: some View {
VStack {
VStack {
Image(content.image.name)
.resizable()
.scaledToFit()
.frame(maxWidth: 300)
.padding(20)
.accessibilityHidden(true)
VStack(spacing: 8) {
Text(content.title)
.font(.element.title2B)
.foregroundColor(.element.primaryContent)
Text(content.message)
.font(.element.body)
.foregroundColor(.element.secondaryContent)
.multilineTextAlignment(.center)
}
.padding(.bottom)
Spacer()
// Prevent the content from clashing with the overlay content.
Spacer().frame(maxHeight: overlayHeight)
Image(content.image.name)
.resizable()
.scaledToFit()
.frame(maxWidth: 310) // This value is problematic. 300 results in dropped frames
// on iPhone 12/13 Mini. 305 the same on iPhone 12/13. As of
// iOS 15, 310 seems fine on all supported screen widths 🤞.
.padding(20)
.accessibilityHidden(true)
VStack(spacing: 8) {
Text(content.title)
.font(.element.title2B)
.foregroundColor(.element.primaryContent)
Text(content.message)
.font(.element.body)
.foregroundColor(.element.secondaryContent)
.multilineTextAlignment(.center)
}
.padding(.horizontal, 16)
.frame(maxWidth: UIConstants.maxContentWidth,
maxHeight: UIConstants.maxContentHeight)
.fixedSize(horizontal: false, vertical: true)
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(backgroundGradient.ignoresSafeArea())
.padding(.bottom)
.padding(.horizontal, 16)
.readableFrame()
}
}
@@ -80,7 +59,7 @@ struct SplashScreenPage_Previews: PreviewProvider {
static let content = SplashScreenViewState().content
static var previews: some View {
ForEach(0..<content.count, id: \.self) { index in
SplashScreenPage(content: content[index], overlayHeight: 200)
SplashScreenPage(content: content[index])
}
}
}