ehealthsolutions/element-x-ios
3
0
Fork 0
mirror of https://github.com/Novaloop-AG/element-x-ios.git synced 2026-11-04 19:44:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Design review for first public TestFlight (#492)

Browse Source 
* 430 - Design review for first public TestFlight
This commit is contained in:
Gil Eluard
2023-01-26 16:32:39 +01:00
committed by GitHub
parent 413b433806
commit eeb69d1971
57 changed files with 5887 additions and 5169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ElementX/Sources/Screens/OnboardingScreen/OnboardingModels.swift
+3 -16
View File
@@ -60,23 +60,10 @@ struct OnboardingViewState: BindableState {
}
init() {
// The pun doesn't translate, so we only use it for English.
let locale = Locale.current
let page4Title = locale.identifier.hasPrefix("en") ? "Cut the slack from teams." : ElementL10n.ftueAuthCarouselWorkplaceTitle
content = [
OnboardingPageContent(title: ElementL10n.ftueAuthCarouselSecureTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselSecureBody,
image: Asset.Images.onboardingScreenPage1),
OnboardingPageContent(title: ElementL10n.ftueAuthCarouselControlTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselControlBody,
image: Asset.Images.onboardingScreenPage2),
OnboardingPageContent(title: ElementL10n.ftueAuthCarouselEncryptedTitle.tinting("."),
message: ElementL10n.ftueAuthCarouselEncryptedBody,
image: Asset.Images.onboardingScreenPage3),
OnboardingPageContent(title: page4Title.tinting("."),
message: ElementL10n.ftueAuthCarouselWorkplaceBody(InfoPlistReader.target.bundleDisplayName),
image: Asset.Images.onboardingScreenPage4)
OnboardingPageContent(title: ElementL10n.ftueAuthCarouselWelcomeTitle.tinting(".", color: .element.accent),
message: ElementL10n.ftueAuthCarouselWelcomeBody(InfoPlistReader.target.bundleDisplayName),
image: Asset.Images.onboardingAppLogo)
]
bindings = OnboardingBindings()
}
ElementX/Sources/Screens/OnboardingScreen/View/OnboardingBackgroundView.swift
+68
View File
@@ -0,0 +1,68 @@
//
// Copyright 2023 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 DesignKit
import SwiftUI
/// A glossy animated background view designed for the onboarding screen
struct OnboardingBackgroundView: View {
@Environment(\.colorScheme) private var colorScheme
@State private var factor = 0.0
@State private var isReversed = false
private let step = 0.001
private let timer = Timer.publish(every: 0.01, on: .main, in: .common).autoconnect()
var body: some View {
GeometryReader { geometry in
ZStack {
Image(asset: Asset.Images.onboardingBackgroundPart1)
.position(x: geometry.size.width * 0.125 - factor * geometry.size.width * 0.25, y: (1.0 - factor) * geometry.size.height * 0.55)
Image(asset: Asset.Images.onboardingBackgroundPart2)
.position(x: geometry.size.width * 1.05, y: factor * geometry.size.height * 0.45)
Image(asset: Asset.Images.onboardingBackgroundPart3)
.position(x: factor * geometry.size.width, y: geometry.size.height * 1.05 - factor * geometry.size.height * 0.08)
}
.frame(width: geometry.size.width, height: geometry.size.height)
.onReceive(timer) { _ in
if isReversed {
guard factor > 0 else {
isReversed = false
factor = step
return
}
factor -= step
} else {
guard factor < 1 else {
isReversed = true
factor = 1 - step
return
}
factor += 0.001
}
}
}
}
}
struct OnboardingBackgroundView_Previews: PreviewProvider {
static var previews: some View {
OnboardingBackgroundView()
}
}
ElementX/Sources/Screens/OnboardingScreen/View/OnboardingPageView.swift
+20 -9
View File
@@ -20,27 +20,38 @@ struct OnboardingPageView: View {
/// The content that this page should display.
let content: OnboardingPageContent
@Environment(\.verticalSizeClass) private var verticalSizeClass
var body: some View {
VStack {
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)
if verticalSizeClass == .regular {
Spacer()
Image(content.image.name)
.resizable()
.scaledToFit()
.padding(60)
.accessibilityHidden(true)
}
Spacer()
VStack(spacing: 8) {
Spacer()
Text(content.title)
.font(.element.title2Bold)
.font(.element.title1Bold)
.foregroundColor(.element.primaryContent)
.multilineTextAlignment(.center)
Text(content.message)
.font(.element.body)
.foregroundColor(.element.secondaryContent)
.multilineTextAlignment(.center)
}
.padding()
.fixedSize(horizontal: false, vertical: true)
Spacer()
}
.padding(.bottom)
.padding(.horizontal, 16)
ElementX/Sources/Screens/OnboardingScreen/View/OnboardingScreen.swift
+50 -45
View File
@@ -21,7 +21,8 @@ import SwiftUI
struct OnboardingScreen: View {
@Environment(\.colorScheme) private var colorScheme
@Environment(\.layoutDirection) private var layoutDirection
@Environment(\.verticalSizeClass) private var verticalSizeClass
private var isLeftToRight: Bool { layoutDirection == .leftToRight }
private var pageCount: Int { context.viewState.content.count }
@@ -33,64 +34,68 @@ struct OnboardingScreen: View {
@ObservedObject var context: OnboardingViewModel.Context
var body: some View {
GeometryReader { geometry in
VStack(alignment: .leading) {
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
// The main content of the carousel
HStack(alignment: .top, spacing: 0) {
// Add a hidden page at the start of the carousel duplicating the content of the last page
OnboardingPageView(content: context.viewState.content[pageCount - 1])
.frame(width: geometry.size.width)
.accessibilityIdentifier("hiddenPage")
ForEach(0..<pageCount, id: \.self) { index in
OnboardingPageView(content: context.viewState.content[index])
ZStack {
OnboardingBackgroundView()
GeometryReader { geometry in
ZStack {
VStack(alignment: .leading) {
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
// The main content of the carousel
HStack(alignment: .top, spacing: 0) {
// Add a hidden page at the start of the carousel duplicating the content of the last page
OnboardingPageView(content: context.viewState.content[pageCount - 1])
.frame(width: geometry.size.width)
.accessibilityIdentifier("hiddenPage")
ForEach(0..<pageCount, id: \.self) { index in
OnboardingPageView(content: context.viewState.content[index])
.frame(width: geometry.size.width)
}
}
.offset(x: pageOffset(in: geometry))
Spacer()
if pageCount > 1 {
OnboardingPageIndicator(pageCount: pageCount, pageIndex: context.pageIndex)
.frame(width: geometry.size.width)
.padding(.bottom)
}
buttons
.frame(width: geometry.size.width)
.padding(.bottom, UIConstants.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
}
.frame(maxHeight: .infinity)
.gesture(
DragGesture()
.onChanged(handleDragGestureChange)
.onEnded { handleDragGestureEnded($0, viewSize: geometry.size) }
)
}
.offset(x: pageOffset(in: geometry))
Spacer()
OnboardingPageIndicator(pageCount: pageCount, pageIndex: context.pageIndex)
.frame(width: geometry.size.width)
.padding(.bottom)
Spacer()
buttons
.frame(width: geometry.size.width)
.padding(.bottom, UIConstants.actionButtonBottomPadding)
.padding(.bottom, geometry.safeAreaInsets.bottom > 0 ? 0 : 16)
Spacer()
.frame(height: UIConstants.spacerHeight(in: geometry))
}
.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)
}
.navigationBarHidden(true)
.onAppear(perform: startTimer)
.onDisappear(perform: stopTimer)
}
/// The main action buttons.
var buttons: some View {
VStack(spacing: 12) {
Button { context.send(viewAction: .login) } label: {
Text(ElementL10n.loginSplashSubmit)
Text(ElementL10n.loginContinue)
}
.buttonStyle(.elementAction(.xLarge))
.accessibilityIdentifier("getStartedButton")
}
.padding(.horizontal, 16)
.padding(.horizontal, verticalSizeClass == .compact ? 128 : 24)
.readableFrame()
}
@@ -111,7 +116,7 @@ struct OnboardingScreen: View {
/// Starts the animation timer for an automatic carousel effect.
private func startTimer() {
guard pageTimer == nil else { return }
guard pageTimer == nil, pageCount > 1 else { return }
pageTimer = Timer.scheduledTimer(withTimeInterval: 5, repeats: true) { _ in
if context.pageIndex == pageCount - 1 {